<template>
  <div class="guns-layout">
    <div class="guns-layout">
      <div class="guns-layout" v-if="!showDraft">
        <div class="guns-layout-sidebar isSelected p-t-12">
          <div class="sidebar-content">
            <a-menu
              v-model:selectedKeys="selectedKeys"
              @openChange="openChange"
              class="sidebar-menu"
              mode="inline"
              :open-keys="openKeys"
              @select="selectChange"
            >
              <a-sub-menu key="sub1" style="border-top: 0px !important">
                <template #title></template>
                <a-menu-item :key="0">
                  <span class="flex">
                    <icon-font icon-class="icon-faqiliucheng" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font>
                    发起流程</span
                  ></a-menu-item
                >
              </a-sub-menu>
              <a-sub-menu key="sub2">
                <template #title> 待处理 </template>
                <a-menu-item :key="10">
                  <span class="flex">
                    <icon-font icon-class="icon-daibanrenwu" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font>
                    待办任务</span
                  >
                  <span v-if="numberData.toDoTaskNumber">
                    <a-badge
                      :count="numberData.toDoTaskNumber"
                      style="margin-top: -1px"
                      :numberStyle="{ height: '18px', lineHeight: '18px', minWidth: '18px' }" /></span
                ></a-menu-item>
                <a-menu-item :key="20">
                  <span class="flex"
                    ><icon-font icon-class="icon-daiyuerenwu" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font
                    >待阅任务</span
                  >
                  <span v-if="numberData.toReadTaskNumber">
                    <a-badge
                      :count="numberData.toReadTaskNumber"
                      style="margin-top: -1px"
                      :numberStyle="{ height: '18px', lineHeight: '18px', minWidth: '18px' }" /></span
                ></a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub3">
                <template #title> 我的事项 </template>
                <a-menu-item :key="50">
                  <span class="flex">
                    <icon-font icon-class="icon-wofaqide" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font>
                    我发起的</span
                  ></a-menu-item
                >
                <a-menu-item :key="30">
                  <span class="flex"
                    ><icon-font icon-class="icon-yibanshixiang" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font
                    >已办事项</span
                  ></a-menu-item
                >
                <a-menu-item :key="40"
                  ><span class="flex"
                    ><icon-font icon-class="icon-yiyueshixiang" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font
                    >已阅事项</span
                  ></a-menu-item
                >
                <a-menu-item :key="60"
                  ><span class="flex"
                    ><icon-font icon-class="icon-wodecaogao" fontSize="24px" color="#43505E" :style="{ paddingRight: '8px' }"></icon-font
                    >我的草稿</span
                  ></a-menu-item
                >
              </a-sub-menu>
            </a-menu>
          </div>
        </div>
        <!-- 模型列表 -->
        <WorkflowModelList readable ref="WorkflowModelListRef" v-show="selectMenu == 0" />
        <!-- 任务列表 -->
        <WorkflowTaskTable
          v-if="selectMenu != 0"
          :selectMenu="selectMenu"
          @draft="draft"
          @changeNumber="getNumberData"
          :taskId="taskId"
          :instanceId="instanceId"
        />
      </div>
      <!-- 草稿发起 -->
      <WorkflowTaskStart v-if="showDraft" :definitionId="definitionId" :draftId="draftId" draft @closeDraft="showDraft = false" />
    </div>
  </div>
</template>

<script setup name="MidWorkFlowTaskList">
import { onMounted, ref, watch } from 'vue';
import WorkflowModelList from '../../model/components/model-list.vue';
import { FlowTaskApi } from './api/FlowTaskApi';
import WorkflowTaskTable from './components/task-table.vue';
import WorkflowTaskStart from '../start/index.vue';
import { useRoute } from 'vue-router';

defineOptions({
  name: 'MidWorkFlowTaskList'
});

const route = useRoute();
// ref
const WorkflowModelListRef = ref();

// 展开列表
const openKeys = ref(['sub1', 'sub2', 'sub3']);
// 选中列表
const selectedKeys = ref([0]);

// 当前选中菜单
const selectMenu = ref(0);
// 任务数量
const numberData = ref({
  toDoTaskNumber: 0,
  toReadTaskNumber: 0
});

// 是否显示发起
const showDraft = ref(false);

// 流程定义id
const definitionId = ref('');

// 草稿id
const draftId = ref('');

// 任务id
const taskId = ref('');
//
const instanceId = ref('');

onMounted(() => {
  if (route.query?.taskId) {
    taskId.value = route.query.taskId;
    instanceId.value = route.query.instanceId;
    getNumberData();
    selectedKeys.value = [10];
    selectMenu.value = 10;
  } else {
    getNumberData();
  }
});

watch(
  () => route.query,
  val => {
    if (val?.taskId) {
      taskId.value = route.query.taskId;
      instanceId.value = route.query.instanceId;
      getNumberData();
      selectedKeys.value = [10];
      selectMenu.value = 10;
    }
  },
  { deep: true }
);

// 获取任务数量
const getNumberData = async () => {
  numberData.value = await FlowTaskApi.getUserWaitToTaskNum();
};

// 左侧菜单选中
const selectChange = ({ key }) => {
  selectMenu.value = key;
  taskId.value = '';
  instanceId.value = '';
  if (key == 0) {
    getNumberData();
  }
};
// 展开事件
const openChange = () => {
  openKeys.value = ['sub1', 'sub2', 'sub3'];
};

// 草稿点击
const draft = item => {
  draftId.value = item.id;
  definitionId.value = item.definitionId;
  showDraft.value = true;
};
</script>

<style scoped lang="less">
.sidebar-content {
  :deep(.ant-menu-submenu:first-child .ant-menu-submenu-title) {
    display: none !important;
  }
}
</style>
