<template>
  <Card title="偏差预警">
    <div class="list">
      <div style="margin-left: 436px; position: absolute; margin-top: -20px">
        <el-date-picker
          v-model="checkDate"
          type="month"
          value-format="yyyy-MM"
          @change="checkTypes"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <div id="mainLeft"></div>
      <!-- <div id="mainRight"></div> -->
    </div>
  </Card>
</template>
<script>
import { getDetailsStatisticsListApi } from "@/assets/js/api/zhongjianFourth.js";
import Card from "../components/Card.vue";
import CarTable from "./components/CarTable.vue";
import * as echarts from "echarts";
export default {
  components: { Card, CarTable },
  data() {
    return {
      sn: "",
      checkDate: "2023-01",
      gridNameRightData:[],
      gridNameRight:[],
      gridNameLeft:[],
      gridNameLeftData:[]
    };
  },
  mounted() {
    // this.echartsItemRight();
    this.getData();
  },
  methods: {
    checkTypes(val) {
      this.gridNameLeft= []
      this.gridNameLeftData = []
      this.gridNameRight = []
      this.gridNameRightData = []
      console.log("类型或者时间修改事件值 ：", val);
      this.getData()
    },
    //查询
    getData() {
      this.sn = this.$store.state.projectSn;
      getDetailsStatisticsListApi({
        date:this.checkDate,
        projectSn: this.sn,
      }).then((res) => {
        console.log("查询偏差明细", res);
        let LeftLength = 0;
        if(res.result.length >= 1){
          if(res.result.length % 2 == 0) {
          LeftLength = res.result.length / 2
        }else{
          LeftLength = (res.result.length / 2)+1
        }

        for(let i = 1; i <= res.result.length; i++) {
           if(i <= LeftLength) {
            this.gridNameLeft.push(res.result[i-1].typeName)
           this.gridNameLeftData.push(res.result[i-1].deviationRatio)
           }else{
            this.gridNameRight.push(res.result[i-1].typeName)
           this.gridNameRightData.push(res.result[i-1].deviationRatio)
           }
          }
        }
        
        console.log("this.gridNameLeft :" + this.gridNameLeft+ " -- this.gridNameLeftData :"+this.gridNameLeftData +" --this.gridNameRight :"+ this.gridNameRight+"--this.gridNameRightData:"+ this.gridNameRightData);
       
        this.echartsItemLeft();

      });
    },
    echartsItemLeft() {
      var chartDom = document.getElementById("mainLeft");
      var myChart = echarts.init(chartDom);
      var option = {
        // backgroundColor: {
        //   type: "linear",
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [
        //     {
        //       offset: 0,
        //       color: "#061B31", // 0% 处的颜色
        //     },
        //     {
        //       offset: 0.25,
        //       color: "#123457", // 25% 处的颜色
        //     },
        //     {
        //       offset: 0.75,
        //       color: "#0C254A", // 75% 处的颜色
        //     },
        //     {
        //       offset: 1,
        //       color: "#0A213E", // 100% 处的颜色
        //     },
        //   ],
        //   global: false, // 缺省为 false
        // },
        grid: [
          {
            //左侧的柱状图grid
            width: "46%",
            left: "1%",
            top: "16%",
            right: "0",
            bottom: "0",
          },
          {
            //右侧的柱状图grid
            width: "46%",
            left: "51%",
            top: "16%",
            right: "0",
            bottom: "0",
          },
        ],
        xAxis: [
          {
            //左侧柱状图的X轴
            gridIndex: 0, //x 轴所在的 grid 的索引
            show: false,
          },
          {
            //右侧柱状图的X轴
            gridIndex: 1, //x 轴所在的 grid 的索引
            show: false,
          },
        ],
        yAxis: [
          {
            //左侧柱状图的Y轴
            gridIndex: 0, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              verticalAlign: "bottom",
              align: "left",
              padding: [0, 0, 15, 15],
              textStyle: {
                color: "#befbff",
                fontSize: "12",
              },
            },
            data: this.gridNameLeft,
            inverse: true,
          },
          {
            //左侧柱状图的Y轴
            gridIndex: 0, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            data: this.gridNameLeftData,
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: "bottom",
              align: "right",
              padding: [0, 20, 15, 0],
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
              formatter: function (value) {
                return "{x|" + value + "}  {y|" + "%}";
              },
              rich: {
                y: {
                  color: "#befbff",
                  fontSize: 10,
                },
                x: {
                  color: "#f6cf42",
                  fontSize: 10,
                },
              },
            },
          },
          {
            //左侧柱状图的Y轴
            gridIndex: 0, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            data: [],
          },

          {
            //右侧柱状图的Y轴
            gridIndex: 1, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              verticalAlign: "bottom",
              align: "left",
              padding: [0, 0, 15, 15],
              textStyle: {
                color: "#befbff",
                fontSize: "12",
              },
            },
            data: this.gridNameRight,
            inverse: true,
          },
          {
            //右侧柱状图的Y轴
            gridIndex: 1, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            data: this.gridNameRightData,
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: "bottom",
              align: "right",
              padding: [0, 20, 15, 0],
              textStyle: {
                color: "#fff",
                fontSize: "10",
              },
              formatter: function (value) {
                return "{x|" + value + "}  {y|" + "%}";
              },
              rich: {
                y: {
                  color: "#befbff",
                  fontSize: 10,
                },
                x: {
                  color: "#f6cf42",
                  fontSize: 10,
                },
              },
            },
          },
          {
            //右侧柱状图的Y轴
            gridIndex: 1, //y轴所在的 grid 的索引
            splitLine: "none",
            axisTick: "none",
            axisLine: "none",
            data: [],
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            data:  this.gridNameLeftData,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#49bdff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#54ffd5", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: 6,
              },
            },
            z: 2,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 2, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barGap: "-100%",
            data: [100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#2d5271",
                barBorderRadius: 6,
              },
            },
            z: 0,
          },
          {
            name: "值",
            type: "bar",
            xAxisIndex: 1, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 3, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            data: this.gridNameRightData,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#49bdff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#54ffd5", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: 6,
              },
            },
            z: 2,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 1, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 5, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barGap: "-100%",
            data: [100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#2d5271",
                barBorderRadius: 6,
              },
            },
            z: 0,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // echartsItemRight() {
    //   var chartDom = document.getElementById('mainRight')
    //   var myChart = echarts.init(chartDom)

    //   var data = [50,80,20,60]
    //   var colorList = []
    //   colorList[0] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    //     { offset: 0, color: 'rgb(193, 174, 87)' },
    //     { offset: 1, color: 'rgb(222, 87, 51)' }
    //   ])
    //   colorList[1] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    //     { offset: 0, color: 'rgb(193, 174, 87)' },
    //     { offset: 1, color: 'rgb(222, 87, 51)' }
    //   ])
    //   colorList[2] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    //     { offset: 0, color: 'rgb(193, 174, 87)' },
    //     { offset: 1, color: 'rgb(222, 87, 51)' }
    //   ])
    //   colorList[3] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    //     { offset: 0, color: 'rgb(193, 174, 87)' },
    //     { offset: 1, color: 'rgb(222, 87, 51)' }
    //   ])
    //   var option
    //   option = {
    //     // backgroundColor: '#100c29',
    //     grid: {
    //     top:'0',
    //     left: '10%',
    //     right: '10%',
    //     bottom: '0',
    //     containLabel: true
    //     },
    //     xAxis: {
    //       type: 'value',
    //       splitLine: {
    //         show: false
    //       },
    //       offset: 10,
    //       axisTick: {
    //         show: false
    //       },
    //       axisLine: {
    //         show: false
    //       },
    //       axisLabel: {
    //         show: false
    //       }
    //     },
    //     yAxis: {
    //       axisLabel: {
    //         show: true,
    //         textStyle: {
    //             color: '#FFFFFF',       //y轴字体颜色
    //             fontSize:'15px'
    //         },
    //     },
    //     splitLine: {show: false},   //横向的线
    //     axisTick: {show: false},    //y轴的端点
    //     axisLine: {show: false},    //y轴的线
    //       data: ["加砌块","钢构","幕墙","瓷砖"]
    //     },
    //     series: [
    //       {
    //         type: 'bar',
    //         barWidth: '15px',
    //         itemStyle: {
    //           normal: {
    //             color: function(params) {
    //               console.log(params)
    //               return colorList[params.dataIndex]
    //             }
    //           }
    //         },
    //         z: 9999,
    //         data: data
    //       },
    //       {
    //         type: 'bar',
    //         barWidth: '20px',
    //         barGap: '-100%',
    //         z: 99,
    //         itemStyle: {
    //           normal: {
    //             color: '#30373f'
    //           }
    //         },
    //         //百分比
    //         label: {
    //           show: true,
    //           offset: [100, 0,30,40],
    //           position: 'right',
    //           align: 'right',
    //           formatter: function(data) {
    //             for (let i = 0; i < data.length; i++) {
    //               return data[i] + '%'
    //             }
    //           }
    //         },
    //         data: data
    //       },
    //       {
    //         // 分隔
    //         type: 'pictorialBar',
    //         itemStyle: {
    //           normal: {
    //             color: 'rgb(43, 82, 141)'
    //           }
    //         },
    //         symbolRepeat: 'fixed',
    //         symbolMargin: 2,
    //         symbol: 'rect',
    //         symbolClip: true,
    //         symbolSize: [4, 20],
    //         symbolPosition: 'start',
    //         symbolOffset: [4, 0],
    //         data: [100,100,100,100],
    //         width: 25,
    //         z: 0,
    //         zlevel: 1
    //       }
    //     ]
    //   }
    //   option && myChart.setOption(option)
    // }
  },
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  box-sizing: border-box;
  padding-top: 30px;
  height: 100%;
}
#mainLeft {
  width: 100%;
  height: 100%;
}
// #mainRight{
//   width: 50%;
//   height: 100%;
// }
::v-deep .el-input--suffix .el-input__inner {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #66d3d8 !important ;
  z-index: 999;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 160px;
}
</style>
