<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { Button, Card, Table, Tag } from 'ant-design-vue';
  import { useData } from '/@/hooks/data/useData';
  import { useRouter } from 'vue-router';
  import { authorizeListApi } from '/@/api/authorize';
  import moment from 'moment';

  const router = useRouter();

  const requestList = {
    list: authorizeListApi, // 列表接口
  };

  const searchForm = ref<any>({}); // 查询表单数据

  const {
    onPageChange, //  页码改变的回调
    onSizeChange, // 切换每页条数时的回调
    onSelectChange, // 多选表格选项发生改变的回调
    tableLoading, // 表格懒加载
    pager, // 分页的数据
    tableData, //  表格数据
    selectedRowKeys, // 表格多选之后的数据
  } = useData<any, any>(requestList, searchForm);

  tableData.value = [];

  const columns = [
    { title: '供应商编码', dataIndex: 'supplierCode', key: 'supplierCode' },
    { title: '供应商名称', dataIndex: 'supplierName', key: 'supplierName' },
    {
      title: '授权接口',
      dataIndex: 'authorizeItems',
      key: 'authorizeItems',
      width: 300,
      customRender: ({ text }) => {
        if (Array.isArray(text)) {
          // text.filter(el => el.value).map((item) => item.name).join('，');
          return text
            .filter((el) => el.value)
            .map((item) => h(Tag, { color: 'blue', style: { marginTop: '5px' } }, item.content));
        }
        return '';
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      customRender: ({ text }) => {
        return moment(text).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    { title: '创建人', dataIndex: 'creator', key: 'creator' },
    {
      title: '状态',
      dataIndex: 'authorizeFlag',
      key: 'authorizeFlag',
      customRender: ({ text }) => {
        return text == 1 ? '开启授权' : '终止授权';
      },
    },
    {
      title: '操作',
      fixed: 'right',
      key: 'action',
      width: '150px',
      slots: { customRender: 'action' },
    },
  ];

  const detailBtn = (row) => {
    router.push({ path: '/authorization/detail', query: { id: row.id, detail: 1 } });
  };

  const editBtn = (row) => {
    router.push({ path: '/authorization/editing', query: { id: row.id } });
  };

  const addBtn = () => {
    router.push({ path: '/authorization/add' });
  };
</script>

<template>
  <div class="complaints-page">
    <Card class="search-form">
      <Button type="primary" style="margin: 0 5px" @click="addBtn">新增授权</Button>
      <Table
        :columns="columns"
        :dataSource="tableData"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :scroll="{ x: 'max-content' }"
        :loading="tableLoading"
        rowKey="id"
        :pagination="{
          current: pager.page,
          pageSize: pager.pageSize,
          total: pager.total,
          showSizeChanger: true,
          showLessItems: true,
          showQuickJumper: true,
          onChange: onPageChange,
          onShowSizeChange: onSizeChange,
          showTotal: (total, range) => `总计 ${total} 条`,
        }"
      >
        <template #action="{ record }">
          <Button type="link" @click="editBtn(record)">编辑</Button>
          <Button type="link" @click="detailBtn(record)">查看</Button>
        </template>
      </Table>
    </Card>
  </div>
</template>

<style lang="less" scoped>
  .complaints-page {
    //margin: 20px;

    .search-form {
      .search-header {
        background: #f7f8fc;
        padding: 5px 10px;
        display: flex;
        margin-bottom: 10px;

        .title {
          font-size: 18px;
          //font-weight: 600;
          font-family: 黑体;
          flex: 1;
        }
      }
    }
  }
</style>
