<template>
  <xl-form ref="queryForm" inline label-width="110px">
    <xl-row>
      <xl-col :span="24" class="m-b-15">
        <xl-popover
          placement="bottom-start"
          width="400"
          trigger="click">
          <xl-row>
            <xl-col :span="10">
            <xl-form-item>
                <xl-select
                  collapse-tags
                  v-model="selectedList"
                  @change="setCurr"
                  placeholdr="请选择属性"
                >
                  <xl-option
                    v-for="item in cndi"
                    :key="item.fieldName"
                    :label="item.fieldDesc"
                    :value="item.fieldName"
                  />
                </xl-select>
            </xl-form-item>
            </xl-col>
            <xl-col :span="12" :offset="2">
              <xl-form-item :props="currentItem.fieldName">
                <xl-input
                  @keypress.enter.native="capVal"
                  v-if="currentItem.displayType === 'input'"
                  v-model="currentItem.fieldValue"
                  clearable
                />
                <xl-select
                  v-if="['select', 'selectMultiple'].includes(currentItem.displayType)"
                  @change="capVal"
                  :multiple="currentItem.displayType === 'selectMultiple'"
                  v-model="currentItem.fieldValue"
                >
                  <xl-option
                    v-for="jtem in currentItem.options"
                    :key="jtem.dictCode"
                    :value="jtem.dictCode"
                    :label="jtem.dictName"
                  />
                </xl-select>
                <xl-autocomplete
                  v-if="currentItem.displayType === 'autoComplete'"
                  v-model="currentItem.fieldValue"
                  @select="capVal"
                  select-when-unmatched
                  class="inline-input"
                  placeholder="请输入内容"
                  :fetch-suggestions="
                    autocompleteForm[currentItem.fieldName].fetchSuggestions
                  "
                />
                <xl-switch
                  @change="capVal"
                  v-if="currentItem.displayType === 'switch'"
                  v-model="currentItem.fieldValue"
                />
              </xl-form-item>
            </xl-col>
          </xl-row>
          <xl-select
            v-model="submitJkl"
            placeholder="内容显示区"
            slot="reference"
            multiple
            popper-class="panel"
          >
            <xl-option
              v-for="(item, index) in allOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></xl-option>
          </xl-select>
        </xl-popover>
      </xl-col>
    </xl-row>
  </xl-form>
</template>
<script>
export default {
  props: {
    autocompleteForm: {
      type: Object,
      default: () => { }
    },
    selectForm: {
      type: Object,
      default: () => { }
    },
    fields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedList: [],
      cndi: [],
      types: ['input', 'select', 'autoComplete', 'switch', 'selectMultiple'],
      submitJkl: [],
      allOptions: [],
      currentItem: {
        displayType: '',
        fieldName: '',
        fieldDesc: '',
        fieldValue: '',
        options: []
      }
    }
  },
  watch: {
    submitJkl: {
      handler(newv) {
        this.upValue(newv)
      },
      deep: true
    },
    fields: {
      handler(newV) {
        this.construct(newV)
      },
      immediate: true
    }
  },
  methods: {
    capVal() {
      const { fieldDesc, fieldName, fieldValue, displayType, options } = this.currentItem
      const index = this.allOptions.findIndex(item => item.name === fieldName)

      let temp = { label: fieldDesc + '：' + fieldValue, value: fieldName + ':' + fieldValue, name: fieldName }
      if (displayType === 'select') {
        temp.label = fieldDesc + '：' + (options.find(item => item.dictCode === fieldValue)).dictName
      }
      if (index === -1) {
        this.allOptions.push(temp)
        this.submitJkl.push(fieldName + ':' + fieldValue)
      } else {
        this.allOptions.splice(index, 1, temp)
        this.submitJkl.splice(index, 1, fieldName + ':' + fieldValue)
      }
    },
    setCurr(val) {
      const item = this.cndi.find(item => item.fieldName === val)
      this.currentItem = item
    },
    upValue(val) {
      let obj = val.reduce((total, item) => {
        const [key, value] = item.split(':')
        if (key && (value || value === false || value === 0)) {
          if (value === 'true') {
            total[key] = true
          } else if (value === 'false') {
            total[key] = false
          } else {
            total[key] = value
          }
        }
        return total
      }, {})
      this.$emit('input', obj)
    },
    construct(arr) {
      const temp = arr.filter(item => this.types.includes(item.displayType))
      this.cndi = temp.map(item => {
        const { displayType, fieldDesc, fieldName, fieldType } = item
        return {
          displayType: displayType,
          fieldDesc: fieldDesc,
          fieldName: fieldName,
          fieldType: fieldType,
          options: item.dictVoList
        }
      })
    }
  }
}
</script>
<style>
.m-b-15 {
  margin-bottom: 15px;
}
.panel {
  display: none;
}
</style>
