<template>
  <a-form
    :model="where"
    :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
    :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
  >
    <a-row>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="水源类型:">
              <a-select v-model:value="where.waterSourceType" allowClear showSearch>
                <a-select-option :value="'1'">地表水</a-select-option>
                <a-select-option :value="'2'">地下水</a-select-option>
              </a-select>
            </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="水源状态:">
            <a-select v-model:value="where.drinkingWaterType" allowClear showSearch>
            <a-select-option :value="'1'">在用</a-select-option>
            <a-select-option :value="'2'">备用</a-select-option>
            </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="起始时间:" name="monitorStartTime" >
          <a-month-picker
            v-model:value="where.monitorStartTime"
            valueFormat="YYYY-MM"
            :locale="locale"
            placeholder="请输入起始时间"
            allow-clear
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="结束时间:" name="monitorEndTime">
          <a-month-picker
            v-model:value="where.monitorEndTime"
            valueFormat="YYYY-MM"
            :locale="locale"
            placeholder="请输入结束时间"
            allow-clear
          />
        </a-form-item>
      </a-col>
  
    </a-row>
    <a-row>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
      <a-form-item label="断面名称:">
          <a-select v-model:value="where.sectionNames" mode="multiple" allowClear showSearch>
            <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
              </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="监测指标:">
          <div class="input-item" @click="showModal">
            <a-checkbox
                :checked="checkAll"
                :indeterminate="indeterminate"
            >
            全选
        </a-checkbox>
              </div>
        </a-form-item>
      </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" @click="searchData">查询</a-button>
            <a-button @click="reset">重置</a-button>
            <a-button @click="exportFile">导出Excel</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>

    <a-modal v-model:visible="visible" width="760px" title="监测指标" @ok="handleOk" @cancel="handleCancel">
        <div :style="{ borderBottom: '1px solid #E9E9E9', marginBottom: '5px', paddingBottom: '5px' }">
            <a-checkbox
            v-model:checked="checkAll"
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
            >
            全选
        </a-checkbox>
        </div>

        <a-checkbox-group
          style="width: 100%"
          @change="handleChange"
          v-model:value="filter"
        >
          <a-row>
            <a-col
              :span="8"
              v-for="item in filterColumns"
              :key="item.dataIndex"
            >
              <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>

    </a-modal>
  </a-form>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import { filterColumns } from "./../colums/base";
import { countyListInfo as listInfo } from "@/api/ecology/new-drinking-water";
export default {
  name: "city-search",
  props: {
    // 表格搜索条件
    searchForm: {
      typeof: Object,
      default: function () {
        return {};
      },
    },
    filterKeys:{
        typeof: Object,
            default: function () {
                return [];
            },
    },
    visiable:{
        typeof:Boolean
    },
    loadSearch:{
        typeof:Boolean
    }
  },
  data() {
    return {
    indeterminate:false,
      checkAll: true,
      where: {
      },
      filter:[],
      columnsKey:[],
      locale,
      visible: false,
      filterColumns: filterColumns,
      newCloumns:[],
      oldCloumns:[],
      filterItem:[],
      sectionInfo:[]
    };
  },
  watch: {
    searchForm(newV) {
      this.where = newV;
    },
    filterKeys(newKeys){
        this.initFilter(newKeys)
    },
    // 监控修改全选框图标状态
    filter(newV){
        if(newV.length !== this.filterColumns.length){
            this.checkAll = false
            this.indeterminate = false
            if(newV.length){
                this.indeterminate = true
            }
        }else{
            this.checkAll = true
            this.indeterminate = false
        }
    },
    // 监听组件显示
    visiable(val){
         window.setTimeout(()=>{
        let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) && val;
        this.emitData(isSearch)
      },200)
    }
  },

  created(){
      listInfo().then((res) => {
      if (res.data.code == 0) {
        this.visibleWater = true;
        this.sectionInfo = res.data.data
      } else {
        this.$message.error(res.data.msg);
      }
    })
  },

  mounted() {
    this.where = this.searchForm;
    this.filter = filterColumns.map((item) => item.dataIndex);
    this.columnsKey = [...this.filter]
    // 生成复选框
    this.newCloumns = [...filterColumns];
    // 缓存复选框
    this.oldCloumns = [...filterColumns];
    // this.$emit("buildColumns", filterColumns);
    // 根据父级传回来需要去掉勾的值映射到复选框
    this.initFilter(this.filterKeys);
    // 将父级回传的搜索条件上传父级进行页面搜索
    let isSearch = (this.where.monitorStartTime && this.where.monitorEndTime) || this.loadSearch;
    this.emitData(isSearch)

  },
  methods: {

    emitData(val){
      // if(val && this.where.startTime && this.where.endTime){
        if(val){
          this.searchData();
      }
    },

      // 初始化选择
      initFilter(newKeys){
                let filterIndex =this.filterColumns.map(item=>(item.dataIndex))
        const newList = filterIndex.filter((item) => {
            return newKeys.indexOf(item) == -1
        })
        this.filter = newList;
      },

    onCheckAllChange (e) {
        this.filter =  e.target.checked ? filterColumns.map((item) => item.dataIndex) : []
  
    },

    handleChange(e) {
      let newCloumns = [];
      filterColumns.forEach((item) => {
        const index = e.indexOf(item.dataIndex);
        if (index > -1) {
          newCloumns.push(item);
        }
      });
      this.newCloumns = newCloumns;
    },
    reset() {
      this.where = {
        checked: 1,
        limit: 10,
        page: 1,
        regionLevel:this.where.regionLevel
      }
      this.searchData();
    },
    searchData() {
    if(Array.isArray(this.filter) && this.filter.length){
            this.where.filter = this.changeKeyToName([...this.filter])
        }else{
            delete this.where.filter;
        }
      this.$emit("search", this.where);
    },
    // 将key转文字
    changeKeyToName(keys){

        const targetNames = []

        filterColumns.forEach(item=>{
            if(keys.indexOf(item.dataIndex)>-1){
                targetNames.push(item.title)
            }
        })
        return targetNames;
    },
    exportFile() {
      this.$emit("exportFile");
    },
    showModal() {
      this.visible = true;
    },
    handleCancel(){
        this.visible = false;
        // 如果是取消，则还原上次勾选项
        this.filter = this.oldCloumns.map(item=>item.dataIndex)
    },
    handleOk() {
      this.visible = false;
       this.oldCloumns = [...this.newCloumns];
        // 选中的所有项
        // console.log(this.columnsKey)

        // 得到没有选中的项，然后在表头将没选中项去除
        let filterKey = []
        this.columnsKey.forEach(key=>{
            if(this.filter.indexOf(key) == -1){
                filterKey.push(key)
            }
        })

      this.$emit("filterColumns", filterKey);

      // this.$emit("selectKeys", this.columnsKey);
    },
  },
};
</script>

<style scoped>
.ant-calendar-picker {
  width: 100%;
}
.input-item {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5715;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  transition: all 0.3s;
  overflow: hidden;
  cursor: pointer;
  height: 32px;
}
</style>