<template>
  <Table
    ref="tableRef"
    :columns="tableColumns"
    :data="data"
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <template #currentStatusCell="slotProps">
      <div class="flex items-center">
        <ApproveStatus :type="eStatus.approved"></ApproveStatus>
        <HoverShowReason
          :rowData="slotProps"
          v-if="
            eStatus.rejected === slotProps.status ||
            eStatus.platformDismissed === slotProps.status
          "
        ></HoverShowReason>
      </div>
    </template>
    <template #currentStatusHeader>
      <div class="flex items-center">
        当前状态
        <Icon1
          v-if="showStateFilterIcon"
          icon-name="iconlujingbeifen1"
          class="cursor-pointer ml-1"
          @click="handleClickCurrentStatusTableHeader"
        ></Icon1></div
    ></template>
    <template #operate="slotProps">
      <syMoreOperate
        :teleport="true"
        :list="getOperateList(slotProps)"
        @click-item="(value) => handleClickItem(value, slotProps)"
        :margin-left="-10"
      >
        <Icon1
          icon-name="iconbianzu7"
          style="font-size: 40px"
          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 { eStatus } 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(["scrollToEnd"]);

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

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

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

const handleClickItem = (value: any, slotProps: any) => {
  console.log(value, slotProps, "show value");
};

const handleClickCurrentStatusTableHeader = () => {};
</script>

<style></style>
