<!-- 信息记录 -->
<template>
  <div class="app-container InformationRecord">
    <div class="max-top-box">
      <p class="title-p">出库信息统计</p>
      <el-select class="top-select" @change="topSelectChange"
                 v-model="topValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.gasName"
          :value="item.id">
        </el-option>
      </el-select>
      <div id="top-eCharts-box"></div>
    </div>
    <div class="max-bottom-box">
      <div class="big-left-box">
        <p class="title-p">用气数统计</p>
        <el-select class="left-select" @change="leftSelectChange"
                   v-model="leftValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gasName"
            :value="item.id">
          </el-option>
        </el-select>
        <div id="left-eCharts-box"></div>
      </div>
      <div class="big-right-box">
        <p class="title-p">用气量统计</p>
        <el-select class="right-select" @change="rightSelectChange"
                   v-model="rightValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gasName"
            :value="item.id">
          </el-option>
        </el-select>
        <div id="right-eCharts-box"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import { airbottleStockGroupBottleName,airbottleStatisticsList,
    airbottleStatisticsOutList,airbottleStatisticsApplyList, } from "@/api/gasBottleManage/index";
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  //import addPage from "./addPage.vue";
  export default {
    name: 'index',
    //components: {
    //  addPage
    //},
    data () {
      return {
        options:[],
        topValue:'',
        topData:{},
        leftValue:'',
        leftData:{},
        rightValue:'',
        rightData:{},
      }
    },
    created () {

    },
    mounted () {
      this.getOptions();
      this.topSelectChange();
      this.leftSelectChange();
      this.rightSelectChange();
    },
    methods: {
      //获取气体类型列表
      getOptions(){
        airbottleStockGroupBottleName().then(response => {
          let list = [{gasName:'全部气体',id:''}]
          list = list.concat(response.data)
          this.$set(this,'options',list);
        });
      },
      //出入库信息统计
      topSelectChange(val){
        airbottleStatisticsList({gasName:this.forNameList(val)}).then(response => {
          let timeData = [];
          let leftData = [];
          let rightData = [];
          let numList = [];
          let num = 4;
          for(let i=0;i<response.data.inList.length;i++){
            timeData.push(response.data.inList[i].recordMonth);
            leftData.push(response.data.inList[i].totalNum);
            rightData.push(response.data.outList[i].totalNum);
            let numMax = response.data.inList[i].totalNum>=response.data.outList[i].totalNum?response.data.inList[i].totalNum:response.data.outList[i].totalNum;
            num = numMax>num?numMax:num;
          }
          for(let i=0;i<response.data.inList.length;i++){
            numList.push(num);
          }
          this.topECharts(timeData,leftData,rightData,numList);
        });
      },
      //用气数统计
      leftSelectChange(val){
        airbottleStatisticsOutList({gasName:this.forNameList(val)}).then(response => {
          let listData = [];
          let numList = [];
          let num = 4;
          for(let i=0;i<response.data.length;i++){
            listData.push({
              name:response.data[i].recordMonth,
              value:response.data[i].totalNum,
            });
            num = response.data[i].totalNum>num?response.data[i].totalNum:num;
          }
          for(let i=0;i<response.data.length;i++){
            numList.push(num);
          }
          this.leftECharts(listData,numList);
        });
      },
      //用气量统计
      rightSelectChange(val){
        airbottleStatisticsApplyList({gasName:this.forNameList(val)}).then(response => {
          let nameList = [];
          let dataList = [];
          let num = 4;

          for(let i=0;i<response.data.length;i++){
            nameList.push(response.data[i].recordMonth);
            dataList.push(response.data[i].totalNum);
            num = response.data[i].totalNum>num?response.data[i].totalNum:num;
          }
          this.rightECharts(nameList,dataList,num);
        });
      },
      topECharts(timeData,leftData,rightData,numList){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('top-eCharts-box'));
        let option = {
          backgroundColor: "#fff",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: false, // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "2%",
            right: "2%",
            bottom: "5%",
            top: "20%",
            containLabel: true,
          },
          legend: {
            data: ["入库", "出库"],
            left: 60,
            top: 60,
            textStyle: {
              color: "#333",
            },
            itemWidth: 12,
            itemHeight: 10,
            // itemGap: 35
          },
          xAxis: {
            type: "category",
            data: timeData,
            axisLine: {
              lineStyle: {
                color: "#666666",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#666666",
                // fontSize: 12,
              },
            },
          },
          yAxis: {
            type: "value",
            // max: "1200",
            axisLine: {
              lineStyle: {
                color: "#666666",
              },
            },
            axisTick: {
              show: false,
            },
            min: 0,
            max: numList[0] <= 4 ? 4 : numList[0],
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0)",
              },
            },
            axisLabel: {
              formatter: "{value}个",
              textStyle: {
                color: "#666666",
                // fontSize: 12,
              },
            },
          },
          dataZoom: [
            {
              show: false,
              height: 12,
              xAxisIndex: [0],
              bottom: "8%",
              start: 10,
              end: 120,
              handleIcon:
                "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
              handleSize: "110%",
              handleStyle: {
                color: "#d3dee5",
              },
              textStyle: {
                color: "#fff",
              },
              borderColor: "#90979c",
            },
            // 缩放
            // {
            //   type: "inside",
            //   show: true,
            //   height: 15,
            //   start: 1,
            //   end: 35,
            // },
          ],
          series: [
            {
              name: "入库",
              type: "bar",
              barWidth: "15%",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#88C8FF",
                    },
                    {
                      offset: 1,
                      color: "#0183FA",
                    },
                  ]),
                  barBorderRadius: 12,
                },
              },
              data: leftData,
            },
            {
              name: "出库",
              type: "bar",
              barWidth: "15%",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#F28E26",
                    },
                    {
                      offset: 1,
                      color: "#FFDEBC",
                    },
                  ]),
                  barBorderRadius: 11,
                },
              },
              data: rightData,
            },
          ],
        };

        // let app = {
        //   currentIndex: -1,
        // };
        // setInterval(function () {
        //   let dataLen = option.series[0].data.length;
        //   // 取消之前高亮的图形
        //   myChart.dispatchAction({
        //     type: "downplay",
        //     seriesIndex: 0,
        //     dataIndex: app.currentIndex,
        //   });
        //   app.currentIndex = (app.currentIndex + 1) % dataLen;
        //   // 高亮当前图形
        //   myChart.dispatchAction({
        //     type: "highlight",
        //     seriesIndex: 0,
        //     dataIndex: app.currentIndex,
        //   });
        //   // 显示 tooltip
        //   myChart.dispatchAction({
        //     type: "showTip",
        //     seriesIndex: 0,
        //     dataIndex: app.currentIndex,
        //   });
        // }, 1000);
        myChart.setOption(option);
      },
      leftECharts(listData,numList){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('left-eCharts-box'));
        let data = listData;
        let xData = [];
        let yData = [];
        data.map(function (a, b) {
          xData.push(a.name);
          yData.push(a.value);
        });
        let option = {
          backgroundColor: "#fff",
          color: ["#3398DB"],
          // tooltip: {
          //   trigger: "axis",
          //   axisPointer: {
          //     // 坐标轴指示器，坐标轴触发有效
          //     type: false, // 默认为直线，可选为：'line' | 'shadow'
          //   },
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: false, // 默认为直线，可选为：'line' | 'shadow'
              lineStyle: {
                opacity: 0,
              },
            },
            formatter: function (prams) {
              return prams[0].name + ':' + prams[0].data + '个';
            },
          },
          legend: {
            data: ["直接访问", "背景"],
            show: false,
          },
          grid: {
            left: "4%",
            right: "2%",
            bottom: "5%",
            top: "20%",
            containLabel: true,
            z: 22,
          },
          xAxis: [
            {
              type: "category",
              gridIndex: 0,
              data: xData,
              axisTick: {
                alignWithLabel: true,
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#666666",
                },
              },
              axisLabel: {
                show: true,
                color: "#666666",
                // fontSize: 12,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              gridIndex: 0,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              min: 0,
              max: numList[0] <= 4 ? 4 : numList[0],
              axisLine: {
                lineStyle: {
                  color: "#666666",
                },
              },
              axisLabel: {
                color: "#666666",
                formatter: "{value}个",
              },
            },
            {
              type: "value",
              gridIndex: 0,
              splitNumber: 12,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitArea: {
                show: false,
                areaStyle: {
                  color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
                },
              },
            },
          ],
          series: [
            {
              name: "用气数",
              type: "bar",
              barWidth: "30%",
              xAxisIndex: 0,
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#00feff",
                    },
                    {
                      offset: 0.5,
                      color: "#027eff",
                    },
                    {
                      offset: 1,
                      color: "#0286ff",
                    },
                  ]),
                },
              },
              data: yData,
              zlevel: 11,
            },
            {
              name: "背景",
              type: "bar",
              barWidth: "50%",
              xAxisIndex: 0,
              yAxisIndex: 1,
              barGap: "-135%",
              data: numList,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: "rgba(242,249,255,1)",
                    },
                  ]),
                },
              },
              zlevel: 9,
            },
          ],
        };
        myChart.setOption(option);
      },
      rightECharts(nameList,dataList,numMax){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('right-eCharts-box'));
        let option = {
          backgroundColor: "transparent",
          grid: {
            left: "3%",
            right: "3%",
            bottom: "5%",
            top: "20%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: false, // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (prams) {
              return prams[0].name + ':' + prams[0].data + 'mPa';
            },
            // axisPointer: {
            //     type: 'shadow',
            //     lineStyle: {
            //         color: '#57617B'
            //     }
            // }
          },
          xAxis: [
            {
              type: "category",

              boundaryGap: false,
              axisLabel: {
                textStyle: {
                  color: "#666666",
                  // fontSize: 12,
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  // x轴线颜色
                  color: "#666666",
                  width: 1,
                },
              },
              data: nameList,
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                color: "#666666",
                formatter: "{value}mPa",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#666666",
                },
              },
              min: 0,
              max: numMax <= 4 ? 4 : numMax,
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "",
              type: "line",
              stack: "用气量",
              symbol: "circle",
              showSymbol: false,
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#0092f6",
                  lineStyle: {
                    color: "#0092f6",
                    width: 1,
                  },
                  areaStyle: {
                    //color: '#94C9EC'
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0.4,
                        color: "rgba(60, 70, 255, 0.5)",
                      },
                      {
                        offset: 1,
                        color: "rgba(25, 125, 240, 1)",
                      },
                    ]),
                  },
                },
              },
              markPoint: {
                itemStyle: {
                  normal: {
                    color: "red",
                  },
                },
              },
              data: dataList,
            },
          ],
        };
        myChart.setOption(option);
      },
      forNameList(val){
        let self = this;
        if(val){
          for(let i=0;i<self.options.length;i++){
            if(val == self.options[i].id){
              return self.options[i].gasName
            }
          }
        }else{
          return ''
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .InformationRecord{
    display: flex;
    flex-direction: column;
    .max-top-box{
      width:1570px;
      height:460px;
      position: relative;
      .title-p{
        z-index:10;
        position: absolute;
        top:20px;
        left:20px;
        font-size:16px;
        font-weight:700;
        color:#333;
      }
      .top-select{
        z-index:10;
        position: absolute;
        top:20px;
        right:20px;
        width:120px;
      }
      #top-eCharts-box{
        width:1570px;
        height:460px;
      }
    }
    .max-bottom-box{
      flex:1;
      display: flex;
      .big-left-box{
        width:770px;
        height:440px;
        position: relative;
        .title-p{
          z-index:10;
          position: absolute;
          top:20px;
          left:20px;
          font-size:16px;
          font-weight:700;
          color:#333;
        }
        .left-select{
          z-index:10;
          position: absolute;
          top:20px;
          right:20px;
          width:120px;
        }
        #left-eCharts-box{
          width:770px;
          height:440px;
        }
      }
      .big-right-box{
        width:800px;
        height:440px;
        position: relative;
        .title-p{
          z-index:10;
          position: absolute;
          top:20px;
          left:20px;
          font-size:16px;
          font-weight:700;
          color:#333;
        }
        .right-select{
          z-index:10;
          position: absolute;
          top:20px;
          right:20px;
          width:120px;
        }
        #right-eCharts-box{
          width:800px;
          height:440px;
        }
      }
    }
  }
</style>
