<template>
  <div class="flex flex-col h-full">
    <div v-if="perm.BUTTON_Add" class="page-action page-header">
      <t-button theme="primary" @click="handleAdd">
        <template #icon><svg-icon name="add-circle" color="#fff" /></template
        >新增服务档位
      </t-button>
    </div>
    <div class="flex-1 page-wrap">
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
        }"
        v-loading="tableLoading"
      >
        <template #type="{ col, row }">
          {{ customerTypeFilter(row[col.colKey]) }}
        </template>
        <template #create-time="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #role-list="{ col, row }">
          <!-- <p v-for="(item, index) in row[col.colKey]" :key="index"
            >{{ item.roleName }}({{ item.quota }})</p
          > -->
          {{
            row[col.colKey]
              .map((item) => `${item.roleName}（${item.quota}）`)
              .join('，')
          }}
        </template>
        <template #operate="{ row }">
          <div class="table-operations">
            <t-link
              v-if="perm.LINK_Update"
              theme="primary"
              hover="color"
              @click="handleEdit(row)"
            >
              修改
            </t-link>
            <t-link
              v-if="perm.LINK_Delete"
              theme="primary"
              hover="color"
              @click="handleDelete(row)"
            >
              作废
            </t-link>
          </div>
        </template>
      </t-table>
    </div>

    <edit-service-level-dialog
      v-if="perm.LINK_Update || perm.BUTTON_Add"
      v-model:visible="showEditServiceLevelDialog"
      :curRow="curRow"
      @success="fetchData"
    ></edit-service-level-dialog>
  </div>
</template>

<script setup name="ServiceLevelManage">
import { ref } from 'vue';
import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
import useFetchTable from '@/hooks/useFetchTable';
import EditServiceLevelDialog from './edit-service-level-dialog.vue';
import { serviceLevelQueryApi, serviceLevelDeleteApi } from '@/api/system';
import { customerTypeFilter, timestampFilter } from '@/utils/filter';
import usePermission from '@/hooks/usePermission';
const { perm } = usePermission();

const showEditServiceLevelDialog = ref(false);
const curRow = ref(null);

const columns = [
  { colKey: 'level', title: '服务档位名称', minWidth: 140 },
  { colKey: 'type', title: '业务类型', width: 120 },
  {
    colKey: 'roleList',
    title: '项目角色配置',
    cell: 'role-list',
    minWidth: 200,
  },
  { colKey: 'devices', title: '设备配置（台）', width: 140 },
  { colKey: 'createName', title: '创建人', width: 120 },
  { colKey: 'createTime', title: '创建时间', width: 180, cell: 'create-time' },
  {
    title: '管理',
    colKey: 'operate',
    fixed: 'right',
    width: 120,
  },
];
const {
  loading: tableLoading,
  pagination,
  tableData,
  fetchData,
  onChange,
} = useFetchTable(serviceLevelQueryApi);

const handleAdd = () => {
  curRow.value = null;
  showEditServiceLevelDialog.value = true;
};
const handleEdit = (row) => {
  curRow.value = row;
  showEditServiceLevelDialog.value = true;
};
const handleDelete = (row) => {
  const confirmDia = DialogPlugin({
    header: '操作提示',
    body: `确定要作废当前记录吗`,
    confirmBtn: '确定',
    cancelBtn: '取消',
    theme: 'warning',
    onConfirm: async () => {
      confirmDia.hide();
      const res = await serviceLevelDeleteApi(row.id).catch(() => {});
      if (!res) return;
      MessagePlugin.success('作废成功');
      fetchData();
    },
  });
};
</script>
