<template>
  <Table
    ref="tableRef"
    :columns="tableColumns"
    :data="data"
    v-loading="loading"
    class="copyrightTable"
    element-loading-text="加载中..."
  >
    <template #record_work_name="slotProps">
      <div
        class="cursor-pointer overflow-hidden text-ellipsis"
        @click="
          $router.push({
            name: `copyRightDetail`,
            query: {
              id: slotProps.id,
            },
          })
        "
      >
        {{ slotProps.record_work_name }}
      </div>
    </template>
    <template #currentStatusCell="slotProps">
      <div class="flex items-center">
        <ApproveStatus
          class="flex-shrink-0"
          :type="slotProps.record_work_status"
        ></ApproveStatus>
        <HoverShowReason
          class="ml-2"
          v-if="slotProps.record_work_status === eStatusOfCopyright.NOT_PASSED"
          :rowData="slotProps"
        ></HoverShowReason>
      </div>
    </template>
    <template #currentStatusHeader>
      <div class="flex items-center">
        <syMoreOperate
          :teleport="true"
          :list="operateListOfStatus"
          @click-item="(value) => handleClickCurrentStatusTableHeader(value)"
          class="flex items-center"
        >
          当前状态
          <Icon1
            v-if="showStateFilterIcon"
            icon-name="iconlujingbeifen1"
            class="cursor-pointer ml-1"
          ></Icon1>
        </syMoreOperate></div
    ></template>
    <template #record_work_type="slotProps">
      {{ (workTypeMapping as any)[slotProps.record_work_type] }}
    </template>
    <template #create_time="slotProps">
      {{ formatTime(slotProps.create_time) }}
    </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"
        >
          <Icon1
            icon-name="iconbianzu7-copy"
            style="font-size: 26px"
            class="cursor-pointer"
          ></Icon1>
        </syMoreOperate>
      </div>
    </template>
  </Table>
</template>

<script setup lang="ts">
import Table from "@/components/Table/index.vue";
import Icon1 from "@/components/Icon/index.vue";
import { tableColumns } from "./table";
import { formatTime, syMoreOperate } from "cqk-sy-ui";
import { ref } from "vue";
import {
  eStatusOfCopyright,
  NOT_PASSED,
  RECORD_SUCCESS,
  WAITING_CHECK,
} from "@/components/ApproveStatus/status";
import { mappingFromStatusToOperate, workTypeMapping } from "./statusMapping";
import ApproveStatus from "@/components/ApproveStatus/index.vue";
import HoverShowReason from "./HoverShowReason.vue";
import { useTableScrollListener } from "@/components/Table/hooks";
import { eOperate } from "./types";
import { router } from "@/router";
import { deleteCopyRights } from "@/service/copyrightService";
import { iCopyRight } from "@/types/copyright";
import { ElMessage } from "element-plus";
import { showTip } from "@/components/GlobalMount/api";

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

const emit = defineEmits<{
  (e: "scrollToEnd"): void;
  (
    e: "clickOperate",
    payload: {
      type: Exclude<eStatusOfCopyright, eStatusOfCopyright.ALL>;
      raw: any;
    }
  ): void;
  (e: "clickStatusFilter", payload: eStatusOfCopyright): void;
  (
    e: "viewCertificates",
    payload: {
      url: string;
    }
  ): void;
  (
    e: "downloadCert",
    payload: {
      url: string;
    }
  ): void;
  (e: "refresh"): void;
}>();

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

defineExpose({
  tableRef,
});

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

const getOperateList = (slotProps: any) => {
  const status: Exclude<eStatusOfCopyright, eStatusOfCopyright.ALL> =
    slotProps.record_work_status;
  return mappingFromStatusToOperate[status].map((i) => ({
    name: i,
    value: i,
  }));
};

const handleClickItem = async (value: eOperate, slotProps: iCopyRight) => {
  switch (value) {
    case eOperate.seeDetails:
      router.push({
        name: "copyRightDetail",
        query: {
          id: slotProps.id,
        },
      });
      break;
    case eOperate.viewCertificates:
      emit("viewCertificates", {
        url: slotProps.certificate,
      });
      break;
    case eOperate.downloadCertificates:
      emit("downloadCert", {
        url: slotProps.certificate,
      });
      break;
    case eOperate.edit:
      router.push({
        name: "addCopyRight",
        query: {
          id: slotProps.id,
        },
      });
      break;
    case eOperate.delete:
      showTip(
        "此操作将删除该版权, 是否继续?",
        async () => {
          const res = await deleteCopyRights([slotProps.id]);
          if (res && res.code === 200) {
            ElMessage.success("删除成功");
            emit("refresh");
          }
        },
        () => {}
      );

      break;
  }
};

const operateListOfStatus = [
  {
    name: WAITING_CHECK.label,
    value: WAITING_CHECK.value,
  },
  {
    name: RECORD_SUCCESS.label,
    value: RECORD_SUCCESS.value,
  },

  {
    name: NOT_PASSED.label,
    value: NOT_PASSED.value,
  },
  {
    name: "所有状态",
    value: eStatusOfCopyright.ALL,
  },
];

const handleClickCurrentStatusTableHeader = (v: eStatusOfCopyright) => {
  emit("clickStatusFilter", v);
};
</script>

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