<template>
  <a-table
    :row-key="rowKey"
    :row-selection="rowSelection"
    v-bind="$attrs"
    size="middle"
    :columns="tableColumns.filter((v) => !v.hidden)"
    :data-source="dataSource"
    @change="handleTableChange"
  >
    <template v-if="showFooter" #footer>
      <slot name="footer"></slot>
    </template>

    <template #headerCell="{ column }">
      <slot name="headerCell" :column="column" v-if="!column.hidden"></slot>
    </template>

    <template #bodyCell="{ column, record, index }">
      <!-- 操作列 -->
      <template
        v-if="(filteredCellActions || []).length > 0 && column.key === 'action'"
      >
        <span>
          <template
            v-for="(item, actionIndex) in filteredCellActions"
            :key="item.key"
          >
            <template v-if="item.ifRender ? item.ifRender(record) : true">
              <a
                :class="{
                  disabled: hanldeActionCellDisabled(item, record),
                }"
                @click="didClickCell(record, item, index)"
                >{{ item.title }}</a
              >
              <Divider
                v-if="actionIndex != (filteredCellActions || []).length - 1"
                type="vertical"
              />
            </template>
          </template>
        </span>
      </template>

      <!-- 非操作列 -->
      <template v-else>
        <!-- 存在插槽 -->
        <template v-if="column.slotName">
          <slot
            v-if="!column.hidden"
            :name="column.slotName"
            :column="column"
            :record="record"
            :index="index"
          >
            <!-- 状态插槽默认内容 -->
            <template v-if="column.slotName === 'status'">
              <a-tag v-if="record.status === 'DISABLED'" color="success"
                >已启用</a-tag
              >
              <a-tag v-if="record.status === 'ENABLED'" color="error"
                >已禁用</a-tag
              >
            </template>
          </slot>
        </template>

        <!-- 不存在插槽 -->
        <template v-else>
          <slot
            v-if="!column.hidden"
            name="bodyCell"
            :column="column"
            :record="record"
            :index="index"
          ></slot>
        </template>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { inject, PropType } from "vue";
import { Divider } from "ant-design-vue";

defineProps({
  rowKey: {
    type: String,
    default: "id",
  },
  dataSource: {
    type: Array as PropType<any[]>,
  },
});

const cTableProvideData: any = inject("cTableProvideData");

const {
  rowSelection,
  tableColumns,
  handleTableChange,
  showFooter,
  didClickCell,
  filteredCellActions,
  hanldeActionCellDisabled,
} = cTableProvideData;
</script>

<style lang="less" scoped>
.disabled {
  color: gray;
  cursor: default;
}
:deep(.ant-table-container) {
  border-radius: 4px;
  border: 1px solid #edeef2;
}
:deep(.ant-table-thead) > tr > th {
  background-color: #f0f4fa;
  border-radius: 4px 4px 0px 0px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
:deep(.ant-table-thead)
  > tr
  > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
  display: none;
}
</style>
