<template>
  <el-row :gutter="12">
    <el-col class="select-col" :span="4">
      <el-select
        v-model="fieldList.keyword"
        filterable
        :loading="loading"
        :options="options"
        placeholder="请选择字段"
        @change="onFieldChange"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.factoryName"
          :value="item.factoryCode"
        />
      </el-select>
    </el-col>
    <el-col class="select-col" :span="4">
      <el-select
        v-model="typeList.selectedOption.value"
        :options="dictOptions"
        placeholder="请选择类型"
      >
        <el-option
          v-for="item in dictOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-col>
    <el-col class="select-col" :span="4">
      <el-date-picker
        v-if="isDatePicker"
        v-model="valueList.datePickerValue"
        type="date"
        popper-class="date-picker-popper"
        value-format="yyyy-MM-dd"
        :editable="false"
        :clearable="false"
        :arrow-control="false"
        @change="onDatePickerChange"
        @focus="onFocus"
        @blur="onBlur"
        @keydown.native.stop
      />
      <el-select
        v-else
        v-model="valueList.keyword"
        remote
        filterable
        :loading="loading"
        :options="options"
        :popper-append-to-body="false"
        placeholder="请输入或选择值"
      >
        <!-- <el-option v-if="isDatePicker" :label="valueList.datePickerValue" :value="valueList.datePickerValue">
          <el-date-picker
            v-model="valueList.datePickerValue"
            type="date"
            popper-class="date-picker-popper"
            value-format="yyyy-MM-dd"
            :editable="false"
            :clearable="false"
            :arrow-control="false"
            @change="onDatePickerChange"
            @focus="onFocus"
            @blur="onBlur"
            @keydown.native.stop
          />
        </el-option> -->
        <el-option
          v-for="option in options"
          :key="option.value"
          :label="option.factoryCode"
          :value="option.factoryName"
        />
      </el-select>
    </el-col>
    <el-col class="select-col text-right" :span="12">
      <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" @click="handleSave">保存</el-button>
      <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
    </el-col>
  </el-row>
</template>

<script>
import { getFactoryPage } from '@/api/wms/base/stock'

export default {
  name: 'TripleSelect',
  props: {
    // dictOptions: {
    //   type: Array,
    //   required: true,
    //   default: () => [
    //     {
    //       value: 'equal',
    //       label: '等于'
    //     },
    //     {
    //       value: 'contain',
    //       label: '包含'
    //     },
    //     {
    //       value: 'likely',
    //       label: '类似于'
    //     }
    //   ]
    // },
    defaultField: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      options: [],
      fieldList: {
        keyword: '',
        type: ''
      },
      dictOptions: [
        {
          value: 'equal',
          label: '等于'
        },
        {
          value: 'contain',
          label: '包含'
        },
        {
          value: 'likely',
          label: '类似于'
        }
      ],
      typeList: {
        selectedOption: ''
      },
      valueList: {
        keyword: '',
        show: true,
        datePickerValue: new Date(new Date().setHours(0, 0, 0, 0)).toLocaleDateString().replace(/\//g, '-'),
        type: ''
      },
      isDatePicker: false
    }
  },
  mounted() {
    this.fieldList.keyword = this.defaultField
    this.typeList.selectedOption = this.dictOptions[0]
    this.getOptions()
  },
  methods: {

    getOptions() {
      const params = {
        pageNo: 1,
        pageSize: 100
      }
      this.loading = true
      getFactoryPage(params).then(res => {
        // this.options = res.data.list
        this.options = [
          {
            id: 0,
            factoryCode: 'M&T001',
            factoryName: '麦禾田001',
            itemType: 'String'
          },
          {
            id: 1,
            factoryCode: 'M&T002',
            factoryName: '麦禾田002',
            itemType: 'number'
          },
          {
            id: 2,
            factoryCode: 'M&T003',
            factoryName: '麦禾田003',
            itemType: 'date'
          }
        ]
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    onFieldChange(e) {
      const items = this.options.find(item => item.factoryCode === e)
      if (items.itemType === 'date') {
        this.isDatePicker = true
      } else {
        this.isDatePicker = false
      }
      // if (this.fieldList.keyword) {
      //   if (this.isDatePicker) {
      //     this.valueList.show = true
      //   } else {
      //     this.valueList.show = false
      //   }
      // } else {
      //   this.valueList.show = false
      // }
    },
    onDatePickerChange(value) {
      this.valueList.keyword = value
    },
    onFocus() {
      this.valueList.datePickerEvents[0] = 'keydown.native.stop'
    },
    onBlur() {
      delete this.valueList.datePickerEvents[0]
    },
    // 搜索
    handleQuery() {},
    // 重置
    resetQuery() {},
    // 保存
    handleSave() {}
  }
}
</script>

<style scoped>
.select-col {
  padding-right: 8px;
  padding-left: 8px;
}
.date-picker-popper {
  z-index: 2000;
}
</style>

