<template>
  <div>

    <!--有时间组件-->
    <div v-if="date === true && multiple === false" class="search-item-select-date">



      <Select slot="prepend" v-model="key" @on-change="_selKeyChange" style="width:90px">


     <span v-for="item in optionList"  v-bind:key="item.key">
        <Option :value="item.key" :key="item.key" v-if="compareKey!==item.key">
          {{item.name}}
        </Option>
      </span>

      </Select>
      <template v-if="dateToMin">
        <Date-picker :placeholder="msg" :editable="false"
                     @on-change="_dateChange"
                     type="datetimerange" format="yyyy-MM-dd HH:mm" style="width:185px;"
                     placement="bottom-start">
        </Date-picker>
      </template>
      <template v-else>
        <Date-picker :placeholder="msg" :editable="false" @on-change="_dateChange"
                     type="daterange" format="yyyy-MM-dd" style="width:185px;"
                     placement="bottom-start">
        </Date-picker>
      </template>
    </div>
    <!--结果判定单选组件-->
    <div v-else-if="date === false && multiple === true" class="search-item-select-date">
      <Select slot="prepend" v-model="key" @on-change="_selKeyChange" style="width:90px">
        <span v-for="item in optionList" v-bind:key="item.key">
          <Option :value="item.key" :key="item.key" v-if="compareKey!==item.key">
          {{item.name}}
          </Option>
        </span>


      </Select>
      <el-select v-model="qualifiedValue" :placeholder="msg" size="small" clearable>
        <el-option :label="item.name" :value="item.value" v-for="item in judgeList"
                   :key="item.value"></el-option>
      </el-select>
    </div>
    <!--正常-->
    <Input v-model="inputValue" :placeholder="msg" @on-enter="_formSearch" v-else-if="date === false && multiple === false"
           style="width: 275px">
    <Select slot="prepend" v-model="key" @on-change="_selKeyChange" style="width:90px">
      <!--:key  渲染时key很有用，不写可能渲染错-->
      <div v-for="item in optionList" v-bind:key="item.key">
        <Option  :value="item.key" :key="item.key" v-if="compareKey!==item.key">
          {{item.name}}
        </Option>
      </div>
    </Select>
    </Input>

  </div>
</template>

<script>
export default {
  props: {
    placeholder: null,
    keyword: null,
    optionList: null,
    compareKeyword: null,
    isDate: null,
    judgeList: null
  },
  data() {
    return {
      formObj: {},
      inputValue: '',
      msg: this.placeholder, // 必须重新赋值 ，因前面不是变量
      key: this.keyword, // 必须重新赋值 ，因前面不是变量
      compareKey: this.compareKeyword, // 必须重新赋值 ，因前面不是变量
      date: this.isDate !== undefined,
      multiple: false,
      qualifiedValue: '',
      // 日期精确到分，动态设置日期格式不行
      dateToMin: false
    }
  },
  methods: {
    _formSearch() {
      if (this.inputValue) {
        this.formObj[this.key] = this.inputValue
        // this.$emit('on-result-change', 'search', this.formObj)
        this.$emit('on-result-change', 'search')
      } else {
        this.formObj[this.key] = ''
        // this.$emit('on-result-change', 'search', this.$serializeFormSearch(this.formObj))
        this.$emit('on-result-change', 'search')
      }
    },
    _setCompareKeyword(data) {
      this.compareKey = data
    },
    _getFormObj() {
      if (this.inputValue) {
        this.formObj[this.key] = this.inputValue
      } else {
        this.formObj[this.key] = ''
      }
      return this.$serializeFormSearch(this.formObj)
    },
    _qualifiedValue() {
      const obj = {}
      if (this.qualifiedValue) {
        obj.qualifiedValue = this.qualifiedValue
      } else {
        obj.qualifiedValue = ''
      }
      return this.$serializeFormSearch(obj)
    },
    _selKeyChange(data) {
      this.$emit('on-result-change', 'keyword', this.key)
      this.formObj = {}
      this.inputValue = ''
      const obj = this.optionList.find(item => item.key === data)
      if (obj.date) {
        if (obj.dateToMin !== undefined) {
          this.dateToMin = true
        } else {
          this.dateToMin = false
        }
        this.date = true
        this.multiple = false
        this.qualifiedValue = ''
      } else if (obj.multiple) {
        this.multiple = true
        this.date = false
      } else {
        this.multiple = false
        this.date = false
        this.qualifiedValue = ''
      }
      this.key = obj.key
      this.msg = obj.placeholder
    },
    _dateChange(date) {
      if (date[0]) {
        this.formObj[this.key + 'Begin'] = date[0]
        this.formObj[this.key + 'End'] = date[1]
      } else {
        this.formObj = {}
      }
    },
    _selJudge() {}
  }
}
</script>
