<template>
  <div class="max-big-box">
    <div class="top-box">
      <div class="input-box">
        <div class="dropdown-box" v-for="(item,index) in downList" :key="index">
          <p class="dropdown-left-title">{{item.name}}：</p>
          <div class="dropdown-right-box cursor_pointer"
               @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
            <p class="dropdown-text">{{downList[index].downText}}</p>
            <div class="dropdown-for-max" v-if="downList[index].downType">
              <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                 :class="{'color-A':downList[index].mouseColor == item}"
                 @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                 @click="dropdownClick(index,item)">{{item}}</p>
            </div>
          </div>
        </div>
        <div class="button-box cursor_pointer" @click="clickQuery">
          <img src="~@/assets/images/icon_27.png">
          <p class="cursor_pointer">查询</p>
        </div>
      </div>
    </div>
    <div id="eCharts-box">

    </div>
  </div>
</template>

<script>
  import { medicalCorpsListData,materialsManagementAnalysis } from '@/api/userApi'
  export default {
    name: "statistics",//统计信息
    data () {
      return {
        //下拉框
        downList:[
          {
            name:"请选择医疗队所",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
        ],
        eChartsTitle:"",
        eChartsCurrentData:[],
        eChartsStandardData:[],
      }
    },

    created(){

    },
    mounted() {
      this.medicalCorpsListData();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      //数据列表
      async getListData (){
        let self = this;
        let obj={
          medicalTreatmentId:"",
        };
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.medicalTreatmentId = self.downList[0].idType[i];
            self.eChartsTitle = self.downList[0].list[i];
          }
        }
        const { data } = await materialsManagementAnalysis(obj);
        if(data.code==200){
          this.eChartsCurrentData.push(data.data.currentCarNumberSum);
          this.eChartsStandardData.push(data.data.carNumSum);
          this.eChartsCurrentData.push(data.data.currentEquipNumberSum);
          this.eChartsStandardData.push(data.data.equipmentNumSum);
          this.eChartsCurrentData.push(data.data.currentMaterialNumberSum);
          this.eChartsStandardData.push(data.data.materialNumSum);
          this.$forceUpdate();
          this.eChartsOne();
        }
      },
      //医疗队所
      async medicalCorpsListData () {
        let self = this;
        const { data } = await medicalCorpsListData();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].medical_corps);
            idType.push(data.data[i].id);
          }
          self.downList[0].list = list;
          self.downList[0].idType = idType;
          self.getListData();
        }
      },
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-box'));
        let option = {
          title: {
            text: self.eChartsTitle,
            left: '8%',
            top: '8%',
            textStyle: {
              fontSize: 16,
              color: '#fff'
            },
          },
          grid: {
            top: '24%',
            right: '8%',
            left: '10%',
            bottom: '8%'
          },
          color: ['#91cb76', '#fac859'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function(params) {
              let title = params[0].name.substring(0, params[0].name.length - 3);
              //获取单位
              let dw = params[0].name.substr(-2, 1)
              // 获取第一个名称
              let text1 = params[0].seriesName + params[0].name.substring(0, params[0].name.length - 2);
              let newText1 = text1.substring(0, text1.length - 3);
              // 获取第二个名称
              let text2 = params[1].seriesName + params[1].name.substring(0, params[1].name.length - 2);
              let newText2 = text2.substring(0, text2.length - 3);
              // 计算百分比
              let num = params[1].value - params[0].value;
              let newNumber = params[1].value - params[0].value;
              let fenb = (newNumber / params[1].value) * 100;
              let newnum = 100 - fenb;
              newnum = newnum.toFixed(2)
              let color = params.color;
              let htmlStr = '<div>';
              htmlStr += title + '<br/>';
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
              htmlStr += newText1 + '数量：' + params[0].value + dw;
              htmlStr += '<br/>';
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
              htmlStr += newText2 + '数量：' + params[1].value + dw;
              htmlStr += '<br/>';
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
              htmlStr += '储备水平：' + newnum + '%';
              htmlStr += '<br/>';
              htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
              htmlStr += '待补充数量：' + num + dw;
              return htmlStr;
            }
          },
          xAxis: [{
            type: 'category',
            data: ['车辆信息(辆)', '器材信息(个)', '耗材信息(个)'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              margin: 10,
              color: '#fff',
              textStyle: {
                fontSize: 14
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            },
          }],
          yAxis: [{
            name: '数量',
            type: 'value',
            axisLabel: {
              margin: 10,
              color: '#fff',
              textStyle: {
                fontSize: 14
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            }
          }],
          series: [{
            name: '当前',
            type: 'bar',
            data: self.eChartsCurrentData
          },
            {
              name: '标准',
              type: 'bar',
              data: self.eChartsStandardData
            }
          ]
        };
        myChart.setOption(option);
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //搜索与操作按钮
    .top-box
      height:30px;
      display flex
      margin:20px 0;
      .input-box
        width:1370px;
        display flex
        margin-left:105px;
        .dropdown-box
          display flex
          color:$color_ff;
          z-index:1;
          margin-left:30px;
          .dropdown-left-title
            line-height:30px;
            font-size:$font_14;
          .dropdown-right-box
            font-size:$font_12;
            .dropdown-text
              width:160px;
              height:30px;
              line-height:30px;
              background:url("~@/assets/images/button_15.png");
              background-size:100% 100%;
            .dropdown-for-max
              background:$backColor1;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
              p
                width:160px;
                height:30px;
                line-height:30px;
              .color-A
                /*
                background:$backColor2 !important;
                color:$color_ff !important;
                */
                color:$theme !important;
                border-bottom-right-radius 4px
                border-bottom-left-radius 4px
        .button-box
          margin-left:32px;
          display flex
          height:30px;
          width:80px;
          background:url("~@/assets/images/button_03.png");
          background-size:100% 100%;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 6px 0 13px;
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
    #eCharts-box
      height:448px;
      width:699px;
      background:url("~@/assets/images/min_back_07.png");
      background-size:100% 100%;
      margin-left:105px;
</style>
