<template>
  <Table
    ref="tableRef"
    :columns="tableColumns"
    :data="data"
    v-loading="loading"
    height="100%"
    element-loading-text="加载中..."
    class="draftBoxTable"
  >
    <template #record_work_name="slotProps">
      <div
        class="cursor-pointer"
        @click="
          $router.push({
            name: 'addCopyRight',
            query: {
              id: slotProps.id,
            },
          })
        "
      >
        {{ slotProps.record_work_name }}
      </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">
      <syMoreOperate
        :teleport="true"
        :list="operateList"
        @click-item="(value) => handleClickItem(value, slotProps)"
        :margin-left="-50"
      >
        <Icon
          icon-name="iconbianzu7-copy"
          style="font-size: 26px"
          class="cursor-pointer"
        ></Icon>
      </syMoreOperate>
    </template>
  </Table>
</template>

<script setup lang="ts">
import Table from "@/components/Table/index.vue";
import { tableColumns } from "./table";
import Icon from "@/components/Icon/index.vue";
import { ref } from "vue";
import { syMoreOperate, formatTime } from "cqk-sy-ui";
import { useTableScrollListener } from "@/components/Table/hooks";
import { workTypeMapping } from "../copyrightManagement/statusMapping";
import { router } from "@/router";
import { deleteCopyRights } from "@/service/copyrightService";
import { ElMessage } from "element-plus";

const emit = defineEmits(["scrollToEnd", "refresh"]);

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

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

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

const operateList = [
  {
    name: "查看详情",
    value: "查看详情",
    click: (slotProps: any) => {
      router.push({
        name: "copyRightDetail",
        query: {
          id: slotProps.id,
        },
      });
    },
  },
  {
    name: "编辑",
    value: "编辑",
    click: (slotProps: any) => {
      router.push({
        name: "addCopyRight",
        query: {
          id: slotProps.id,
        },
      });
    },
  },
  {
    name: "删除",
    value: "删除",
    click: async (slotProps: any) => {
      const res = await deleteCopyRights([slotProps.id]);
      if (res && res.code === 200) {
        ElMessage.success("删除成功");
        emit("refresh");
      }
    },
  },
];

defineExpose({
  tableRef,
});

const handleClickItem = (value: any, slotProps: any) => {
  operateList.find((i) => i.value === value)?.click(slotProps);
};
</script>

<style lang="scss" scoped>
.mm {
  width: 28px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #606266;
  --ss: "vvvvllll";
  line-height: 20px;
}
</style>

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