<template>
  <div>
    <div class="m-search">
      <el-form :inline="true"
               :model="form"
               :label-width="'100px'">

        <el-form-item prop="gridId"
                      label="所属网格">

          <el-select v-model.trim="form.GRID_ID"
                     placeholder="请选择"
                     size="small"
                     clearable
                     class="u-item-width-normal"
                     @change="handleChangeGrid">
            <el-option v-for="item in optionsG"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属房屋">

          <el-select v-model.trim="form.VILLAGE_ID"
                     placeholder="请选择小区"
                     size="small"
                     clearable
                     class="u-item-width-communitycascader"
                     @clear="handleClearVillage"
                     @change="handleChangeV">
            <el-option v-for="item in optionsV"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model.trim="form.BUILD_ID"
                     placeholder="楼号"
                     size="small"
                     clearable
                     class="u-item-width-buildcascader"
                     style="margin-left:5px"
                     :disabled="changeVDisabled"
                     @clear="handleClearBuild"
                     @change="handleChangeB">
            <el-option v-for="item in optionsB"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model.trim="form.UNIT_ID"
                     :disabled="changeBDisabled"
                     placeholder="单元"
                     size="small"
                     clearable
                     class="u-item-width-buildcascader"
                     style="margin-left:5px"
                     @click="handleClearDan"
                     @change="handleChangeD">
            <el-option v-for="item in optionsD"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model.trim="form.HOME_ID"
                     :disabled="changeDDisabled"
                     placeholder="房号"
                     size="small"
                     clearable
                     class="u-item-width-buildcascader"
                     style="margin-left:5px">
            <el-option v-for="item in optionsH"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item v-for="(n, index) in formList"
                      :key="index"
                      :prop="n.id"
                      :label="n.label">

          <el-input v-if="n.itemType === 'input' || n.itemType === 'textarea'"
                    v-model.trim="form[n.columnName]"
                    class="u-item-width-normal"
                    size="small"
                    clearable
                    placeholder="请输入内容">
          </el-input>
          <template v-else-if="n.itemType === 'datepicker'">
            <el-date-picker v-if="n.queryType === 'daterange'"
                            v-model.trim="form[n.columnName]"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            class="u-item-width-daterange2"
                            size="small"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-date-picker v-else
                            v-model.trim="form[n.columnName]"
                            class="u-item-width-normal"
                            type="date"
                            size="small"
                            clearable
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
            </el-date-picker>
          </template>
          <el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'"
                     v-model.trim="form[n.columnName]"
                     placeholder="请选择"
                     size="small"
                     clearable
                     class="u-item-width-normal">
            <el-option v-for="item in n.options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-cascader v-else-if="n.itemType === 'cascader'"
                       v-model.trim="form[n.columnName]"
                       :options="n.options"
                       :props="{ checkStrictly: true }"
                       clearable
                       size="small"
                       class="u-item-width-normal">
          </el-cascader>
        </el-form-item>

        <div class="u-search-btn">
          <el-button class="diy-button--white"
                     size="small"
                     @click="resetForm">重置</el-button>
          <el-button style="margin-left:10px"
                     size="small"
                     class="diy-button--blue"
                     @click="handleSearch">查询</el-button>

        </div>

      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: 'DeathSearch',
  props: {
    formList: {
      type: Array,
      default: () => []
    },
    columnName: {
      type: String,
      default: ''
    }
  },
  data () {
    let initForm = (arr, columnName) => {
      let _form = {}
      // console.log('formInfo', obj)
      // if (Object.keys(obj).length > 0) {
      //   _form = { ...obj }
      //   return _form
      // }
      arr.forEach((item) => {
        if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
        else _form[item.columnName] = ''
      })
      return _form
    }
    let form = initForm(this.formList, this.columnName)
    let tempFormList = this.formList.map(item => {

      return {
        ...item,
        isChange: this.columnName && this.columnName === item.columnName ? true : false
      }
    })
    let constForm = {
      ...form,
      GRID_ID: '',
      VILLAGE_ID: '',
      BUILD_ID: '',
      UNIT_ID: '',
      HOME_ID: ''
    }
    return {
      pageLoading: false,
      openSearch: false,
      optionsV: [],
      optionsB: [],
      optionsH: [],
      optionsD: [],
      optionsG: [],
      value: '',
      fixedList: [],
      fixedForm: {
        GRID_ID: '',
        VILLAGE_ID: '',
        BUILD_ID: '',
        UNIT_ID: '',
        HOME_ID: ''
      },
      constForm,
      form: {
        ...form,
        GRID_ID: '',
        VILLAGE_ID: '',
        BUILD_ID: '',
        UNIT_ID: '',
        HOME_ID: ''
      },
      tempFormList,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {
    sliceList () {
      return function (data, count) {
        if (data !== undefined) {
          let index = 0
          let arrTemp = []
          for (let i = 0; i < data.length; i++) {
            index = parseInt(i / count)
            if (arrTemp.length <= index) {
              arrTemp.push([])
            }
            arrTemp[index].push(data[i])
          }
          return arrTemp
        }
      }
    },
    changeVDisabled () {
      return !this.form.VILLAGE_ID
    },
    changeBDisabled () {
      return !this.form.BUILD_ID
    },
    changeDDisabled () {
      return !this.form.UNIT_ID
    }
  },
  watch: {
    form: {
      handler (val, val2) {
        // console.log('valpppp----', val, val2)
        for (let n in val) {
          if (this.constForm[n] !== val[n]) {
            this.handleChangeForm(n)
            console.log('nnnnnn', n)
          }
        }
        this.constForm = { ...val }
      },
      deep: true
    }
  },
  created () {
    // this.initForm()
    // console.log('formcccc---', this.form)
    this.getGridList()
    this.getValiheList()
    if (this.columnName) this.handleChangeForm(this.columnName)
  },
  methods: {
    initForm () {
      this.formList.forEach((item) => {
        this.$set(this.form, item.columnName, '')
      })
      console.log('formcccc---', this.form)
    },
    handleClearVillage () {
      this.form.BUILD_ID = ''
      this.form.HOME_ID = ''
    },
    handleClearBuild () {
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
    },
    handleClearDan () {
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
    },
    resetForm (formName) {
      for (const n in this.form) {
        this.form[n] = ''
      }
      this.handleSearch()
    },
    handleSearch () {
      // console.log('formmmmm---', this.form)
      const itemTypes = ['daterange', 'timerange']
      let arr = this.tempFormList
        .filter((n) => n.isChange)
        .map((item) => {
          return {
            queryType: item.queryType,
            tableName: item.tableName,
            columnName: item.columnName,
            // columnValue: []
            columnValue:
              itemTypes.includes(item.queryType) ||
                itemTypes.includes(item.itemType)
                ? this.form[item.columnName]
                : [this.form[item.columnName].toString()]
          }
        })
      let arr1 = this.fixedList
        .filter((n) => n.columnValue.length > 0)
        .map((item) => {
          return {
            ...item
          }
        })
      let arr3 = [...arr1, ...arr]
      this.$emit('search', arr3)
    },
    handleOpenSearch () {
      this.openSearch = !this.openSearch
    },
    handleChangeGrid (val) {
      console.log('val', val)
      this.form.VILLAGE_ID = ''
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getValiheList()
    },
    handleChangeV (val) {
      console.log('val', val)
      this.form.BUILD_ID = ''
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getBuildList()
    },
    handleChangeB (val) {
      console.log('val', val)
      this.form.UNIT_ID = ''
      this.form.HOME_ID = ''
      this.getUniList()
    },
    handleChangeD (val) {
      console.log('val', val)
      this.form.HOME_ID = ''
      this.getHouseList()
    },
    // 监听基础form
    handleChangeForm (val) {
      for (let n in this.fixedForm) {
        if (n === val) {
          if (this.fixedList.length > 0) {
            let _item = {}
            let hasVal = false
            this.fixedList.forEach((item, index) => {
              if (item.columnName == val) {
                hasVal = true
                item.columnValue[0] = this.form[val]
                if (!this.form[val]) this.fixedList.splice(index, 1)
                console.log('fixedList----val', this.fixedList)
              } else {
                _item = {
                  queryType: 'equal',
                  tableName: 'ic_resi_user',
                  columnName: val,
                  columnValue: [this.form[val]]
                }
                console.log('fixedList----else', _item)
                // this.$set(this.fixedList, index, _item)
              }
            })
            if (Object.keys(_item).length > 0 && !hasVal) this.fixedList.push(_item)
          } else {
            this.$set(this.fixedList, 0, {
              queryType: 'equal',
              tableName: 'ic_resi_user',
              columnName: val,
              columnValue: [this.form[val]]
            })
          }
        }
      }
      console.log('fixedList----999', this.fixedList)
      this.tempFormList.forEach((item) => {
        if (item.columnName === val) item.isChange = true
      })
    },
    getGridList () {
      const { user } = this.$store.state
      this.$http
        .post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'query' })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            this.optionsG = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    getValiheList () {
      const { user } = this.$store.state
      this.$http
        .post('/gov/org/icneighborhood/neighborhoodoption', {
          gridId: this.form.GRID_ID,
          agencyId: ''
          // agencyId: user.agencyId
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            this.optionsV = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    getBuildList () {
      this.$http
        .post('/gov/org/icbuilding/buildingoption', {
          neighborHoodId: this.form.VILLAGE_ID
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            this.optionsB = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    getUniList () {
      this.$http
        .post('/gov/org/icbuildingunit/unitoption', {
          buildingId: this.form.BUILD_ID
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            this.optionsD = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    },
    getHouseList () {
      this.$http
        .post('/gov/org/ichouse/houseoption', { unitId: this.form.UNIT_ID })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log('获取查询详情成功', res.data)
            this.optionsH = res.data
          }
        })
        .catch(() => {
          return this.$message.error('网络错误')
        })
    }
  }
}
</script>

<style lang="scss" scope>
@import "@/assets/scss/modules/management/list-main.scss";

.m-search {
  /deep/ .el-form-item {
    margin-bottom: 14px;
  }
}
</style>
