<!-- @format -->

<template>
  <ns-view-list-table v-bind="tableConfig" :model="data" rowKey="uuid">
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'status'">
        <a-badge v-bind="onlineStatus[record.status]" />
      </template>
    </template>
  </ns-view-list-table>
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'WhiteListGroupIndex',
    setup() {
      const data = reactive({});
      const router = useRouter();
      const tableConfig = {
        title: '白名单组',
        api: '/api/op_com/objs/admin/whiteListGroupOper/pageList',
        headerActions: [
          {
            label: '新增',
            name: 'WhiteListGroupAdd',
            type: 'primary',
            handle: ({}, name: string) => router.push({ name }),
          },
        ],
        rowSelection: null,
        scorll: { x: '100%' },
        columns: [
          {
            title: '白名单组名称',
            dataIndex: 'groupName',
            width: '33%',
          },
          {
            title: '用户数量',
            dataIndex: 'userCount',
            width: '33%',
            // textNumber: 20,
          },
          {
            title: '备注',
            dataIndex: 'remark',
            textNumber: 10,
            width: '34%',
            textEllipsis: true,
          },
        ],
        columnActions: {
          title: '操作',
          actions: [
            {
              // 跳转白名单用户
              label: '查看',
              name: 'WhiteListGroupCheck',
              handle: ({ uuid }: any) =>
                router.push({ name: 'WhiteListUserIndex', query: { uuid } }),
            },
            {
              label: '编辑',
              name: 'WhiteListGroupEdit',
              handle: ({ uuid }: any, name: string) => router.push({ name, query: { uuid } }),
            },
          ],
        },

        formConfig: {
          schemas: [
            {
              field: 'groupName',
              label: '白名单组名称',
              component: 'NsInput',
              componentProps: {
                placeholder: '请输入',
              },
            },
            {
              field: 'groupType',
              label: '白名单组类型',
              component: 'NsSelect',
              defaultValue: '',
              componentProps: {
                options: [
                  {
                    label: '全部',
                    value: '',
                  },
                  {
                    label: '活动白名单',
                    value: 0,
                  },
                  {
                    label: '功能白名单',
                    value: 1,
                  },
                ],
              },
            },
          ],
          params: {},
        },
        rowKey: 'uuid',
      };

      return {
        tableConfig,
        data,
      };
    },
  });
</script>
