<template>
  <div
    class="search-bar mt20"
    v-show="!showAdvanced"
    @keyup.enter="
      search({
        generalSearchReqList: [{ ...commonParams }],
        highBook: commonParams.highBook,
        highDisease: commonParams.highDisease
      })
    "
  >
    <el-select
      size="large"
      v-model="commonParams.searchType"
      placeholder="请选择"
      style="width: 120px"
      clearable
      :disabled="!BUTTONS.common"
    >
      <el-option label="全文" :value="1" />
      <el-option label="条文内容" :value="2" />
      <el-option label="所属疾病" :value="3" />
      <el-option label="书名" :value="4" />
    </el-select>
    <!-- 疾病搜索框 -->
    <el-select
      v-model="commonParams.highDisease"
      class="input"
      v-show="commonParams.searchType === 3"
      size="large"
      style="width: 500px"
      multiple
      filterable
      clearable
      remote
      placeholder="请输入"
      :remote-method="opt => remoteMethod(opt, 'disease')"
    >
      <el-option v-for="item in options" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
    </el-select>
    <!-- 书名搜索框 -->
    <el-select
      v-model="commonParams.highBook"
      class="input"
      collapse-tags
      collapse-tags-tooltip
      multiple
      v-show="commonParams.searchType === 4"
      size="large"
      style="width: 500px"
      :loading="loading"
      filterable
      remote
      reserve-keyword
      placeholder="请输入"
      :remote-method="opt => remoteMethod(opt, 'book')"
    >
      <el-option v-for="item in options" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
    </el-select>
    <el-button
      class="common-btn"
      v-show="[3, 4].includes(commonParams.searchType)"
      type="primary"
      @click="
        search({
          generalSearchReqList: [{ ...commonParams }],
          highBook: commonParams.highBook,
          highDisease: commonParams.highDisease
        })
      "
      :disabled="!BUTTONS.common"
      style="height: 100%"
    >
      <el-icon class="mr5"> <Search /></el-icon> 普通检索
    </el-button>
    <el-input
      class="input"
      size="large"
      v-model="commonParams.generalKeyword"
      v-show="![3, 4].includes(commonParams.searchType)"
      style="width: 600px"
      placeholder="请输入"
      clearable
      @keyup.enter="
        search({
          generalSearchReqList: [{ ...commonParams }],
          highBook: commonParams.highBook,
          highDisease: commonParams.highDisease
        })
      "
      :disabled="!BUTTONS.common"
    >
      <template #append>
        <el-button
          class="common-btn"
          type="primary"
          @click="
            search({
              generalSearchReqList: [{ ...commonParams }],
              highBook: commonParams.highBook,
              highDisease: commonParams.highDisease
            })
          "
          :disabled="!BUTTONS.common"
          style="height: 100%"
        >
          <el-icon class="mr5"> <Search /></el-icon> 普通检索
        </el-button>
      </template>
    </el-input>
    <el-button class="advance-btn ml20" v-auth="['search:advance']" size="large" type="primary" @click="switchAdvancedSearch">
      高级检索 <el-icon> <ArrowRight /></el-icon>
    </el-button>
    <el-button
      v-if="showResult"
      v-auth="['search:research']"
      size="large"
      class="ml20"
      type="success"
      :disabled="commonParams.generalKeyword.trim().length === 0"
      @click="resultFilter"
    >
      结果内检索
    </el-button>
    <el-button v-if="showResult" class="common-btn ml20" size="large" type="primary" @click="init"> 重置搜索条件 </el-button>
  </div>
  <div v-show="showAdvanced" class="advanced-box">
    <el-button size="large" type="primary" plain @click="showAdvanced = false">返回普通搜索</el-button>
    <AdvancedSearch class="mt20" @search="search" />
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps } from "vue";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { Retrieval } from "@/api/interface/index";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import AdvancedSearch from "./AdvancedSearch.vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { getDictOptions } from "@/api/modules/common";

const emit = defineEmits(["search", "resultFilter", "update:showResult", "reset"]);
defineProps({
  showResult: {
    type: Boolean,
    default: false
  }
});

// hooks
const { BUTTONS } = useAuthButtons({
  common: ["search:common"] // 普通检索
});
const commonParams = ref<Retrieval.CommonSearchParams>({
  searchType: 1,
  generalKeyword: ""
});

const showAdvanced = ref(false);
const loading = ref(false);
const options = ref<any>([]);
function search(params: Partial<Retrieval.ReqRetrievalParams>) {
  showAdvanced.value = false;

  emit("search", params);
}
function switchAdvancedSearch() {
  commonParams.value = {
    searchType: 1,
    generalKeyword: ""
  };
  showAdvanced.value = true;
  emit("update:showResult", false);
}

function resultFilter() {
  emit("resultFilter", {
    ...commonParams.value
  });
}
const remoteMethod = (query: string, type: string) => {
  loading.value = true;
  getDictOptions(type, {
    dictValue: query
  }).then((res: any) => {
    loading.value = false;
    options.value = res.data;
  });
};
function init() {
  commonParams.value = {
    searchType: 1,
    generalKeyword: ""
  };
  emit("reset", {
    ...commonParams.value
  });
}
</script>
<style lang="scss" scoped>
.search-bar {
  display: flex;
  margin: 0 auto;
  margin-top: 20vh;
  .input {
    width: 600px;
  }
  .common-btn {
    padding: 0 10px;
    color: #ffffff;
    background: #e3a000;
    &:hover {
      color: #ffffff;
      background: rgba(#e3a000, 0.7);
    }
  }
  .advance-btn {
    --el-button-bg-color: #ba7d44;
  }
}
.advanced-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 800px;
  margin: 0 auto;
}

@media (width >= 1000px) {
  .advanced-box {
    width: 768px;
  }
}

@media (width >= 1200px) {
  .advanced-box {
    width: 1000px;
  }
}
</style>
