<template>
  <!-- 工单 -->
  <view class="nav-bar">
    <view
      class="item"
      v-for="[key, item] in Object.entries(dataList)"
      :key="key"
    >
      <view class="img-warp">
        <image class="img" :src="item.img" mode="widthFix"></image>
      </view>
      <view class="text">
        {{ item.name }}({{ item.num }}/{{ item.totalSum }})
      </view>
    </view>
  </view>
</template>

<script>
import img_wx from './u129.png'
import img_xdj from './u132.svg'
import img_by from './u133.svg'
import { get } from '@/utils/api.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      dataList: {
        维修: {
          name: '维修工单',
          num: '',
          totalSum: '',
          path: '',
          img: img_wx
        },
        巡点检: {
          name: '巡点检工单',
          num: '',
          totalSum: '',
          path: '',
          img: img_xdj
        },
        保养: {
          name: '保养工单',
          num: '',
          totalSum: '',
          path: '',
          img: img_by
        }
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      let param = {
        startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
        endTime: dayjs().format('YYYY-MM-DD')
      }
      get(
        this.apiUrl + '/home/page/operation/workOrderCountByTime',
        param
      ).then(res => {
        if (res.success) {
          for (let item of res.data) {
            let el = this.dataList[item.bizTypeDesc]
            el.num = item.notFinishSum
            el.totalSum = item.totalSum
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.nav-bar {
  background-color: #fff;
  display: flex;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;

    .img-warp {
      width: 74rpx;
      height: 74rpx;
      border-radius: 50%;
      background-color: #319547;
      display: flex;
      align-items: center;
      justify-content: center;

      .img {
        width: 40rpx;
      }
    }

    .text {
      color: #7f7f7f;
      font-size: 28rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
