<template>
  <div class="advanced-search card" @keyup.enter="search">
    <el-form ref="formRef" :model="formData" :label-width="80">
      <Grid :gap="30" :cols="2">
        <GridItem>
          <el-form-item label="朝代" prop="highDynastySort">
            <el-select
              v-model="formData.highDynastySort"
              multiple
              filterable
              clearable
              remote
              placeholder="请输入"
              :remote-method="opt => remoteMethod(opt, 'dynasty')"
              class="wid100"
            >
              <el-option v-for="item in dynastyOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictSort" />
            </el-select>
          </el-form-item>
        </GridItem>
        <GridItem>
          <el-form-item label="" prop="highFirstContent" label-width="0px">
            <InputDropdown v-model="formData.highFirstContent" />
          </el-form-item>
        </GridItem>
        <GridItem>
          <el-form-item label="所属疾病" prop="highDisease">
            <el-select
              v-model="formData.highDisease"
              multiple
              filterable
              clearable
              remote
              placeholder="请输入"
              :remote-method="opt => remoteMethod(opt, 'disease')"
              class="wid100"
            >
              <el-option v-for="item in diseaseOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
            </el-select>
          </el-form-item>
        </GridItem>
        <GridItem>
          <el-form-item label="" prop="highSecondContent" label-width="0px">
            <InputDropdown v-model="formData.highSecondContent" />
          </el-form-item>
        </GridItem>
        <GridItem>
          <el-form-item label="书名" prop="highBook">
            <el-select
              v-model="formData.highBook"
              multiple
              filterable
              clearable
              remote
              placeholder="请输入"
              :remote-method="opt => remoteMethod(opt, 'book')"
              class="wid100"
            >
              <el-option v-for="item in bookOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
            </el-select>
          </el-form-item>
        </GridItem>
        <GridItem>
          <el-form-item label="" prop="highThirdContent" label-width="0px">
            <InputDropdown v-model="formData.highThirdContent" />
          </el-form-item>
        </GridItem>
      </Grid>
      <el-checkbox-group v-model="formData.highStyle" class="text-align-c mt30">
        <el-checkbox v-for="item in StyleId.getAllEnumValues()" :label="item.value" :key="item.value">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <div class="operation mt20">
        <el-button size="large" @click="resetForm"> 重置 </el-button>
        <el-button size="large" type="primary" class="ml40" :loading="loading" @click="search"> 检索 </el-button>
      </div>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { ElForm } from "element-plus";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import { StyleId } from "@/enums";
import { Common, Retrieval } from "@/api/interface";
import { getDictOptions } from "@/api/modules/common";
import InputDropdown from "./InputDropdown.vue";

const emit = defineEmits(["search"]);

const formRef = ref<typeof ElForm>();
const loading = ref(false);
const diseaseOptions = ref<Common.DictOptions[]>([]);
const bookOptions = ref<Common.DictOptions[]>([]);
const dynastyOptions = ref<Common.DictOptions[]>([]);
const formData = ref({} as Retrieval.AdvancedSearchParams);

const remoteMethod = (query: string, type: string) => {
  loading.value = true;
  getDictOptions(type, {
    dictValue: query
  }).then(res => {
    loading.value = false;
    switch (type) {
      case "disease":
        diseaseOptions.value = res.data;
        break;
      case "book":
        bookOptions.value = res.data;
        break;
      case "dynasty":
        dynastyOptions.value = res.data;
        break;
      default:
        break;
    }
  });
};
// 获取字典数据
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function loadDictData() {
  getDictOptions("disease").then(res => {
    diseaseOptions.value = res.data;
  });
  getDictOptions("book").then(res => {
    bookOptions.value = res.data;
  });
  getDictOptions("dynasty").then(res => {
    dynastyOptions.value = res.data;
  });
}
// loadDictData();

function search() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    emit("search", {
      ...formData.value
    });
  }, 300);
}

function resetForm() {
  formData.value.highStyle = [];
  formRef.value?.resetFields();
}
</script>
<style lang="scss" scoped>
.advanced-search {
  width: 100%;
  .operation {
    text-align: center;
  }
}
</style>
