<template>
  <BasicTable @register="registerTable">
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate" v-if="isMiniDesgin=='default'">新建流程</a-button>
      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreateMini" v-if="isMiniDesgin=='mini'">新建简流程</a-button>
    </template>
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)">
        <template #updateProcess>
          <a-upload
            :showUploadList="false"
            :action="processUpload.action(record.id)"
            :data="processUpload.data"
            :headers="processUpload.headers"
            @change="processUpload.onChange"
          >
            <span>上传流程</span>
          </a-upload>
        </template>
      </TableAction>
    </template>
  </BasicTable>

  <!-- 流程设计modal -->
  <process-design-modal @register="registerDesignModal" @success="loadTable"></process-design-modal>

  <!-- 简流设计器modal -->
  <mini-des-flow-modal @register="registerMiniDesFlowModal" :isLowApp="false" @success="loadTable"></mini-des-flow-modal>

  <!-- 流程配置modal -->
  <process-config-modal @register="registerDesignConfigModal"></process-config-modal>

  <!-- 图标配置 -->
  <process-icon-modal @register="registerIconModal" @success="loadTable"></process-icon-modal>

  <!-- 版本监控 -->
  <process-deployment-modal @register="registerDeploymentModal"></process-deployment-modal>

  <!-- 流程属性配置 -->
  <process-other-config-drawer @register="registerOtherDrawer" @success="loadTable"></process-other-config-drawer>
</template>

<script>
  import {ref, unref, reactive, nextTick} from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { list, publish, deleteOne, copy, uploadProcess } from './process.design.api';
  import { columns, searchFormSchema } from './process.design.data';
  import { initDictOptions } from '/@/utils/dict';
  import { filterDictText } from '/@/utils/dict/JDictSelectUtil';
  import { getToken } from '/@/utils/auth';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRouter } from 'vue-router'
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import ProcessDesignModal from './modal/ProcessDesignModal.vue';
  import ProcessConfigModal from './modal/ProcessConfigModal.vue';
  import ProcessIconModal from './modal/ProcessIconModal.vue';
  import ProcessDeploymentModal from './modal/ProcessDeploymentModal.vue';
  import ProcessOtherConfigDrawer from './modal/ProcessOtherConfigDrawer.vue'

  export default {
    name: 'ProcessDesignList',
    components: {
      BasicTable,
      TableAction,
      ProcessDesignModal,
      ProcessConfigModal,
      ProcessIconModal,
      ProcessDeploymentModal,
      ProcessOtherConfigDrawer
    },
    setup() {
      const { createMessage: $message } = useMessage();

      //update-begin---author:scott ---date:2022-10-21  for：默认流程和简版流程，拆分成两个菜单，方便维护-----------
      //自定义查询条件默认值
      let searchFormSchemaNew = searchFormSchema;
      const isMiniDesgin = ref("default");
      
      //获取路由地址
      let router = useRouter()
      console.log('router.currentRoute.value.path', router.currentRoute.value.path)
      
      if(router.currentRoute.value.path.endsWith("/mini")){
        isMiniDesgin.value = 'mini'
        searchFormSchemaNew = searchFormSchema.map(item => {
          if(item.field == 'processDesginType'){
            item.defaultValue = 'mini';
          }
        })
      }else if(router.currentRoute.value.path.endsWith("/list/desflow")){
        isMiniDesgin.value = 'mini'
        searchFormSchemaNew = searchFormSchema.map(item => {
          if(item.field == 'processDesginType'){
            item.defaultValue = 'mini';
          }
        })
      }else{
        isMiniDesgin.value = 'default'
        searchFormSchemaNew = searchFormSchema.map(item => {
          if(item.field == 'processDesginType'){
            item.defaultValue = 'default';
          }
        })
      }
      //update-end---author:scott ---date::2022-10-21  for：默认流程和简版流程，拆分成两个菜单，方便维护--------------
      
      const { tableContext } = useListPage({
        designScope: 'process-design',
        pagination: true,
        tableProps: {
          title: '流程设计',
          api: list,
          columns: columns,
          actionColumn: {
            width: 300,
            dataIndex: 'action',
            slots: { customRender: 'action' },
          },
          formConfig: {
            schemas: searchFormSchema,
            autoAdvancedCol: 4,
            baseColProps: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8, xxl: 5 },
            actionColOptions: {
              xs: 24,
              sm: 12,
              md: 8,
              lg: 8,
              xl: 8,
              xxl: 4,
            },
          },
        },
      });
      const [registerTable, { getForm , reload }] = tableContext;
      nextTick(() => {
        console.log("getForm() data", getForm().getFieldsValue());
      });
     

      const [registerDesignModal, { openModal: openDesignModal }] = useModal();

      const [registerMiniDesFlowModal, { openModal: openDesignModalMini }] = useModal();

      const [registerDesignConfigModal, { openModal: openDesignConfigModal }] = useModal();

      const [registerIconModal, { openModal: openIconModal }] = useModal();

      const [registerDeploymentModal, { openModal: openDeploymentModal }] = useModal();

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

      /**
       * 打开流程设计表单
       */
      function handleCreate() {
        openDesignModal(true, {
          isUpdate: false,
        });
      }

      /**
       * 打开流程设计表单
       */
      function handleCreateMini() {
        openDesignModalMini(true, {
          isUpdate: false,
        });
      }


      function handleUpdate(record) {
        openDesignModal(true, {
          isUpdate: true,
          id: record.id,
        });
      }

      function handleUpdateTest(record) {
        openDesignModalMini(true, {
          isUpdate: true,
          id: record.id,
        });
      }

      function handleOpenConfigModal(record) {
        openDesignConfigModal(true, record);
      }

      async function handlePublish(record) {
        await publish({ id: record.id });
        reload();
      }

      /**
       * 操作栏
       */
      function getTableAction(record) {
        return [
          {
            label: '设计流程',
            onClick: handleUpdate.bind(null, record),
            ifShow: () => {
              return record.processJson == null || record.processJson == '';
            },
          },
          {
            label: '简流设计',
            onClick: handleUpdateTest.bind(null, record),
            ifShow: () => {
              return isMiniDesgin.value =='mini';
            },
          },
          {
            label: '配置',
            onClick: handleOpenConfigModal.bind(null, record),
            // ifShow: () => {
            //   return record.processJson == null || record.processJson == '';
            // },
          },
          {
            label: '发布',
            popConfirm: {
              title: '是否确认发布该流程?',
              confirm: handlePublish.bind(null, record),
            },
          },
        ];
      }

      /**
       * 下拉操作栏
       */
      function getDropDownAction(record) {
        let arr = [];
        // arr.push( {
        //   label: '设计 · 简',
        //   onClick: handleUpdateTest.bind(null, record),
        //   ifShow: () => {
        //     return record.processJson !== null && record.processJson !== '';
        //   },
        // });
        if (record.processStatus === 1) {
          arr.push({
            label: '版本监控',
            onClick: showDeploymentList.bind(null, record),
          });
        }
        arr.push(
          {
            label: '高级配置',
            onClick: handleOtherConfig.bind(null, record),
          },
          {
            label: '流程复制',
            popConfirm: {
              title: '确定复制该流程吗?',
              confirm: handleCopy.bind(null, record),
            },
          },
          {
            label: '上传流程',
            slot: 'updateProcess',
          },
     /*     {
            label: '表单图标',
            onClick: handleIcon.bind(null, record),
          },*/
        );
        if (record.processStatus === 0) {
          arr.push({
            label: '删除',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
            },
          });
        }
        return arr;
      }

      function handleOtherConfig(record){
        openDrawer(true, record)
      }

      async function handleDelete(record) {
        await deleteOne({ id: record.id });
        reload();
      }

      async function handleCopy(record) {
        await copy({ id: record.id });
        reload();
      }

      function handleIcon(record) {
        openIconModal(true, record);
      }

      function showDeploymentList(record) {
        openDeploymentModal(true, record);
      }

      const processUpload = reactive({
        action: function (id) {
          let url = window._CONFIG['domianURL'] + uploadProcess + '?id=' + id;
          // console.log('----------------', url);
          return url;
        },
        data: { isup: 1 },
        headers: { 'X-Access-Token': getToken() },
        onChange: function (info) {
          if (info.file.status === 'done') {
            if (info.file.response.success) {
              $message.success(`流程上传成功`);
            } else {
              $message.error(`${info.file.name} ${info.file.response.message}.`);
            }
          } else if (info.file.status === 'error') {
            $message.error(`流程上传失败: ${info.file.msg} `);
          }
        },
      });

      function loadTable() {
        reload();
      }

      return {
        registerTable,
        handleCreate,
        handleCreateMini,
        getTableAction,
        getDropDownAction,
        processUpload,
        loadTable,

        //流程设计
        registerDesignModal,
        //测试流程设计
        registerMiniDesFlowModal,

        //流程配置
        registerDesignConfigModal,

        //图标配置
        registerIconModal,

        //版本监控
        registerDeploymentModal,

        registerOtherDrawer,
        isMiniDesgin
      };
    },
  };
</script>

<style lang="less">
  /*QQYUN-3131【流程列表】删除效果，为什么跟复制流程效果不一样*/
  .ant-popconfirm {
    .ant-popover-buttons{
      min-width: 120px;
      text-align: center;
    }
  }
</style>
