<template>
  <div>
    <a-form layout="inline" v-if="configure.isSearch" @submit="handleSubmit" :form="form">
      <a-row :gutter="8">
        <a-col :span="item.span ? item.span : configure.span" v-for="(item, index) in searchList" :key="index">
          <!-- 文本框 -->
          <a-form-item :label="item.name" v-if="item.type == 'text'">
            <a-input
              v-decorator="[item.field]"
              :style="item.style"
              :placeholder="item.placeholder" />
          </a-form-item>
          <!-- 分类(级联选择) -->
          <a-form-item :label="item.name" v-if="item.type == 'cascader'">
            <a-cascader
              :options="cascaderData"
              change-on-select
              :field-names="item.fieldNames"
              v-decorator="[item.field]"
              :placeholder="item.placeholder"
            />
          </a-form-item>
          <!-- 下拉框 -->
          <a-form-item :label="item.name" v-if="item.type == 'select'">
            <a-select
              v-decorator="[item.field]"
              :style="item.style"
              :placeholder="item.placeholder"
              @change="handleSelectChange"
            >
              <a-select-option v-for="(items, indexs) in item.content" :key="indexs" :value="items.value ? items.value : items.id">
                {{ items.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- 日期(单个日期) -->
          <a-form-item :label="item.name" v-if="item.type == 'timeDate'">
            <a-date-picker
              :show-time="item.isShowTime"
              :format="item.format"
              :suffix-icon="item.suffix"
              :style="item.style"
              :disabled-date="item.disabledDate == true ? disabledDate : null"
              v-decorator="[item.field]">
              <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon" />
            </a-date-picker>
          </a-form-item>
          <!-- 日期(选择月) -->
          <a-form-item :label="item.name" v-if="item.type == 'timeMonth'">
            <a-month-picker
              :show-time="item.isShowTime"
              :suffix-icon="item.suffix"
              :style="item.style"
              :disabled-date="item.disabledDate == true ? disabledDate : null"
              v-decorator="[item.field]">
              <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon" />
            </a-month-picker>
          </a-form-item>
          <!-- 日期(选择周) -->
          <a-form-item :label="item.name" v-if="item.type == 'timeWeek'">
            <a-week-picker
              :show-time="item.isShowTime"
              :suffix-icon="item.suffix"
              :style="item.style"
              :disabled-date="item.disabledDate == true ? disabledDate : null"
              v-decorator="[item.field]">
              <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon" />
            </a-week-picker>
          </a-form-item>
          <!-- 日期(起始时间跟结束时间) -->
          <a-form-item :label="item.name" v-if="item.type == 'timeRange'">
            <a-range-picker
              :show-time="item.isShowTime"
              :suffix-icon="item.suffix"
              :style="item.style"
              :format="item.format"
              style="width: 200px"
              v-decorator="[item.field]">
              <a-icon slot="suffixIcon" v-if="item.icon" :type="item.icon" />
            </a-range-picker>
          </a-form-item>
          <!-- 单选 -->
          <a-form-item :label="item.name" v-if="item.type == 'radio'">
            <a-radio-group v-decorator="[item.field]" :style="item.style">
              <a-radio :value="items.value" v-for="(items, indexs) in item.content" :key="indexs">
                {{ items.name }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- 多选 -->
          <a-form-item :label="item.name" v-if="item.type == 'checkbox'">
            <a-checkbox-group
              v-decorator="[item.field]"
              :style="item.style"
            >
              <a-checkbox :value="items.value" v-for="(items, indexs) in item.content" :key="indexs">
                {{ items.name }}
              </a-checkbox>
            </a-checkbox-group>
          </a-form-item>
          <!-- 弹框选择 -->
          <a-form-item :label="item.name" v-if="item.type == 'modal'">
            <a-input
              v-decorator="[item.field]"
              :style="item.style"
              @click="modal(item)"
              :placeholder="item.placeholder" />
            <a-modal
              :title="item.configure.strTitle"
              style="top: 20px;z-index:99999"
              :visible="modalVisible"
              @cancel="hideVisible"
              :width="item.configure.iWidth"
              :footer="null"
              class="wy-modal"
            >
              <ListTable
                ref="customTable"
                :configure="item.configure"
                :searchList="item.searchList"
                :columns="item.columns"
                @singleCall="singleCallBack"
              >
              </ListTable>
            </a-modal>
          </a-form-item>
          <!-- 多级下拉框 -->
          <a-form-item :label="item.name" v-if="item.type == 'multilevel'">
            <!-- <MultilevelSelect
              ref="multilevel"
              v-model="item.objData"
              @formSubmit="onSubmit"
            ></MultilevelSelect> -->
            <MultilevelSelectFormItem
              ref="multilevelForm"
              v-model="item.objData"
              @onChange="multilevelhandleSelectChange"
              @formSubmit="onSubmit"
            ></MultilevelSelectFormItem>
            <!-- {{item.type == 'multilevel' ? item : null}} -->
          </a-form-item>
        </a-col>
        <a-col :md="configure.span" :sm="configure.span" style="margin-top: 4px;">
          <a-button type="primary" htmlType="submit">搜索</a-button>
          <a-button @click="resetSearchForm" style="margin-left:20px" v-if="configure.isReset">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
// import MultilevelSelect from '@/components/Object/MultilevelSelect'
import MultilevelSelectFormItem from '../MultilevelSelect/formItem'
import moment from 'moment'
export default {
  components: {
    ListTable: () => import('../ListTable/Index.vue'),
    // MultilevelSelectFormItem: () => import('@/components/Object/MultilevelSelect/formItem'),
    MultilevelSelectFormItem
  },
  props: {
    // 需要设置的一些属性 strTitle:弹框标题  isSearch:是否需要搜索  isChoice:是否多选
    configure: {
      type: Object,
      default: null
    },
    // 需要搜索的内容
    searchList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 分类
    cascaderData: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      field: {},
      oerderData: {
        date: [null, null]
      },
      modalVisible: false,
      modalField: null,
      modalName: '',
      searchField: [],
      modalData: {},
      modalFieldData: {},
      objData: {}
    }
  },
  created () {
    this.handleField()
    this.defaultValue()
    this.searchLists()
    this.setMatchedData()
  },
  methods: {
    moment,
    onSubmit (obj) {
      console.log(obj)
    },
    defaultValue () {
      var params = {}
      if (this.searchList.length > 0) {
        this.searchList.forEach(item => {
          if (item.type === 'modal') {
            const type = item.columns.filter(items => {
              return items.isShowName
            })[0].dataIndex
            item.configure.getFunction(item.configure.ginseng).then(res => {
              const data = res.data.data.filter(items => {
                return items.id === parseInt(item.defaultValue)
              })[0]
              params[item.field] = data[type]
              this.$nextTick(() => {
                this.form.setFieldsValue(params)
              })
            })
          } else {
            params[item.field] = item.defaultValue
            this.$nextTick(() => {
                this.form.setFieldsValue(params)
            })
          }
        })
      }
    },
    // 当前日期之前的都不能选
    disabledDate (current) {
      return current && current < moment().endOf('day')
    },
    // 选中的开始之前的都不能选
    disabledStarDate (current) {
      return current && current < this.oerderData.date[0]
    },
    changeDate (index, value) {
      this.oerderData.date[index] = value
      if (index === 0) {
        this.oerderData.date[1] = null
      }
    },
    // 点击下拉框事件
    handleSelectChange (value) {
    },
    // 获取多级联动下拉-发生改变时触发该事件
    multilevelhandleSelectChange (value, item, chil, prop) {
      const _this = this
      _this.searchList.forEach((item, index) => {
        if (item.field === 'multilevel') {
          this.objData = item.objData
        }
      })
      const setProp = {}
      // 清空当前下拉框之后的所有数据和值
      _this.objData.Data.children.forEach((newItem, c) => {
        if (c > chil) {
          setProp[`${newItem.prop}`] = undefined
          _this.form.setFieldsValue(setProp)
          newItem.option = []
        }
      })
      // 如果子下标大于数组长度时，返回结束该方法
      chil++
      if (chil >= _this.objData.Data.children.length) return
      const itemObj = item.filter(val => val.id === value)[0]
      let request = {}
      const params = {}
      request = Object.assign(request, _this.objData.Data.children[chil].request)
      params[request.params.name] = itemObj[request.params.prop]
      request.params = params
      _this.$refs.multilevelForm[0].getSelectParams(request, chil)
    },
    // 设置返回数据并赋值
    setMatchedData () {
      const _this = this
      const params = {}
      for (var key in _this.matchedData) {
        _this.objData.Data.children.forEach((child, c) => {
          if (child.prop === key) {
            params[`${child.prop}`] = _this.matchedData[key]
          }
        })
      }
      _this.$nextTick(() => {
        _this.form.setFieldsValue(params)
      })
    },
    searchLists () {
      if (this.searchList.length > 0) {
        for (var i in this.searchList) {
          if (this.searchList[i].type === 'modal') {
            this.searchField.push(this.searchList[i])
          }
        }
      }
    },
    singleCallBack (item) {
      const field = {}
      for (var i in this.searchField) {
        if (this.searchField[i].field === this.modalField.field) {
          this.modalFieldData[i] = item[this.modalField.searchField]
        }
      }
      field[this.modalField.field] = item[this.modalName]
      this.form.setFieldsValue(field)
      this.modalVisible = false
    },
    // 点击弹框
    modal (data) {
      this.modalData = data
      for (var item in data.columns) {
        if (data.columns[item].isShowName) {
          this.modalName = data.columns[item].key
        }
      }
      this.modalField = data
      this.modalVisible = true
    },
    hideVisible () {
      this.modalVisible = false
    },
    // 重置
    resetSearchForm () {
      this.form.resetFields()
      this.resetSearchSave({})
      this.$emit('serchData', [], 'reset')
    },
    // 重置要保留的值
    resetSearchSave (objResetField) {
      this.searchList.forEach(item => {
        if (item.isResetSave) {
          objResetField[item.field] = item.defaultValue
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(objResetField)
        })
      })
    },
    // 处理字段
    handleField () {
      if (this.searchList.length > 0) {
        this.searchList.map(v => v.field).forEach(item => {
          this.field[item] = null
        })
      }
    },
    // 搜索
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log(values)
        if (!err) {
          for (let i = 0; i < this.searchList.length; i++) {
            if (values[this.searchList[i].field] !== undefined && values[this.searchList[i].field] !== null) {
              if (this.searchList[i].type === 'timeDate' || this.searchList[i].type === 'timeMonth' || this.searchList[i].type === 'timeWeek') {
                values[this.searchList[i].field] = values[this.searchList[i].field].format(this.searchList[i].format)
              } else if (this.searchList[i].type === 'timeRange' && !this.searchList[i].isMerge) {
                var setField = this.searchList[i].setValue(values[this.searchList[i].field])
                if (setField.length === 0) {
                  values[this.searchList[i].field] = [values[this.searchList[i].field][0].format(this.searchList[i].format), values[this.searchList[i].field][1].format(this.searchList[i].format)]
                } else {
                  for (let k = 0; k < setField.length; k++) {
                    if (values[this.searchList[i].field][k]) {
                      this.$set(values, setField[k], values[this.searchList[i].field][k].format(this.searchList[i].format))
                    } else {
                      this.$set(values, setField[k], null)
                    }
                  }
                }
              } else if (this.searchList[i].type === 'timeRange' && this.searchList[i].isMerge) {
                var a = this.searchList[i].setValue(values[this.searchList[i].field])
                for (let k = 0; k < a.length; k++) {
                  if (values[this.searchList[i].field][k]) {
                    this.$set(values, a[k], values[this.searchList[i].field][k].format(this.searchList[i].format))
                  } else {
                    this.$set(values, a[k], null)
                  }
                }
                delete values[this.searchList[i].field]
              }
              if (this.searchList[i].type === 'cascader') {
                var cascaderId = values[this.searchList[i].field]
                values[this.searchList[i].field] = cascaderId[cascaderId.length - 1]
              }
              if (this.searchList[i].type === 'modal') {
                for (var item in this.searchField) {
                  if (typeof this.modalFieldData[item] === 'undefined') {
                    values[this.searchField[item].field] = ''
                  } else {
                    values[this.searchField[item].field] = this.modalFieldData[item]
                  }
                }
              }
            }
          }
          this.$emit('serchData', values)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.approver-tag{
  max-height: 100px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #ececec;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #f7f9fc;
  }
}
.ant-tag-blue{
  border-radius: 10px;
}
::v-deep .ant-calendar-picker-icon {
  width: 100%;
  text-align: right;
}
</style>
