<template>
      <div style="background-color:#ececec; padding: 10px;height:100%;">
          <a-row :gutter="[10,10]">
              <a-col :span="24">
                  <div style="margin:3px 0;height:calc(90vh - 110px)">
                      <a-card
                          style="width: 100%;height:calc(90vh - 110px)"
                          :tab-list="tabTitle"
                          :active-tab-key="activeKey"
                          @tabChange="key => onTabChange(key)"
                      >
                          <FlowStart v-show="activeKey==1" ref="refStart"></FlowStart>  
                          <FlowTodolist  v-show="activeKey==2" ref="refTodolist"></FlowTodolist>
                          <FlowCCList v-show="activeKey==3" ref="refStart"></FlowCCList>  
                          <FlowRunning  v-show="activeKey==4" ref="refRunning"></FlowRunning>
                          <FlowDraft v-show="activeKey ==5" ref="refDraft"></FlowDraft>
                      </a-card>
                  </div>
              </a-col>
          </a-row>
      </div>
</template>


<script lang="ts" setup>
  import {ref} from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import FlowDraft from './components/FlowDraft.vue';
  import FlowRunning from './components/FlowRunning.vue';
  import FlowTodolist from './components/FlowTodolist.vue';
  import FlowStart from './components/FlowStart.vue';
  import FlowCCList from './components/FlowCCList.vue';


  const queryByIdUrl = '/workflow/ccList';
  const refDraft = ref()
  const activeKey = ref(1);

  const onTabChange = (value: number) => {
    activeKey.value = value 
  };


  const tabTitle = [
    {
      tab: '发起',key: 1
    },{
      tab: '待办',key: 2
    },{
      tab: '抄送', key: 3
    }, {
      tab: '在途', key: 4,
    }, {
      tab: '草稿', key: 5,
    },
  ];

  async function getDraftList() {
    const retData = await defHttp.get({ url: queryByIdUrl});
    console.log(retData)
  }

  getDraftList()

</script>
