<template>
  <Table
    class="filingPersonTable"
    ref="tableRef"
    :columns="tableColumns"
    height="100%"
    :data="data"
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <template #authentication_name="slotProps">
      <div
        class="cursor-pointer overflow-hidden text-ellipsis"
        @click="
          $router.push({
            name: 'filingPersonDetail',
            query: {
              id: slotProps.id,
            },
          })
        "
      >
        {{ slotProps.authentication_name }}
      </div>
    </template>
    <template #currentStatusCell="slotProps">
      <div class="flex items-center">
        <ApproveStatus
          :type="slotProps.authentication_status"
          mode="filingPerson"
        ></ApproveStatus>
      </div>
    </template>
    <template #currentStatusHeader>
      <div class="flex items-center">
        <syMoreOperate
          :teleport="true"
          :list="operateListOfFilterStatus"
          @click-item="(value) => handleClickCurrentStatusTableHeader(value)"
          class="flex items-center"
        >
          当前状态
          <Icon
            icon-name="iconlujingbeifen1"
            class="cursor-pointer ml-1"
          ></Icon>
        </syMoreOperate>
      </div>
    </template>
    <template #additional="slotProps">
      <div class="flex items-center">
        {{
          slotProps.authentication_subject_nature === 2
            ? "营业执照"
            : "居民身份证"
        }}
        <img
          v-if="
            (slotProps.authentication_subject_nature === 2 &&
              slotProps?.authentication_business_license?.url) ||
            slotProps.authentication_subject_nature === 1
          "
          src="@/assets/img/link.png"
          style="width: 14px"
          @click="
            async () => {
              if (slotProps.authentication_subject_nature === 1) {
                saveAs(slotProps.authentication_held_front_id_card.url);
                await sleep(1000);
                saveAs(slotProps.authentication_held_back_id_card.url);
              } else {
                saveAs(slotProps.authentication_business_license.url);
              }
            }
          "
          class="ml-2.5 cursor-pointer"
        />
      </div>
    </template>
    <template #operate="slotProps">
      <div class="text-right">
        <syMoreOperate
          :teleport="true"
          :list="getOperateList(slotProps)"
          @click-item="(value) => handleClickItem(value, slotProps)"
          :margin-left="-65"
          class="align-middle"
        >
          <Icon
            icon-name="iconbianzu7-copy"
            style="font-size: 26px"
            class="cursor-pointer"
          ></Icon>
        </syMoreOperate>
      </div>
    </template>
  </Table>
</template>

<script setup lang="ts">
import Table from "@/components/Table/index.vue";
import { tableColumns } from "./table";
import { syMoreOperate } from "cqk-sy-ui";
import { ref } from "vue";
import {
  eStatusOfCopyright,
  eStatusOfFilerCertification,
} from "@/components/ApproveStatus/status";
import ApproveStatus from "@/components/ApproveStatus/index.vue";
import { useTableScrollListener } from "@/components/Table/hooks";
import Icon from "@/components/Icon/index.vue";
import { saveAs } from "file-saver";
import Service from "./Service";
import { sleep } from "@/utils/promise";

defineProps<{
  data: any[];
  loading: boolean;
}>();

const emit = defineEmits<{
  (e: "scrollToEnd"): void;
  (
    e: "clickOperate",
    payload: {
      type: Exclude<eStatusOfCopyright, eStatusOfCopyright.ALL>;
      raw: any;
    }
  ): void;
  (e: "clickStatusFilter", payload: eStatusOfFilerCertification): void;
  (
    e: "edit",
    paylaod: {
      id: number;
    }
  ): any;
  (e: "refresh"): any;
}>();

const tableRef = ref<InstanceType<typeof Table>>();

defineExpose({
  tableRef,
});

useTableScrollListener(tableRef, () => {
  emit("scrollToEnd");
});

const operateListOfFilterStatus =
  Service.getInstance().getOperateListOfFilterStatus();
const getOperateList = (slotProps: any) => {
  return Service.getInstance().getOperateListOfAction(
    slotProps.authentication_status
  );
};
const handleClickItem = (operateValue: string, slotProps: any) => {
  Service.getInstance().handleClickOperateItemOfAction(
    operateValue,
    slotProps,
    emit
  );
};
const handleClickCurrentStatusTableHeader = (
  v: eStatusOfFilerCertification
) => {
  emit("clickStatusFilter", v);
};
</script>

<style lang="scss">
.filingPersonTable {
  .el-table__cell {
    height: 50px;
  }
}
</style>
