<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Authority>
          <a-button type="primary" @click="handleAdd"> 新增规则链 </a-button>
        </Authority>
        <!-- <Authority>
          <a-button type="primary" @click="handleImport"> 导入规则链 </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:field-time-outlined',
            //   onClick: handleDetail.bind(null, record),
            // },
            {
              label: '编辑',
              icon: 'clarity:note-edit-line',
              onClick: handleBussinessModal.bind(null, record),
            },
          ]"
          :dropDownActions="[
            {
              label: '设置为根规则链',
              icon: 'ant-design:gateway-outlined',
              color: 'error',
              ifShow: !record.root,
              popConfirm: {
                title: '是否确认设置成根规则链',
                confirm: handleSettingRoot.bind(null, record),
              },
            },
            {
              label: '导出规则链',
              icon: 'ant-design:vertical-align-bottom-outlined',
              onClick: handleExport.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" />

    <!-- <ChainDetailDrawer @register="registerDrawer" /> -->
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import {
    RuleChainPermisssion,
    columns,
    encode,
    exportJSONFile,
    searchFormSchema,
  } from './config/config.data';
  import {
    deleteRuleChine,
    getRuleChinsList,
    exportRuleChine,
    settingRootChine,
  } 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';
  // import { ChainDetailDrawer } from './chainDetail/index';
  // import { useDrawer } from '/@/components/Drawer';

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

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

  // const [registerDrawer, { openDrawer }] = useDrawer();

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

  const handleAdd = () => {
    openModal(true, {
      text: '创建规则链',
    });
  };

  const handleBussinessModal = (record) => {
    openModal(true, {
      text: '编辑规则链',
      record,
    });
  };

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

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

  // const handleRowClick = (record) => {
  //   openDrawer(true, { record });
  //   console.log('点击行', record);
  // };

  // const handleDetail = (record) => {
  //   console.log(record, '详情');
  // };

  // const handleImport = () => {};

  const handleExport = async (record: Recordable) => {
    if (!record) return;
    const { additionalInfo, name, type, firstRuleNodeId, root, debugMode, configuration } =
      record || {};
    const { firstNodeIndex, nodes, connections, ruleChainConnections } = await exportRuleChine(
      record.id.id
    );
    const value = {
      ruleChain: { additionalInfo, name, type, firstRuleNodeId, root, debugMode, configuration },
      metadata: { firstNodeIndex, nodes, connections, ruleChainConnections },
    };
    exportJSONFile(value, name);
  };

  const handleSettingRoot = async (record) => {
    setProps({
      loading: true,
    });
    try {
      await settingRootChine(record.id.id);
      createMessage.success('设置成功');
    } finally {
      setProps({
        loading: false,
      });
    }
    reload();
  };

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