<template>
  <Table
    ref="tableRef"
    :columns="tableColumns"
    :data="data"
    v-loading="loading"
    class="copyrightTable"
    element-loading-text="加载中..."
  >
    <template #currentStatusCell="slotProps">
      <div class="flex items-center">
        <ApproveStatus :type="slotProps.status"></ApproveStatus>
        <HoverShowReason
          v-if="slotProps.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 #operate="slotProps">
      <syMoreOperate
        :teleport="true"
        :list="getOperateList(slotProps)"
        @click-item="(value) => handleClickItem(value, slotProps)"
        :margin-left="-10"
        class="align-middle"
      >
        <Icon1
          icon-name="iconbianzu7-copy"
          style="font-size: 26px"
          class="cursor-pointer"
        ></Icon1>
      </syMoreOperate>
    </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 { syMoreOperate } from "cqk-sy-ui";
import { ref } from "vue";
import {
  eStatusOfCopyright,
  NOT_PASSED,
  RECORD_SUCCESS,
  WAITING_CHECK,
} from "@/components/ApproveStatus/status";
import { mappingFromStatusToOperate } from "./statusMapping";
import ApproveStatus from "@/components/ApproveStatus/index.vue";
import HoverShowReason from "./HoverShowReason.vue";
import { useTableScrollListener } from "@/components/Table/hooks";

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;
}>();

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

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

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

const handleClickItem = (
  value: Exclude<eStatusOfCopyright, eStatusOfCopyright.ALL>,
  slotProps: any
) => {
  emit("clickOperate", {
    type: value,
    raw: slotProps,
  });
  switch (value) {
    case eStatusOfCopyright.NOT_PASSED:
      break;
    case eStatusOfCopyright.RECORD_SUCCESS:
      break;
    case eStatusOfCopyright.WAITING_CHECK:
      break;
    case eStatusOfCopyright.WAITING_SUBMIT:
      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>
