<template>
    <div class="page-header">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          
            <el-tab-pane label="随访任务" name="first">
              <div v-if="taskList && taskList.length">
                <div class="itemInfo" v-for="item in taskList" :key="item">
                  <div class="itemText2">
                    <el-tag type="primary" style="margin-right: 8px;">未开始</el-tag>
                    <!-- {{ `${item.name}  ${item.plan && item.plan.name}` }} -->
                    <el-link type="primary" style="font-size: 15px;">{{ item.name }}</el-link>
                    <span style="vertical-align: middle;margin-left: 5px;">{{ ` ${item.plan && item.plan.type} ${item.plan && item.plan.name}` }}</span>
                  </div>
                  <div style="width: 60%; text-align: right; line-height: 32px;">{{ item.createTime.split(' ')[0]}}</div>
              </div>
              </div>
              <el-empty v-else :image-size="50" />
            </el-tab-pane>
            <el-tab-pane label="工单任务" name="second">
              <div v-if="orderList && orderList.length">
                <div class="itemInfo" v-for="item in orderList" :key="item">
                <div class="itemText2">
                  <el-tag type="primary" style="margin-right: 8px;">{{ item.workorderstatename }}</el-tag>
                  {{ item.content }}

                </div>
                <div style="width: 60%; text-align: right; line-height: 32px;">{{ item.createtime.split(' ')[0]}}</div>
              </div>
              </div>
              <el-empty v-else :image-size="50" />
            </el-tab-pane>
        </el-tabs>
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    import { getPageListData } from '@/api/main/system/system';
    import { getTasks } from  '@/api/patient/task'
    const activeName = ref('first')

    function handleClick(e) {
        console.log(e)
    }

    const taskList = ref([])
    const getDeptTasks = () => {
      getTasks({
        pageNum: 1,
        pageSize: 4,
        state: 0,
        display: 1,
      }).then((res) => {
        if (res.data) {
          taskList.value = res.data;
        }
      });
    }

    const orderList = ref([])

    const getOrders = () => {
      getPageListData('/order/workorder', {
        pageNum: 1,
        pageSize: 4,
        listType: 6,
      }).then((res) => {
        if (res.data) {
          orderList.value = res.data;
        }
      })
    }



    onMounted(() => { 
      getDeptTasks()
      getOrders()
    })


  </script>
  
  <style scoped lang="scss">
    .page-header{width: 100%;}
    .itemInfo{
          margin-bottom: 15px;
          display: flex;
          .itemText2{
              width: 100%;
              line-height: 32px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
          }
      }
  </style>