<template>
  <div>
    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
      <div class="layui-row" style="height: 10%;background-color: darkblue;">
        <total-item
          :text="totalData[0].text"
          :charge-total-icon="imgChargeTotal1"
          :number-color="totalNumberColor[0]"
          :number="totalData[0].number"
        ></total-item>
      </div>
      <div class="layui-row" style="height: 10%;background-color: darkblue;">
        <total-item
          :text="totalData[1].text"
          :charge-total-icon="imgChargeTotal2"
          :number-color="totalNumberColor[1]"
          :number="totalData[1].number"
        ></total-item>
      </div>
      <div class="layui-row" style="height: 10%;background-color: darkblue;">
        <total-item
          :text="totalData[2].text"
          :charge-total-icon="imgChargeTotal3"
          :number-color="totalNumberColor[2]"
          :number="totalData[2].number"
        ></total-item>
      </div>
      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
        <module-title :font="countFont"></module-title>
      </div>
      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
        <div class="count-data-list">
          <div class="list-item" v-for="(index, item) in countData" style="height: 20%">
            <list-count-item
              :text="item.text"
              :count="item.count"
              :percentage="item.percentage"
              :bar-color="countColor[index]"
            >
            </list-count-item>
          </div>
        </div>
      </div>

      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
      <!--      <module-title-->
      <!--        :module-tile-icon="chargeGasAnalysisIcon"-->
      <!--        :title="chargeGasAnalysisTitle2"-->
      <!--        :font="chargeGasAnalysisFont"-->
      <!--      >-->
      <!--      </module-title>-->
      <!--    </div>-->


      <!--    <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">-->
      <!--      <div class="chart" id="saleGasAnalysys2"></div>-->
      <!--    </div>-->
    </div>
    <div class="layui-container" style="height: 100%;background-color: darkblue;margin-top: -10px"
    >
      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
        <module-title
          :module-tile-icon="chargeGasAnalysisIcon"
          :title="chargeGasAnalysisTitle1"
          :font="chargeGasAnalysisFont"
        >
        </module-title>
      </div>
      <div class="layui-row" style="height: 50%;background-color: darkblue;margin-top: 10px">
        <div class="chart" id="saleGasAnalysys1" style="background-color: darkblue"></div>
      </div>


    </div>
    <div class="layui-container" style="background-color: darkblue;height: 100%;padding-top: 10px" >
      <div class="layui-row" style="height: 5%;background-color: darkblue;margin-top: 10px">
        <module-title :module-tile-icon="otherBusinessIcon"
                      :title="otherBusinessTitle" :font="otherBusinessFont"></module-title>
      </div>
      <div class="layui-row" style="height: 50%;background-color: darkblue">
        <div class="chart" id="saleGasAnalysys2" style="background-color: darkblue;height: 180%"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  title:"ChargeContentPage",
  data(){
    return {
      otherBusinessIcon:require('src/assets/images/收费其他业务.png'),
      otherBusinessTitle:'今日其他业务占比',
      otherBusinessFont:5,
      oterBusinessData:[
        {
          name: "开户",
          value: 1232,
        },
        {
          name: "补换折（卡）",
          value: 754,
        },
        {
          name: "换表清零",
          value: 611,
        },
        {
          name: "增容",
          value: 400,
        },
        {
          name: "销户",
          value: 200,
        },
        {
          name: "其他",
          value: 466,
        },
      ],

      leftChartSaleAmountData: [
        1800, 2300, 1600, 1100, 600, 900, 1500, 500, 560, 700, 800, 1300,
      ], //物联网表民用用气
      leftChartNSaleAmountData: [
        180, 1500, 900, 1300, 800, 350, 1200, 560, 120, 1300, 1452, 1700,
      ], //物联网表非民用用气
      tongBi: [24, 30, 20, 12, 90, 43, 19, 0, 0, 13, 60, 50], //同比
      huanBi: [24, 16, 37, 66, 28, 75, 60, 80, 30, 65, 56, 79], //环比
      monthData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      chargeGasAnalysisIcon: require("src/assets/images/收费售气量分析.png"),
      chargeGasAnalysisTitle1: "售气量分析",
      chargeGasAnalysisTitle2: "售气量分析(7-12月)",
      chargeGasAnalysisFont: 5,
      countColor: [
        "#EE7A2F",
        "#19FBAE",
        "#F7DC3D",
        "#FFA327",
        "#29fb49",
        "#EE7A2F",
        "#EE7A2F",
      ],
      countData: [
        {
          text: "物联网表收费",
          count: 12210,
          percentage: "54%",
          barColor: "#EE7A2F",
        },
        {
          text: "金额卡表收费",
          count: 8451,
          percentage: "18%",
          barColor: "#19FBAE",
        },
        {
          text: "气量卡表收费",
          count: 6358,
          percentage: "12%",
          barColor: "#F7DC3D",
        },
        {
          text: "机表收费",
          count: 4107,
          percentage: "9%",
          barColor: "#FFA327",
        },
        {
          text: "超用收费",
          count: 3318,
          percentage: "7%",
          barColor: "#29fb49",
        },
      ],
      countFont:5,
      imgChargeTotal1: require("src/assets/images/收费total1.png"),
      imgChargeTotal2: require("src/assets/images/收费total2.png"),
      imgChargeTotal3: require("src/assets/images/收费total3.png"),
      totalNumberColor: ["#FFAC41", "#F7DC3D", "#00FFDE"],
      totalData: [
        { number: 1245137, text: "今日售气量" },
        { number: 124513, text: "今日售气笔数" },
        { number: 1000013, text: "今日售气金额" },
      ],

    }
  },
  ready(){
    this.myLeftChart3()
    this.otherBusineeChart()
  },
  methods:{
    otherBusineeChart(){
      let mychart = echarts.init(document.getElementById('saleGasAnalysys2'));
      let data = JSON.parse(JSON.stringify(this.oterBusinessData));
      let arrName = getArrayValue(data, "name");
      let arrValue = getArrayValue(data, "value");
      let sumValue = eval(arrValue.join("+"));
      let objData = array2obj(data, "name");
      let percentage = getArrPercentage(data,"name")
      let optionData = getData(data);
      function getArrayValue(array, key) {
        var key = key || "value";
        var res = [];
        if (array) {
          array.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      }

      function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i];
        }
        return resObj;
      }
      function getArrPercentage(arr,key) {
        let percentageObj = {}
        for(let i=0;i<data.length;i++){
          percentageObj[arr[i][key]] = ((data[i].value / sumValue) * 100).toFixed(2) + "%"
        }
        return percentageObj
      }
      function getData(data) {
        var res = {
          series: [],
          yAxis: [],
        };
        for (let i = 0; i < data.length; i++) {
          // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
          res.series.push({
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
            center: ["50%", "30%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sumValue - data[i].value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [78 - i * 13 + "%", 85 - i * 13 + "%"],
            center: ["50%", "30%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: "rgb(0, 28, 124)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: 2.5,
                name: "",
                itemStyle: {
                  color: "rgb(0, 28, 124)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          // res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
        }
        return res;
      }

      let option = {
        // backgroundColor: "#000",
        legend: {
          show: true,
          icon: "circle",
          top: "60%",
          left: "5%",
          data: arrName,
          width: 50,
          padding: [0, 10],
          itemGap: 19,
          formatter: function (name) {
            return (
              "{title|" + name + "}      {value|" + objData[name].value + "}   {title|" + percentage[name] + "}"
            );
          },

          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                lineHeight: 15,
                color: "#B2B0CB",
                width: 120
              },
              value: {
                fontSize: 14,
                lineHeight: 15,
                color: "#B2B0CB",
                width: 80
              },
            },
          },
        },
        // tooltip: {
        //   show: true,
        //   trigger: "item",
        //   formatter: "{a}<br>{b}:{c}({d}%)",
        // },
        color: [
          "rgb(238, 122, 47)",
          "rgb(0, 228, 196)",
          "rgb(13, 126, 254)",
          "rgb(247, 219, 53)",
          "rgb(101, 223, 127)",
          "rgb(255, 125, 125)"
        ],
        grid: {
          top: "11%",
          bottom: "60%",
          left: "20%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: 13,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      };
      mychart.setOption(option);
      window.addEventListener("resize", function() {
        mychart.resize();
      });

    },
    myLeftChart3() {
      let mychart = echarts.init(document.getElementById('saleGasAnalysys1'));

      // 2. 指定配置和数据
      let option = {
        title: {
          show: true,
          text: "万m³",
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 14,
          },
          left: 0,
          top: 12,
        },
        color: [
          new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0.37,
                color: "rgba(0,255,255,0.9)",
              },
              {
                offset: 1,
                color: "rgba(3,6,114,0.1)",
              },
            ],
            false
          ),
          new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0.37,
                color: "rgba(1,245,152,0.9)",
              },
              {
                offset: 1,
                color: "rgba(3,6,114,0.1)",
              },
            ],
            false
          ),
        ],

        tooltip: {
          // 通过坐标轴来触发
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            let relVal = params[0].name;
            for (let i = 0, l = params.length; i < l; i++) {
              if (
                params[i].seriesName === "同比" ||
                params[i].seriesName === "环比"
              ) {
                relVal +=
                  "<br/>" +
                  params[i].seriesName +
                  " : " +
                  params[i].value +
                  "%";
              } else {
                relVal +=
                  "<br/>" + params[i].seriesName + " : " + params[i].value;
              }
            }
            return relVal;
          },
        },
        legend: {
          // 距离容器10%
          right: "30%",
          // 修饰图例文字的颜色
          textStyle: {
            color: "#4c9bfd",
          },
          itemGap: 30,
          // 如果series 里面设置了name，此时图例组件的data可以省略
          // data: ["邮件营销", "联盟广告"]
        },
        grid: {
          top: "18%",
          left: "0",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: true,
          data: this.monthData,
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            // interval: 500,
            // max: 3500,
            // 去除刻度
            axisTick: {
              show: false,
            },
            // 修饰刻度标签的颜色
            axisLabel: {
              color: "rgba(255,255,255,.7)",
            },
            // 修改y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "#012f4a",
              },
            },
          },
          {
            name: "万m³",
            type: "value",
            nameTextStyle: {
              color: "rgba(255,255,255,.7)",
            },
            // nameGap: 12,
            // interval: 30,
            // min: -90,
            // 去除刻度
            axisTick: {
              show: false,
            },
            // 修饰刻度标签的颜色
            axisLabel: {
              color: "rgba(255,255,255,.7)",
            },
            // 修改y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "#012f4a",
              },
            },
          },
        ],
        series: [
          {
            name: "民用",
            type: "bar",
            barWidth: "15%",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: JSON.parse(JSON.stringify(this.leftChartSaleAmountData)),
          },
          {
            name: "非民用",
            type: "bar",
            barWidth: "15%",
            barGap: "40%",
            data: JSON.parse(JSON.stringify(this.leftChartNSaleAmountData)),
          },
          {
            name: "同比",
            type: "line",
            stack: "总量",
            // 是否让线条圆滑显示
            smooth: true,
            lineStyle: {
              color: "rgba(193,162,81,.9)",
              type: "dotted",
              width: 3,
              join: "miter",
              miterLimit: 40,
            },
            showSymbol: false,
            yAxisIndex: 1,
            data: JSON.parse(JSON.stringify(this.tongBi)),
          },
          {
            name: "环比",
            type: "line",
            stack: "总量",
            lineStyle: {
              color: "rgba(0,212,139,.9)",
            },
            smooth: true,
            showSymbol: false, //取消折线的衔接点
            yAxisIndex: 1,
            data: JSON.parse(JSON.stringify(this.huanBi)),
          },
        ],
      };
      // 3. 把配置和数据给实例对象
      mychart.setOption(option);
      window.addEventListener("resize", function () {
        mychart.resize();
      });
    },
  }
}
</script>
<style lang="less">
#saleGasAnalysys1{
  div{
    height: 0%;
  }
}
</style>
