<template>
  <div class="statis">
    <!-- 车辆统计 -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 15px">
      <div class="null-car" v-for="(item, index) in list" :key="index">
        <div style="color: #00c6ed; font-size: 30px">{{ item.value }}</div>
        <div>
          {{ item.title }}
          <span
            style="font-size: 10px"
          >(
            <span style="color: rgb(243, 83, 83)">{{ item.percent }}</span>
            )</span
          >
        </div>
      </div>
    </div>
    <!-- 饼图 -->
    <div class="zz-echs">
      <carCharts :list="listCar" />
    </div>

    <!-- 柱状图 -->
    <div class="zz-echs">
      <zzEchats ref="rCharts" :dataList="dataList" v-if="dataList.length > 0" />
      <img v-else src="../../../assets/images/zwzy.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getCarStatisticsCategory, getCarByDept } from '@/api/iot.js'
import carCharts from './carCharts.vue'
import zzEchats from './zzEchats.vue'
export default {
  components: { carCharts, zzEchats },
  data() {
    return {
      list: [],
      carList: ['灭火消防车', '举高消防车', '专勤消防车', '战勤保障消防车', '国产车辆', '进口车辆'],
      listCar: [],
      dataList: [],
      deptId: null,
    }
  },
  props: {
    deptIds: Object,
  },
  watch: {
    deptIds: {
      handler(val) {
        // console.log('---------编号', val)
        if (val.key.indexOf('dept') >= 0) {
          this.deptId = val.meta.deptId
          this.funStatis()
          this.funZz()
        }
        // this.vehicleId = val
        // this.FunVdieoList()
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    funStatis() {
      const params = {
        deptId: this.deptId,
      }
      getCarStatisticsCategory(params).then((res) => {
        this.listCar = res.data
        const arr = res.data.sort((a, b) => {
          return this.carList.indexOf(a.title) - this.carList.indexOf(b.title)
        })
        this.list = arr
      })
    },
    funZz() {
      const params = {
        deptId: this.deptId,
      }
      getCarByDept(params).then((res) => {
        this.dataList = res.data || []
      })
    },
  },
  created() {
    this.funStatis()
    this.funZz()
  },
}
</script>

<style lang="less" scoped>
.statis {
  width: 350px;
  height: 700px;
  background: #fff;
  pointer-events: all;
  // margin-top: 15px;

  .null-car {
    width: 152px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: PingFang SC;
  }
}
.zz-echs {
  width: 100%;
  border-top: 1px solid #ccc;
  img {
    display: inline-block;
    width: 130px;
    height: 140px;
    margin: 10px 0 0 100px;
  }
  //  margin-bottom: 10px;
}
</style>
