<template>
  <div class="lun-main">
    <div style="padding: 10px 10px">
      <span style="color: #000; font-size: 18px">用车次数</span>
      <div style="margin-top: 60px; width: 100px; text-align: center">
        <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">{{ totalVehicle }}</div>
        <div style="color: #000; font-size: 14px">总体用车次数</div>
      </div>
      <div style="margin-top: 20px; width: 100px; text-align: center">
        <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">{{ deptVehicle }}</div>
        <div style="color: #000; font-size: 14px">本机构用车次数</div>
      </div>
    </div>
    <div style="padding: 10px 10px 10px 0">
      <div style="display: flex">
        <a-radio-group name="radioGroup" :default-value="1" @change="changaTime">
          <a-radio :value="1"> 日 </a-radio>
          <a-radio :value="2"> 周 </a-radio>
          <a-radio :value="3"> 月 </a-radio>
          <a-radio :value="4"> 年 </a-radio>
          <a-radio :value="5"> 自定义 </a-radio>
        </a-radio-group>
        <div>
          <a-range-picker
            @change="changaPicker"
            :disabled="disabled"
            v-model="daterangeCreateTime"
            valueFormat="YYYY-MM-DD"
            format="YYYY-MM-DD"
            allow-clear
          />
        </div>
      </div>
      <a-spin :spinning="spinning" size="large">
        <div ref="chart" class="item" style="width: 440px; height: 260px" />
      </a-spin>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { getUseCarStatistics } from '@/api/iot'
export default {
  props: { OfDeptId: String },
  data() {
    return {
      daterangeCreateTime: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
      dateFormat: 'YYYY-MM-DD',
      startDate: moment().week(moment().week()).startOf('week').format('YYYY-MM-DD'),
      endDate: moment().week(moment().week()).endOf('week').format('YYYY-MM-DD'),
      moment: moment,
      disabled: true,
      deptId: '',
      list: [],
      spinning: false,
      totalVehicle: 0, //总体
      deptVehicle: 0,
    }
  },
  watch: {
    OfDeptId: {
      handler(val) {
        if (val.indexOf('dept' > 0)) {
          this.deptId = val.substring(5)
        }else{
          this.deptId ='100'
        }
        console.log(this.deptId);
        this.funOfCarNum()
      },
      immediate:true,
      deep: true,
    },
  },
  // created() {
  //   this.funOfCarNum()
  // },
  mounted() {
    // 获取dom容器
    this.funOfCarNum()
    if (this.list.length > 0) {
      const chartDom = this.$refs.chart
      // 初始化图表实例
      this.chart = echarts.init(chartDom)
    }
  },
  methods: {
    changaTime(val) {
      if (val.target.value == 1) {
        this.daterangeCreateTime = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
        this.startDate = moment().format('YYYY-MM-DD')
        this.endDate = moment().format('YYYY-MM-DD')
        this.funOfCarNum()
      } else if (val.target.value == 2) {
        this.daterangeCreateTime = [
          moment().week(moment().week()).startOf('week').format('YYYY-MM-DD 00:00:00'),
          moment().week(moment().week()).endOf('week').format('YYYY-MM-DD 23:59:59'),
        ]
        this.funOfCarNum()
        this.startDate = moment().week(moment().week()).startOf('week').format('YYYY-MM-DD')
        this.endDate = moment().week(moment().week()).endOf('week').format('YYYY-MM-DD')
      } else if (val.target.value == 3) {
        this.daterangeCreateTime = [
          moment().month(moment().month()).startOf('month').format('YYYY-MM-DD 00:00:00'),
          moment().month(moment().month()).endOf('month').format('YYYY-MM-DD 23:59:59'),
        ]
        this.startDate = moment().month(moment().month()).startOf('month').format('YYYY-MM-DD')
        this.endDate = moment().month(moment().month()).endOf('month').format('YYYY-MM-DD')
        this.funOfCarNum()
      } else if (val.target.value == 4) {
        this.daterangeCreateTime = [
          moment().year(moment().year()).startOf('year').format('YYYY-MM-DD 00:00:00'),
          moment().year(moment().year()).endOf('year').format('YYYY-MM-DD 23:59:59'),
        ]
        ;(this.startDate = moment().year(moment().year()).startOf('year').format('YYYY-MM-DD')),
          (this.endDate = moment().year(moment().year()).endOf('year').format('YYYY-MM-DD'))
        this.funOfCarNum()
      } else if (val.target.value == 5) {
        this.daterangeCreateTime = []
        this.disabled = false
      }
    },
    changaPicker(ev) {
      let startTime=`${ev[0]} 00:00:00`
      let endTime=`${ev[1]} 23:59:59`
      this.daterangeCreateTime = [startTime,endTime]
      this.funOfCarNum()
    },
    initChart(datas) {
      const data = datas.map((item) => {
        return item.value
      })
      // const sideData = datas.map((item) => {
      //   return item.value
      // })
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: datas.map((v) => {
            return v.deptName
          }),
          //坐标轴
          axisLine: {
            lineStyle: {
              color: '#3eb2e8',
            },
          },
          //坐标值标注
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 0,
            textStyle: {
              color: '#3eb2e8',
              fontSize: 12,
            },
          },
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
        },
        series: [
          {
            name: 'a',
            tooltip: {
              show: true,
            },
            type: 'bar',
            barWidth: 18.5,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#0B4EC3', // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#138CEB', // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#17AAFE', // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: data,
            barGap: 0,
          },
        ],
      }
      this.chart.setOption(option)
    },
    funOfCarNum() {
      this.spinning = true
      const params = {
        deptId: this.deptId || '100',
        startTime: this.daterangeCreateTime[0],
        endTime: this.daterangeCreateTime[1],
      }
      getUseCarStatistics(params)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.data.data
            ;(this.totalVehicle = res.data.totalUseCount), //总体
              (this.deptVehicle = res.data.selfDeptUseCount)
            this.$nextTick(() => {
              // 获取dom容器
              const chartDom = this.$refs.chart
              // 初始化图表实例
              this.chart = echarts.init(chartDom)
              this.initChart(this.list)
            })
            // this.initChart(this.list)
            this.spinning = false
          }
        })
        .catch((error) => {
          this.spinning = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.lun-main {
  width: 500px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  //   background-color: aqua;
  border-left: 1px solid #ccc;
  pointer-events: all;
  padding-right: 10px;
}
</style>
