<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] flex justify-between items-center"
    >
      <el-form-item label="查询文本" prop="query_text" class="w-[50%]">
        <el-input
          v-model="form.query_text"
          placeholder="请输入查询文本~"
          class="w-full"
          clearable
          type="textarea"
          :rows="5"
          autosize
        />
      </el-form-item>

      <el-form-item class="w-[50%] flex justify-center items-center">
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          {{ t("buttons:Search") }}
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          {{ t("buttons:Reset") }}
        </el-button>
        <el-button
          type="primary"
          :icon="useRenderIcon(UploadIcon)"
          @click="showUploadArea = !showUploadArea"
        >
          {{ showUploadArea ? t("buttons:Hide") : t("buttons:Import") }}
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 上传文件区域 -->
    <el-card v-if="showUploadArea" shadow="never" class="mt-2">
      <el-upload
        ref="uploadRef"
        v-model:file-list="fileList"
        drag
        :limit="1"
        action="#"
        class="w-full"
        :auto-upload="false"
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
      >
        <div class="el-upload__text">
          <IconifyIconOffline
            :icon="UploadIcon"
            width="26"
            :limit="1"
            class="m-auto mb-2"
          />
          可点击或拖拽上传
        </div>
      </el-upload>
      <template #footer>
        <div class="flex items-center justify-center">
          <el-button class="w-full my-2" @click="onDownloadTemplate">{{
            t("buttons:DownLodedTemplate")
          }}</el-button>
          <el-popconfirm title="是否确认上传?" @confirm="handleUpload">
            <template #reference>
              <el-button
                class="w-full my-2"
                type="primary"
                :disabled="uploadStatus"
                >{{ t("buttons:ConfirmUpload") }}</el-button
              >
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-card>
    <!-- 查询结果 -->
    <el-card v-if="queryResult" shadow="never" class="mt-2">
      <el-descriptions title="查询基本信息" border :column="4">
        <el-descriptions-item align="center" label="操作时间">{{
          dayjs(queryResult.operation_time).format("YYYY-MM-DD HH:mm:ss")
        }}</el-descriptions-item>
        <el-descriptions-item align="center" label="耗时"
          >{{ queryResult.cost_time.toFixed(2) }} ms</el-descriptions-item
        >
        <el-descriptions-item align="center" label="查询统计">{{
          queryResult.query_count
        }}</el-descriptions-item>
        <el-descriptions-item align="center" label="结果统计">{{
          queryResult.result_count
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <PureTableBar title="查询结果" :columns="columns" @refresh="onSearch">
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(Export)"
          @click="exportToExcel([queryResult], '查询结果')"
        >
          {{ t("buttons:ExportAll") }}
        </el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <div
          v-if="selectedNum > 0"
          v-motion-fade
          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
        >
          <div class="flex-auto">
            <span
              style="font-size: var(--el-font-size-base)"
              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
            >
              已选 {{ selectedNum }} 项
            </span>
            <el-button type="primary" text @click="onSelectionCancel">
              {{ t("buttons:Deselect") }}
            </el-button>
          </div>
          <el-popconfirm title="是否确认导出?" @confirm="onbatchExport">
            <template #reference>
              <el-button type="primary" text class="mr-1">
                {{ t("buttons:ExportInBatches") }}
              </el-button>
            </template>
          </el-popconfirm>
        </div>
        <pure-table
          ref="tableRef"
          row-key="id"
          adaptive
          border
          stripe
          :adaptiveConfig="{ offsetBottom: 45 }"
          align-whole="center"
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @selection-change="handleSelectionChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
              @click="handleDetail(row)"
            >
              {{ t("buttons:Details") }}
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <el-drawer v-model="drawerStatus" title="查询详情" :size="`50%`" show-close>
      <el-collapse v-model="activeCollapse" :accordion="false">
        <!-- 基本信息 -->
        <el-collapse-item title="基本信息" name="baseInfo">
          <el-descriptions border>
            <el-descriptions-item align="center" label="查询文本">{{
              rowInfo.query_text
            }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <!-- 查询结果 -->
        <el-collapse-item
          v-for="(item, index) in rowInfo.result_text"
          :key="item.id"
          :title="`匹配结果${index + 1}`"
          :name="`result${index + 1}`"
        >
          <el-descriptions border :column="1">
            <el-descriptions-item align="center" label="编码ID">{{
              item.id
            }}</el-descriptions-item>
            <el-descriptions-item align="center" label="海关编码">{{
              item.code.replace(/(\d{2})/g, "$1.").slice(0, -1)
            }}</el-descriptions-item>
            <el-descriptions-item align="center" label="编码描述">{{
              item.description
            }}</el-descriptions-item>
            <el-descriptions-item align="center" label="匹配率">{{
              item.match_rate ? `${item.match_rate}%` : "0%"
            }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "CodeQueryIndex"
});
import dayjs from "dayjs";
import { ref } from "vue";
import { useIndex } from "./utils/hook";
import { useI18n } from "vue-i18n";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import Export from "@iconify-icons/ri/download-2-line";
const { t } = useI18n();
/**
 * 表格Ref
 */
const tableRef = ref();
const formRef = ref();
const {
  form,
  dataList,
  loading,
  pagination,
  columns,
  rowInfo,
  drawerStatus,
  queryResult,
  selectedNum,
  showUploadArea,
  fileIds,
  fileList,
  uploadStatus,
  activeCollapse,
  beforeUpload,
  handleUpload,
  beforeRemove,
  onSearch,
  resetForm,
  handleSelectionChange,
  onSelectionCancel,
  onDownloadTemplate,
  handleDetail,
  exportToExcel,
  onbatchExport
} = useIndex(tableRef);
</script>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
