<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Authority>
          <a-button type="primary" @click="handleAdd"> 新增规则链 </a-button>
        </Authority>
        <!-- <Authority>
          <Popconfirm
            title="您确定要批量删除数据"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDeleteOrBatchDelete(null)"
          >
            <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
          </Popconfirm>
        </Authority> -->
      </template>
      <template #root="{ record }">
        <Tag :color="record.root ? 'green' : 'red'"> {{ record.root ? '是' : '否' }}</Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '查看',
              icon: 'ant-design:eye-outlined',
              onClick: handleView.bind(null, record),
            },
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              color: 'error',
              ifShow: !record.root,
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDeleteOrBatchDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <RuleChainModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, encode, searchFormSchema } from './config/config.data';
  import { deleteRuleChine, getRuleChinsList } from '/@/api/ruleengine/ruleengineApi';
  import { useModal } from '/@/components/Modal';
  import { Authority } from '/@/components/Authority';
  import { Tag } from 'ant-design-vue';
  import { RuleChainModal } from './component/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useRouter } from 'vue-router';

  const [registerTable, { reload, setProps }] = useTable({
    title: '规则链库',
    api: getRuleChinsList,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    fetchSetting: {
      pageField: 'page',
      listField: 'data',
    },
    pagination: true,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    beforeFetch(params) {
      Reflect.set(params, 'page', params.page - 1);
      Reflect.set(params, 'sortProperty', 'createdTime');
      Reflect.set(params, 'sortOrder', 'DESC');
      return params;
    },
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const [registerModal, { openModal }] = useModal();

  const handleSuccess = () => {
    reload();
  };

  const handleAdd = () => {
    openModal(true);
  };

  const { createMessage } = useMessage();
  const { hasPermission } = usePermission();
  const router = useRouter();

  const handleView = (record: Recordable) => {
    const hasDetailPermission = hasPermission('rule:chain:detail');
    if (hasDetailPermission) {
      const boardId = encode(record.id.id);
      router.push(`/rule/chain/${boardId}`);
    } else createMessage.warning('没有权限');
  };

  const handleDeleteOrBatchDelete = async (record: Recordable) => {
    setProps({
      loading: true,
    });
    try {
      await deleteRuleChine(record.id.id);
      createMessage.success('删除成功');
    } finally {
      setProps({
        loading: false,
      });
    }
    reload();
  };
</script>