<template>
  <Module
    class="flex-grow"
    style="height: 30%"
    :loading="loading"
    :error="error"
  >
    <!-- :info="bsMeta && bsMeta['emplRate']" -->
    <template #title>日常巡检(个)</template>
    <template #end>
      {{ moment(date).format('yyyy') }}
      <Switcher :options="options" v-model="latest" />
    </template>
    <template v-if="!loading">
      <Ect :options="ectOpts" v-if="dataList?.length > 0" />
      <Empty v-else />
    </template>
  </Module>
</template>
<script>
import { dailyInspectCount } from '@/api/curingBusiness';
import { mapState } from 'vuex';
import moment from 'moment';

export default {
  computed: {
    ...mapState({
      date: state => state.appDate,
      selectRoadId: state => state.road.selectRoadId,
      value: state => state.road.selectLevel,
    }),
    ectOpts() {
      return {
        dataset: {
          dimensions: ['orgName', 'nightFinishedCount', 'dayFinishedCount'],
          source: this.dataList
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          left: 'right',
          data: ['日巡检', '夜巡检'],
          textStyle: {
            fontSize: 13, //字体大小
            color: '#CBE7FF' //字体颜色
          }
        },
        color: ['#08a4fa', '#FFB400'],
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#778FA4'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#CBE7FF',
              fontSize: 12,
              fontWeight: 'bold'
            },
            min: 0,
            // max: 250,
            position: 'left',
            axisLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#778FA4'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '夜巡检',
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#00CCFF'
                      },
                      {
                        offset: 0.6,
                        color: '#00CCFF'
                      },
                      {
                        offset: 1,
                        color: '#005DF8'
                      }
                    ]
                  };
                },
                barBorderRadius: [10, 10, 0, 0]
              }
            },
            type: 'bar',
            barMaxWidth: '9'
          },
          {
            name: '日巡检',
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FFD391'
                      },
                      {
                        offset: 0.6,
                        color: '#FFD391'
                      },
                      {
                        offset: 1,
                        color: '#FF9A01'
                      }
                    ]
                  };
                },
                barBorderRadius: [10, 10, 0, 0]
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            type: 'bar',
            barMaxWidth: '9'
          }
        ]
      };
    }
  },
  data() {
    return {
      dataList: [],
      error: '',
      loading: false,
      options: [
        { name: '年', value: 0 },
        { name: '月', value: 1 }
      ],
      latest: 0
    };
  },
  watch: {
    date() {
      this.getData();
    },
    latest() {
      this.getData();
    },
    selectRoadId() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    moment,
    async getData() {
      // 日常巡检数据
      this.loading = true;
      try {
        let res = await dailyInspectCount({
          orgLevel: this.value,
          filterOrgVal: this.value === '3'? this.selectRoadId[2] : this.selectRoadId[1],
          timeLevel: this.latest,
          timeVal:
            this.latest == 0
              ? moment(this.date).format('yyyy')
              : moment(this.date).format('yyyyMM')
        });
        this.dataList = res?.msgContent;
      } catch (err) {
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>
