<template>
  <div class="search-container">
    <el-form :inline="true" class="search-form">
      <el-form-item>
        <el-select
          v-model="selectedItem"
          placeholder="请选择"
          @change="handleSelectChange"
        >
          <el-option
            v-for="item in dataList"
            :key="item.id"
            :label="item.factoryName"
            :value="factoryCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="selectedDict"
          placeholder="请选择"
          :options="dictOptions"
        />
        <el-form-item v-if="showThirdSelect">
          <template v-if="isDateType">
            <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" />
          </template>
          <template v-else>
            <el-select
              v-model="selectedType"
              placeholder="请选择"
              :options="typeOptions"
            />
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form-item></el-form>
    <advancedFilter ref="advancedFilter" />
  </div>
</template>

<script>
import { reactive } from 'vue'
import advancedFilter from './advancedFilter.vue'

export default {
  name: 'ShortcutSearch',
  comments: {
    advancedFilter
  },
  props: {
  },

  setup() {
    const state = reactive({
      selectedItem: null,
      selectedDict: null,
      selectedType: null,
      selectedDate: null,
      showThirdSelect: false
    })
    const dictData = [
      {
        value: 'equal',
        label: '等于'
      },
      {
        value: 'contain',
        label: '包含'
      },
      {
        value: 'likely',
        label: '类似于'
      }
    ]

    const dataList = [
      {
        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'
      }
    ]
    const handleSelectChange = (value) => {
      state.showThirdSelect = false
      if (value.type === 'date') {
        state.showThirdSelect = true
      }
    }

    const handleSearch = () => {
      console.log('handleSearch')
      const params = {
        id: state.selectedItem.id,
        dict: state.selectedDict,
        type: state.isDateType ? new Date(state.selectedDate).format('YYYY-MM-DD') : state.selectedType
      }
      console.log('params:', params)
    }

    return {
      state,
      dataList,
      dictData,
      // dictOptions: props.dictData,
      typeOptions: ['类型1', '类型2', '类型3'],
      isDateType: false,
      handleSelectChange,
      handleSearch
    }
  },

  // watch: {
  //   'state.selectedItem'(newVal) {
  //     if (newVal && newVal.type === 'date') {
  //       this.isDateType = true
  //     } else {
  //       this.isDateType = false
  //     }
  //   }
  // },

  onMounted() {
    this.handleSearch()
    if (this.dataList.length > 0) {
      // 默认选中第一个数据
      this.state.selectedItem = this.dataList[0]
    }
  }
}
</script>

<style scoped>
.search-container {
  margin-bottom: 20px;
}

.search-form {
  margin-top: 10px;
}
</style>
