<script setup lang="ts">
import ContainerBox from "@/components/ContainerBox";
import { getTodayDuty } from '@/api/home'
import { ref } from 'vue' 
// 模块名
const moduleTitle = "值班动态";

const DUTY_TYPE = {
  ZUO_ZHAN_ZHU_LI_ZB:'作战（安全）助理正班', 
  BAO_ZHANG_ZHU_LI_ZB:'保障助理正班', 
  TONG_XIN_QIN_WU_DD:'通信勤务大队', 
  XUAN_CHUAN_ZHU_LI_ZB:'宣传助理正班', 
  XING_ZHENG_ZHI_BAN_ZHANG_ZB:'行政值班长正班', 
  XING_ZHENG_ZHI_BAN_YUAN_ZB:'行政值班员正班', 
  ZHI_BAN_LING_DAO_ZB:'值班领导正班', 
  HUO_DIAO_ZHU_LI_ZB:'火调助理正班', 
  TONG_XIN_ZHU_LI_ZB:'通信助理正班', 
  ZHI_HUI_ZHANG_ZB:'指挥长正班', 
  FANG_HUO_ZHULI_ZB:'防火助理正班', 
  ZHENG_GONG_ZHU_LI_ZB:'政工助理正班', 
  DIAO_DU_ZHU_LI_ZB:'调度助理正班', 
  DAI_BAN_ZHU_GUAN:'带班主官',
  BAO_ZHNAG_ZHU_LI_ZB:'保障助理正班',
  }

/**
 * 默认值班信息
 */
const defaultDutyData = {
  [DUTY_TYPE.DAI_BAN_ZHU_GUAN]: '---',
  [DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB]: '---',
  [DUTY_TYPE.DIAO_DU_ZHU_LI_ZB]: '---',
  [DUTY_TYPE.ZUO_ZHAN_ZHU_LI_ZB]: '---',
  [DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB]: '---',
  [DUTY_TYPE.HUO_DIAO_ZHU_LI_ZB]: '---',
  [DUTY_TYPE.BAO_ZHANG_ZHU_LI_ZB]: '---',
  [DUTY_TYPE.ZHI_BAN_LING_DAO_ZB]: '---',
  [DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB]: '---',
  [DUTY_TYPE.ZHI_HUI_ZHANG_ZB]: '---',
  [DUTY_TYPE.TONG_XIN_ZHU_LI_ZB]: '---',
  [DUTY_TYPE.FANG_HUO_ZHULI_ZB]: '---',
  [DUTY_TYPE.XUAN_CHUAN_ZHU_LI_ZB]: '---',
  [DUTY_TYPE.TONG_XIN_QIN_WU_DD]: '---',
  [DUTY_TYPE.XING_ZHENG_ZHI_BAN_YUAN_ZB]: '---'
}

const dutyDataInfo = ref(defaultDutyData)

function loadData() {
  getTodayDuty().then(res => copeResponse(res.data, data => {
    if(data.length > 0){
      const temp = {} as (typeof defaultDutyData)
      Object.values(DUTY_TYPE).forEach(item => {
        const duty = data.filter(duty => duty.zblx === item)
        if(duty && duty.length > 0){
          temp[item] = duty.map(item => item.yhxm).join(' ')
        } else {
          temp[item] = '---'
        }
      })
      dutyDataInfo.value = temp
   }
  }))
}

function showShortName(key: keyof typeof DUTY_TYPE) {
   const tempNames = dutyDataInfo.value[key].split(' ')
   if (tempNames.length > 2) {
     return tempNames[0] + ' ' + tempNames[1] + ' ...'
   } else {
     return dutyDataInfo.value[key]
   }
}

loadData()

</script>

<template>
  <container-box :title="moduleTitle" style="width: 23.2vw; height: 25.8vh">
    <ul>
      <li>
        <div class="key">
          带班主管：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.DAI_BAN_ZHU_GUAN]">{{showShortName(DUTY_TYPE.DAI_BAN_ZHU_GUAN)}}</span>
        </div>
        <div class="key duty">
          行政值班长：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB]">{{showShortName(DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB)}}</span>
        </div>
        <div class="key">
          调度助理：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.DIAO_DU_ZHU_LI_ZB]">{{showShortName(DUTY_TYPE.DIAO_DU_ZHU_LI_ZB)}}</span>
        </div>
        <div class="key">
          作战助理：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.ZUO_ZHAN_ZHU_LI_ZB]">{{showShortName(DUTY_TYPE.ZUO_ZHAN_ZHU_LI_ZB)}}</span>
        </div>
        <div class="key">
          行政助理：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB]">{{showShortName(DUTY_TYPE.XING_ZHENG_ZHI_BAN_ZHANG_ZB)}}</span>
        </div>
        <div class="key">
          火调助理：
          <span class="value"  :title="dutyDataInfo[DUTY_TYPE.HUO_DIAO_ZHU_LI_ZB]">{{showShortName(DUTY_TYPE.HUO_DIAO_ZHU_LI_ZB)}}</span>
        </div>
        <div class="key">
          战保助理：
          <span class="value"  :title="dutyDataInfo[DUTY_TYPE.BAO_ZHANG_ZHU_LI_ZB]">{{showShortName(DUTY_TYPE.BAO_ZHANG_ZHU_LI_ZB)}}</span>
        </div>
      </li>
      <li>
        <div class="key">
          值班领导：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.ZHI_BAN_LING_DAO_ZB]">{{showShortName(DUTY_TYPE.ZHI_BAN_LING_DAO_ZB)}}</span>
        </div>
        <div class="key duty">
          行政值班员：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.XING_ZHENG_ZHI_BAN_YUAN_ZB]">{{showShortName(DUTY_TYPE.XING_ZHENG_ZHI_BAN_YUAN_ZB)}}</span>
        </div>
        <div class="key command">
          指挥长：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.ZHI_HUI_ZHANG_ZB]">{{showShortName(DUTY_TYPE.ZHI_HUI_ZHANG_ZB)}}</span>
        </div>
        <div class="key">
          通信助理：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.TONG_XIN_ZHU_LI_ZB]">{{showShortName(DUTY_TYPE.TONG_XIN_ZHU_LI_ZB)}}</span>
        </div>
        <div class="key">
          防火助理：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.FANG_HUO_ZHULI_ZB]">{{showShortName(DUTY_TYPE.FANG_HUO_ZHULI_ZB)}}</span>
        </div>
        <div class="key">
          宣传助理：
          <span class="value"  :title="dutyDataInfo[DUTY_TYPE.XUAN_CHUAN_ZHU_LI_ZB]">{{showShortName(DUTY_TYPE.XUAN_CHUAN_ZHU_LI_ZB)}}</span>
        </div>
        <div class="key brigade">
          通信勤务大队：
          <span class="value" :title="dutyDataInfo[DUTY_TYPE.TONG_XIN_QIN_WU_DD]">{{showShortName(DUTY_TYPE.TONG_XIN_QIN_WU_DD)}}</span>
        </div>
      </li>
    </ul>
  </container-box>
</template>

<style scoped lang="less">
ul {
  display: flex;
  justify-content: space-around;
}

.key {
  color: #aeeeff;
  text-align: left;
}
.duty {
  margin-left: -12px;
}
.brigade {
  margin-left: -24px;
}
.command {
  margin-left: 12px;
}
.value {
  color: #ffe293;
  text-align: center;
}
li {
  list-style: none;
  line-height: 2.5vh;
}
</style>
