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

const defaultDutyData = {
  ['带班主管']: '---',
  ['行政值班长']: '---',
  ['调度助理']: '---',
  ['作战助理']: '---',
  ['行政助理']: '---',
  ['火调助理']: '---',
  ['战保助理']: '---',
  ['值班领导']: '---',
  ['行政值班员']: '---',
  ['指挥长']: '---',
  ['通信助理']: '---',
  ['防火助理']: '---',
  ['宣传助理']: '---',
  ['通信勤务大队']: '---'
}

const dutyDataInfo = ref(defaultDutyData)

function loadData() {
  getTodayDuty().then(res => copeResponse(res.data, data => {
    console.log(data)
    const temp = {} as (typeof defaultDutyData)
    data.forEach(item => {
      temp[item.zblx] = item.yhxm
    })
    dutyDataInfo.value = temp
  }))
}

loadData()

</script>

<template>
  <container-box :title="moduleTitle" style="width: 23.2vw; height: 25.8vh">
    <ul>
      <li>
        <div class="key">
          带班主管：
          <span class="value">{{dutyDataInfo['带班主管']}}</span>
        </div>
        <div class="key duty">
          行政值班长：
          <span class="value">{{dutyDataInfo['行政值班长']}}</span>
        </div>
        <div class="key">
          调度助理：
          <span class="value">{{dutyDataInfo['调度助理']}}</span>
        </div>
        <div class="key">
          作战助理：
          <span class="value">{{dutyDataInfo['作战助理']}}</span>
        </div>
        <div class="key">
          行政助理：
          <span class="value">{{dutyDataInfo['行政助理']}}</span>
        </div>
        <div class="key">
          火调助理：
          <span class="value">{{dutyDataInfo['火调助理']}}</span>
        </div>
        <div class="key">
          战保助理：
          <span class="value">{{dutyDataInfo['战保助理']}}</span>
        </div>
      </li>
      <li>
        <div class="key">
          值班领导：
          <span class="value">{{dutyDataInfo['值班领导']}}</span>
        </div>
        <div class="key duty">
          行政值班员：
          <span class="value">{{dutyDataInfo['行政值班员']}}</span>
        </div>
        <div class="key command">
          指挥长：
          <span class="value">{{dutyDataInfo['指挥长']}}</span>
        </div>
        <div class="key">
          通信助理：
          <span class="value">{{dutyDataInfo['通信助理']}}</span>
        </div>
        <div class="key">
          防火助理：
          <span class="value">{{dutyDataInfo['防火助理']}}</span>
        </div>
        <div class="key">
          宣传助理：
          <span class="value">{{dutyDataInfo['宣传助理']}}</span>
        </div>
        <div class="key brigade">
          通信勤务大队：
          <span class="value">{{dutyDataInfo['通信勤务大队']}}</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>
