<template>
  <div>
    <container3 title="民用产业">
      <bigScreenTabs
        slot="datePicker"
        v-model="index"
        :titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
      ></bigScreenTabs>
      <div style="display: flex; height: 100%" v-if="index == 0">
        <div
          style="
            height: 100%;
            width: 16%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
          "
        >
          <div class="tag">
            <div class="title">收入</div>
            <i style="font-size: 24px; font-weight: bold; color: #91d5fe"
              >{{ handleMillion(total.realIncome) }}/<i
                style="font-size: 18px"
                >{{ handleMillion(total.targetIncome) }}</i
              ></i
            >
            亿元
          </div>
          <div class="tag">
            <div class="title">利润</div>
            <i style="font-size: 24px; font-weight: bold; color: #91d5fe"
              >{{ handleMillion(total.realProfit) }}/<i
                style="font-size: 18px"
                >{{ handleMillion(total.targetProfit) }}</i
              ></i
            >
            亿元
          </div>
          <div class="tag">
            <div class="title">新签合同额</div>
            <i style="font-size: 24px; font-weight: bold; color: #91d5fe"
              >{{ handleMillion(total.newContractAmount)
              }}<i style="font-size: 18px"></i
            ></i>
            亿元
          </div>
        </div>
        <div style="height: 100%; width: 84%" ref="chart"></div>
      </div>
      <div style="height: 100%" v-else-if="index == 1">
        <el-row :gutter="20" style="height: 100%">
          <el-col :span="5" style="height: 100%">
            <div class="_box">
              <div class="_item">
                <div>
                  <img src="./img/right2/2.png" alt="" />
                </div>
                <div style="margin: 5px 0 10px; color: #ccc">签订总数</div>
                <div style="font-size: 30px">{{ totalAndAmount.total }}</div>
              </div>
              <div class="_item">
                <div>
                  <img src="./img/right2/3.png" alt="" />
                </div>
                <div style="margin: 5px 0 10px; color: #ccc">金额</div>
                <div>
                  <span style="font-size: 30px">{{
                    handleMillion(totalAndAmount.amount)
                  }}</span
                  ><span style="color: #ccc">亿元</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="13" style="height: 100%">
            <div style="height: 100%; width: 100%" ref="chart2"></div>
          </el-col>
          <el-col :span="6" style="height: 100%">
            <div style="height: 100%; width: 100%" ref="chart3"></div>
          </el-col>
        </el-row>
      </div>
      <div style="height: 100%" v-else>
        <div style="height: 100%; width: 100%" ref="chart4"></div>
      </div>
    </container3>
  </div>
</template>

<script>
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container3 from "./components/container3/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
import colorList from "@/utils/colorPalette";

import echarts from "echarts";
import * as echarts5 from "echarts5";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
  mixins: [resize],
  name: "right2",
  components: {
    scalseBox,
    bigScreenHead,
    rocketTit,
    container3,
    bigScreenTabs,
  },
  data() {
    return {
      index: 0,
      chart: null,
      chart2: null,
      chart3: null,
      chart4: null,
      total: {
        newContractAmount: 0,
        realIncome: 0,
        realProfit: 0,
        targetIncome: 0,
        targetProfit: 0,
      },
      totalAndAmount: {
        amount: 0,
        total: 0,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    index(newVal, oldVal) {
      if (newVal == 0) {
        this.$nextTick(() => {
          this.initChart();
        });
      } else if (newVal == 1) {
        this.$nextTick(() => {
          this.initChart2();
        });
      } else {
        this.$nextTick(() => {
          this.initChart4();
        });
      }
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.request({
        url: "/hx/operating/getCivilIndustryPic",
        method: "get",
        params: { type: 1 },
      }).then((res) => {
        if (200 == res.code) {
          let { total, list } = res.data;
          if (total) {
            this.total = total;
          }
          this.chart = echarts.init(this.$refs.chart);
          this.chart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["利润", "收入", "收入完成率", "利润完成率"],
              textStyle: {
                color: "#fff", //legend字体颜色
              },
            },
            grid: {
              left: 20,
              right: 20,
              top: 30,
              bottom: 50,
              containLabel: true,
            },
            dataZoom: {
              type: "slider",
              start: 0,
              end: this.dataZoomEnd(list.length, 7),
              textStyle: {
                color: "#fff",
              },
            },
            xAxis: [
              {
                type: "category",
                data: list.map((e) => e.month),
                // data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
            ],
            yAxis: [
              {
                name: "个",
                splitLine: {
                  show: true,
                  //  改变轴线颜色
                  lineStyle: {
                    // 使用深浅的间隔色
                    color: ["rgba(255, 255, 255,.5)"],
                  },
                },
                axisLabel: {
                  formatter: "{value}",
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
              {
                type: "value",
                axisLabel: {
                  formatter: "{value} %",
                },
                splitLine: {
                  show: false, //不显示网格线
                },
                splitArea: {
                  show: false, //不显示网格区域
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
            ],
            series: [
              {
                name: "收入",
                type: "bar",
                emphasis: {
                  focus: "series",
                },
                z: "-1",
                barGap: "-100%",
                itemStyle: {
                  color: "#53C19D",
                },
                barWidth: 30,
                data: list.map((e) => e.realIncome),
                // data: [100, 232, 201, 154, 190, 330, 410],
              },
              {
                name: "利润",
                type: "bar",

                emphasis: {
                  focus: "series",
                },
                itemStyle: {
                  color: "#8BB1ED",
                },
                barWidth: 30,
                data: list.map((e) => e.realProfit),
              },
              {
                name: "收入完成率",
                type: "line",
                smooth: false,
                yAxisIndex: 1,
                data: list.map((e) => (e.realIncome / e.targetIncome) * 100),
                // data: [500, 550, 700, 520, 650, 520, 550],
                itemStyle: {
                  color: "#53C19D",
                },
                symbol: "none",
              },
              {
                name: "利润完成率",
                type: "line",
                smooth: false,
                itemStyle: {
                  color: "#8BB1ED",
                },
                yAxisIndex: 1,
                data: list.map((e) => (e.realProfit / e.targetProfit) * 100),
                symbol: "none",
              },
            ],
          });
        }
      });
    },
    setXdata(list, item, i) {
      // ["", "", "2021", ""];
      let arr = [];
      for (let i = 0; i < list.length; i++) {
        arr.push("");
      }
      arr[i] = item;
      return arr;
    },
    initChart2() {
      this.request({
        url: "/hx/operating/getCivilIndustryPic",
        method: "get",
        params: { type: 2 },
      }).then((res) => {
        if (200 == res.code) {
          let { totalAndAmount, list, categoryTotal, monthList } = res.data;
          this.totalAndAmount = totalAndAmount;
          // to do 数据格式不对
          // console.log(list.map(e=>(e.filter(e=> e.category == '其他')[0].realQuantity)))
          // console.log(list.filter(e => e.category == '其他').map(e => e.realQuantity))
          this.initChart3(categoryTotal);
          var app = {};
          var posList = [
            "left",
            "right",
            "top",
            "bottom",
            "inside",
            "insideTop",
            "insideLeft",
            "insideRight",
            "insideBottom",
            "insideTopLeft",
            "insideTopRight",
            "insideBottomLeft",
            "insideBottomRight",
          ];

          app.configParameters = {
            rotate: {
              min: -90,
              max: 90,
            },
            align: {
              options: {
                left: "left",
                center: "center",
                right: "right",
              },
            },
            verticalAlign: {
              options: {
                top: "top",
                middle: "middle",
                bottom: "bottom",
              },
            },
            position: {
              options: echarts.util.reduce(
                posList,
                function (map, pos) {
                  map[pos] = pos;
                  return map;
                },
                {}
              ),
            },
            distance: {
              min: 0,
              max: 100,
            },
          };

          app.config = {
            rotate: 90,
            align: "left",
            verticalAlign: "middle",
            position: "insideBottom",
            distance: 15,
            onChange: function () {
              var labelOption = {
                normal: {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance,
                },
              };
              myChart.setOption({
                series: [
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                  {
                    label: labelOption,
                  },
                ],
              });
            },
          };

          var labelOption = {
            show: false,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: "{c}  {name|{a}}",
            fontSize: 16,
            rich: {
              name: {
                textBorderColor: "#fff",
              },
            },
          };
          let newData = [];
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            const itemLength = item.length;
            const listLength = list.length;
            if (itemLength > listLength) listLength = itemLength;
            for (let j = 0; j < itemLength; j++) {
              let arr = Array.apply(null, Array(listLength)).map(() => "");
              const item2 = item[j];
              if (item2.realQuantity != 0 && item2.realQuantity != null) {
                arr[i] = item2.realQuantity;

                newData.push({
                  barMaxWidth: 30,
                  name: item2.category,
                  type: "bar",
                  barGap: 0,
                  label: labelOption,
                  xAxisIndex: i,
                  data: arr.splice(0, i + 1),
                });
              }
            }
          }
          let newRate = [[], [], []];
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            for (let j = 0; j < item.length; j++) {
              const item2 = item[j];
              if (item2.category == "隔热") {
                if (item2.quantityRate) {
                  newRate[0].push(item2.quantityRate);
                } else {
                  newRate[0].push(0);
                }
              }
              if (item2.category == "稀土") {
                if (item2.quantityRate) {
                  newRate[1].push(item2.quantityRate);
                } else {
                  newRate[1].push(0);
                }
              }
              if (item2.category == "其他") {
                if (item2.quantityRate) {
                  newRate[2].push(item2.quantityRate);
                } else {
                  newRate[2].push(0);
                }
              }
              // if (item2.realQuantity != 0 && item.planQuantity != 0) {
              //   const rate = (item2.realQuantity / item2.planQuantity) * 100;
              //   newRate[i].push(rate > 100 ? 100 : rate);
              // } else {
              //   newRate[i].push(0);
              // }
            }
          }
          console.log(newRate);
          this.chart2 = echarts5.init(this.$refs.chart2);
          this.chart2.setOption({
            color: colorList,
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              // 进行数据处理
              formatter: function (params) {
                var html = "";
                if (params.length != 0) {
                  // 可以自己打印一下console.info(params[0]);
                  var getName = params[0].name;
                  html += getName + "<br/>";
                  for (var i = 0; i < params.length; i++) {
                    // 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
                    if (
                      params[i].value != null &&
                      params[i].value != 0 &&
                      params[i].value != ""
                    ) {
                      html += params[i].marker;
                      html +=
                        params[i].seriesName + ": " + params[i].value + "<br/>";
                    }
                  }
                }
                return html;
              },
            },
            legend: {
              textStyle: {
                color: "#fff",
              },
              data: [
                "隔热",
                "稀土",
                "其他",
                "隔热完成率",
                "稀土完成率",
                "其他完成率",
              ],
            },
            // echars 转折线和 echars下载
            // toolbox: {
            //   show: true,
            //   orient: "vertical",
            //   left: "right",
            //   top: "center",
            //   feature: {
            //     mark: { show: true },
            //     dataView: { show: true, readOnly: false },
            //     magicType: {
            //       show: true,
            //       type: ["line", "bar", "stack", "tiled"],
            //     },
            //     restore: { show: true },
            //     saveAsImage: { show: true },
            //   },
            // },
            dataZoom: {
              type: "slider",
              start: 0,
              end: 100,
              textStyle: {
                color: "#fff",
              },
            },
            xAxis: [
              ...monthList.map((e, i) => {
                return {
                  type: "category",
                  axisTick: { show: false },
                  position: "bottom",
                  data: this.setXdata(monthList, e, i),
                  axisLine: {
                    lineStyle: {
                      color: "rgb(255, 255, 255)",
                    },
                  },
                };
              }),
            ],
            yAxis: [
              {
                min: 0,
                splitLine: {
                  show: true,
                  //  改变轴线颜色
                  lineStyle: {
                    // 使用深浅的间隔色
                    color: ["rgba(255, 255, 255,.5)"],
                  },
                },
                axisLabel: {
                  formatter: "{value}",
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
              {
                type: "value",
                min: 0,
                max: 100,
                // interval: 5,
                axisLabel: {
                  formatter: "{value} %",
                },
                splitLine: {
                  show: false, //不显示网格线
                },
                splitArea: {
                  show: false, //不显示网格区域
                },
                axisLine: {
                  lineStyle: {
                    color: "rgb(255, 255, 255)",
                  },
                },
              },
            ],
            series: [
              ...newData,
              {
                name: "隔热完成率",
                type: "line",
                yAxisIndex: 1,
                smooth: false,
                data: newRate[0],
                itemStyle: {
                  normal: {
                    color: colorList[0],
                  },
                },
                symbol: "none",
              },
              {
                name: "稀土完成率",
                type: "line",
                yAxisIndex: 1,
                smooth: false,
                data: newRate[1],
                itemStyle: {
                  normal: {
                    color: colorList[1],
                  },
                },
                symbol: "none",
              },
              {
                name: "其他完成率",
                type: "line",
                yAxisIndex: 1,
                smooth: false,
                data: newRate[2],
                itemStyle: {
                  normal: {
                    color: colorList[2],
                  },
                },
                symbol: "none",
              },
            ],
          });
        }
      });
    },

    initChart3(categoryTotal) {
      this.chart3 = echarts.init(this.$refs.chart3);
      this.chart3.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: "inner",
        },
        series: [
          {
            name: "合同金额",
            type: "pie",
            center: ["45%", "50%"],
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, // hover 效果
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: categoryTotal.map((e) => {
              return { value: e.amount, name: e.category + "合同" };
            }),
            itemStyle: {
              emphasis: {
                shadowBlur: 1,
                shadowOffsetX: 0,
                shadowColor: "#fff",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{b}",
                  position: "inner",
                },
                labelLine: {
                  show: true,
                },
              },
            },
            // color: colorList,
            color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
          },
          {
            name: "合同数量",
            type: "pie",
            radius: ["35%", "55%"],
            center: ["45%", "50%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, // hover 效果
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: categoryTotal.map((e) => {
              return { value: e.total, name: e.category + "合同" };
            }),
            // data: [
            //   { value: 4, name: '合同1' },
            //   { value: 2, name: '合同2' },
            //   { value: 6, name: '合同3' },
            // ],，
            itemStyle: {
              emphasis: {
                shadowBlur: 1,
                shadowOffsetX: 0,
                shadowColor: "#fff",
              },
              normal: {
                label: {
                  show: true,
                  formatter: "{b}",
                  position: "inner",
                },
                labelLine: {
                  show: true,
                },
              },
            },
            // color: colorList,
            color: ["#5B8FF9", "#5AD8A6", "#5D7092"],
          },
        ],
      });
    },

    initChart4() {
      this.request({
        url: "/hx/operating/getCivilIndustryPic",
        method: "get",
        params: { type: 3 },
      }).then((res) => {
        if (200 == res.code) {
          let { list } = res.data;
          this.chart4 = echarts.init(this.$refs.chart4);
          this.setOptions4(list);
        }
      });
    },
    setOptions4(list) {
      this.chart4.setOption({
        tooltip: {
          trigger: "axis",
          // formatter: '{a1}<br/>{b1}：{c1}',
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 10,
          top: 30,
          bottom: 50,
        },
        dataZoom: {
          type: "slider",
          start: 0,
          end: this.dataZoomEnd(list.length, 7),
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          data: list.map((e) => e.deptName),
          axisLine: {
            lineStyle: {
              color: "rgb(255, 255, 255)",
            },
          },
        },
        color: ["#ccc", "red"],
        yAxis: [
          {
            min: 0,
            max: 100,
            interval: 20,
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                // 使用深浅的间隔色
                color: ["rgba(255, 255, 255,.5)"],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              lineStyle: {
                color: "rgb(255, 255, 255)",
              },
            },
          },
        ],
        series: [
          {
            name: "预测",
            type: "bar",
            z: "-1",
            barGap: "-100%",
            barWidth: 30,
            itemStyle: {
              color: "rgba(246, 217, 126, .2)",
            },
            data: list.map((e) => e.forecastIncome),
            // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
          },
          {
            name: "数量",
            type: "bar",
            barWidth: 30,
            position: [0, 0],
            itemStyle: {
              color: "rgba(246, 217, 126, 1)",
            },
            data: list.map((e) => e.realIncome),
            // data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tag {
  .title {
    width: 96px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    background: linear-gradient(
      270deg,
      rgba(39, 65, 128, 0.3) 0%,
      rgba(4, 169, 191, 0.6) 100%
    );
  }
}
._box {
  width: 162px;
  height: 275px;
  background-image: url(./img/right2/1.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  ._item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
