<template>
  <div>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="历史记录" width="60%">
      <BasicTable @register="registerTable" :searchInfo="searchInfo">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '预览',
                  onClick: handleHistory.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </BasicDrawer>
    <a-modal
      :destroyOnClose="true"
      wrap-class-name="full-modal"
      width="70%"
      v-model:open="postOpen"
      title="流程模板预览"
    >
      <process-designer-page
        style="border: 1px solid rgba(0, 0, 0, 0.1); height: 100%"
        ref="modelDesigner"
        v-loading="designerData.loading"
        :pageFlow="flowContent"
        :pageView="content"
        :pageType="'detail'"
        :destroyOnClose="true"
      />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, h } from 'vue';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { getLoadHistoryPage, updateScheme } from '@/api/sys/WFSchemeInfo';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { Tag, Switch } from 'ant-design-vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { ProcessDesignerPage } from '@/components/ProcessDesigner/page';

  defineOptions({ name: 'HistoryDrawer' });

  let postOpen = ref(false);
  const searchInfo = reactive<Recordable>({});
  const schemeId = ref('');
  const content = ref('');
  const flowContent = ref('');
  const designerData = reactive({
    loading: false,
  });
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false });
    searchInfo.id = data.record.id;
    schemeId.value = data.record.schemeId;
    reload();
  });
  const [registerTable, { reload }] = useTable({
    api: getLoadHistoryPage,
    columns: [
      {
        title: '创建人',
        dataIndex: 'createUserName',
      },
      {
        title: '创建时间',
        dataIndex: 'createDate',
      },
      {
        title: '状态',
        dataIndex: 'type',
        customRender: ({ record }) => {
          if (record.type == 1) {
            const color = 'green';
            const text = '正式';
            return h(Tag, { color: color }, () => text);
          } else {
            const color = 'blue';
            const text = '草稿';
            return h(Tag, { color: color }, () => text);
          }
        },
      },
      {
        title: '当前版本',
        dataIndex: 'enabledMark',
        width: 80,
        customRender: ({ record }) => {
          if (!record.type) {
            const color = 'blue';
            const text = '草稿';
            return h(Tag, { color: color }, () => text);
          } else {
            return h(Switch, {
              checked: record.id === schemeId.value,
              onChange(checked) {
                const { createMessage } = useMessage();
                updateScheme({ schemeId: record.id, id: searchInfo.id })
                  .then((data) => {
                    createMessage.success('版本切换成功');
                    schemeId.value = record.id;
                    reload();
                  })
                  .catch((err) => {
                    createMessage.success('版本切换失败');
                  })
                  .finally(() => {
                    record.pendingStatus = false;
                  });
              },
            });
          }
        },
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    maxHeight: 680,
    rowKey: 'id',
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });
  function handleHistory(record) {
    postOpen.value = true;
    content.value = record.content;
    flowContent.value = record.flowContent;
  }
  onMounted(() => {});
</script>

<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
    }

    .ant-modal-content {
      height: calc(80vh);
    }

    .ant-modal-body {
      height: 80%;
    }
  }
</style>
