<template>
  <div>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="历史记录" width="60%" @ok="handleSubmit">
      <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 width="90%" height="80%" v-model:open="postOpen" title="流程模板预览" @ok="postHandleOk">
      <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
      v-loading="designerData.loading"  :pageFlow="flowContent" :pageView="content" :pageType="'detail'"
      @save="onSaveDesigner" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, 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 ProcessDesigner from '@/components/ProcessDesigner/index.vue';

  const { createConfirm, createMessage } = useMessage();
  defineOptions({ name: 'HistoryDrawer' });

  const emit = defineEmits(['success', 'register']);
 let postOpen = ref(false)
  const rowId = ref('');
  const searchInfo = reactive < Recordable > ({});
  const schemeId = ref('')
  const content = ref('')
  const flowContent = ref('')
  const designerData = reactive({
    loading: false,
  })
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false });
    searchInfo.id = data.record.id
    schemeId.value = data.record.schemeId
    reload()
  });
  const [registerTable, { reload, getPaginationRef, }] = 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(() => {
  });
  async function handleSubmit() {
    try {
      const values = await validate();
      let query = values
      // 调用接口
      if (!unref(isUpdate)) {
        const data = await addRole(query);
      } else {
        const data = await updateRole(query);
      }


      setModalProps({ confirmLoading: true });
      // TODO custom api
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>