<template>
  <div class="mod-demo-echarts">
    <div :id="chartLineName" class="chart-box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
  props: {
    title: {
      type: String,
    },
    chartLineName: {
      type:String,
      default: 'echartLine',
    },
    mrGraphEntity: {
      type: Object,
      default: () => {
        return {};
      },
    },
    processCapability: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rcl: {
      type: Object,
      default: () => {
        return {};
      },
    },
    sl: {
      type: Object,
      default: () => {
        return {};
      },
    },
    xbarCL: {
      type: Object,
      default: () => {
        return {};
      },
    },
    yName1: {
      type: String,
    },
    yName2: {
      type: String,
    },
    lineIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      ruleList: [
        "违反规则一：控制图上有 1 个点位于三倍标准差以外",
        "违反规则二：连续 9 点落在中心线的用一侧",
        "违反规则三：连续 6 点递增或者递减",
        "违反规则四：连续 14 点中 相邻点 交替上下",
        "违反规则五：连续 3 点中 有 2 点 落在中心线同一侧，B区以外",
        "违反规则六：连续 5 点中 有 4点 落在中心线同一侧，C区以外",
        "违反规则七：连续 15 点 落在中心线两侧的C区内",
        "违反规则八：连续 8 点 落在中心线两侧，且无一点在C区内",
        "违反规则九：有 1 点落在规格线以外",
        "违反规则十：CPK小于目标值",
      ],
      upLine:[{name:'xbar',
      rules:'xbarUnsatisfiedRules'},{name:'xbar',
      rules:'xbarUnsatisfiedRules'},{name:'x',
      rules:'xUnsatisfiedRules'}],
      lowLine:[{name:'r',
      rules:'rUnsatisfiedRules'},{name:'s',
      rules:'sUnsatisfiedRules'},{name:'rs',
      rules:'rsUnsatisfiedRules'}]
      //testdata
    };
  },
  mounted() {},
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine1) {
      this.chartLine1.resize();
    }
  },
  methods: {
    // 折线图
    initChartLine() {
      const rclUcl = this.rcl.ucl;
      const xbarCL = this.xbarCL
      var option = {
        title: {
          text: this.title,
        },
        tooltip: {
          // 悬浮提示框
          trigger: "axis",
          boundaryGap: false,
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: (e) => {
            let alarmInfo = ''
            e[0].data.sRule?.forEach(item=>{
              alarmInfo += this.ruleList[item - 1]+'<br/>'
            })
            return `
               点位坐标: ${e[0].data.position}<br/>
               ${e[0].marker} 数值: ${e[0].data.value}<br/>
               ${e[0].marker} 规格: ${e[0].data.sl}<br/>
               ${e[0].marker} 异常信息:<br/> ${alarmInfo || "无"}
                `;
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        color: ["#f8f106", "#fe7576", "#a9b0d3", "#476fd4"],
        //多个图，就有多个grid,排序默认0、1、2....
        grid: [
          //0降雨
          { x: "7%", y: "7%", height: "40%", left: "10%" },
          //1水位流量
          { x: "7%", y2: "7%", height: "35%", left: "10%", bottom: "15%" },
        ],
        legend: {
          data: [this.yName1, this.yName2],
        },
        xAxis: [
          {
            show: false, //隐藏了x轴
            type: "category",
            gridIndex: 0, //对应前面grid的索引位置（第一个）
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              //interval:showNum,  //x轴显示的数量，我这里是动态算的
            },
          },
          {
            type: "category",
            gridIndex: 1, //对应前面grid的索引位置（第二个）
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              //interval:showNum,
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            gridIndex: 1,
            nameLocation: "middle",
            name: this.yName2,
            max: function(value) {
              if (rclUcl > value.max + 1) {
                return rclUcl + 0.5;
              } else {
                return value.max + 1;
              }
            },
            splitLine: { show: false },
            nameTextStyle: {
              padding: 38,
            },
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                //color: colors[2]
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            gridIndex: 0,
            name: this.yName1,
            max:  function(value) {
              if (xbarCL.ucl > value.max + 1) {
                return xbarCL.ucl + 0.5;
              } else {
                return value.max + 1;
              }
            },
            min:  function(value) {
              if (xbarCL.lcl < value.min - 1) {
                return xbarCL.lcl - 0.5;
              } else {
                return value.min - 1;
              }
            },
            splitLine: { show: false },
            nameTextStyle: {
              padding: 38,
            },
            nameLocation: "middle",
            position: "left",
            //nameLocation: 'start',//y轴name的位置
            //inverse: true,
            axisLine: {
              show: true,
              lineStyle: {
                //color: colors[1]
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
              },
            },
          },
        ],

        visualMap: [
          {
            // 折线颜色修改
            type: "piecewise",
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [],
            inRange: {
              // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
              color: "blue",
            },
            outOfRange: {
              // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
              color: "blue",
            },
          },
          {
            // 折线颜色修改
            type: "piecewise",
            show: false,
            dimension: 0,
            seriesIndex: 1,
            pieces: [],
            inRange: {
              // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
              color: "blue",
            },
            outOfRange: {
              // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
              color: "blue",
            },
          },
        ],
        dataZoom: [
          // 轴放大
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: 0,
            end: 100,
          },
          {
            show: true,
            yAxisIndex: 0,
            realtime: true,
            left: 6,
            start: 0,
            end: 100,
          },
          {
            show: true,
            yAxisIndex: 1,
            realtime: true,
            left: 6,
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: this.yName1,
            xAxisIndex: 0,
            yAxisIndex: 1,
            type: "line",
            smooth: true,
            symbol: "emptyDiamond", // 设定为实心点
            symbolSize: 10,
            lineStyle: {
              // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
              width: 1,
            },
            markLine: {
              // 最大值最小值均值线
              symbol: "none",
              label: {
                normal: {
                  show: true,
                  position: "end",
                  formatter: "{name|{b}}--{c}",
                  rich: {
                    name: {
                      color: "blue",
                      fontSize: 16,
                      fontWeight: 400,
                    },
                  },
                  textStyle: {
                    color: "black", //标注线终点文字颜色
                    fontSize: 14,
                    fontWeight: 400,
                  },
                },
              },
              data: [
                {
                  lineStyle: {
                    color: "#990000",
                    type: "solid",
                    width: 3,
                  },
                  name: "ucl",
                  yAxis: this.xbarCL.ucl,
                },
                {
                  lineStyle: {
                    color: "#990000",
                    type: [5, 10],
                    width: 3,
                    dashOffset: 5,
                  },
                  name: "cl",
                  yAxis: this.xbarCL.cl,
                },
                {
                  lineStyle: {
                    color: "#990000",
                    type: "solid",
                    width: 3,
                  },
                  name: "lcl",
                  yAxis: this.xbarCL.lcl,
                },
                {
                  lineStyle: {
                    color: "#009900",
                    type: "solid",
                    width: 3,
                  },
                  name: "usl",
                  yAxis: this.sl.usl,
                },
                {
                  lineStyle: {
                    color: "#009900",
                    type: "solid",
                    width: 3,
                  },
                  name: "sl",
                  yAxis: this.sl.sl,
                },
                {
                  lineStyle: {
                    color: "#009900",
                    width: 3,
                    type: "solid",
                  },
                  name: "lsl",
                  yAxis: this.sl.lsl,
                },
              ],
            },
            markPoint: {
              // 标记
              data: [],
              symbolSize: 50, // 标记的大小
              label: {
                // 标记单位
                fontSize: 10,
                formatter: "{c}", // 单位
              },
            },
            markArea: {
              // 以y轴分割的区域
              silent: false,
              data: [
                [
                  {
                    name: "",
                    itemStyle: {
                      color: "#fb512c",
                      opacity: 0.5,
                    },
                    yAxis: this.xbarCL.la[0],
                  },
                  {
                    yAxis: this.xbarCL.la[1],
                  },
                ],
                [
                  {
                    name: "",
                    itemStyle: {
                      color: "#ffcc33",
                      opacity: 0.5,
                    },
                    yAxis: this.xbarCL.lb[0],
                  },
                  {
                    yAxis: this.xbarCL.lb[1],
                  },
                ],
                [
                  {
                    name: "",
                    itemStyle: {
                      color: "#52b854",
                      opacity: 0.5,
                    },
                    yAxis: this.xbarCL.lc[0],
                  },
                  {
                    yAxis: this.xbarCL.uc[1],
                  },
                ],
                [
                  {
                    name: "",
                    itemStyle: {
                      color: "#ffcc33",
                      opacity: 0.5,
                    },
                    yAxis: this.xbarCL.ub[0],
                  },
                  {
                    yAxis: this.xbarCL.ub[1],
                  },
                ],
                [
                  {
                    name: "",
                    itemStyle: {
                      color: "#fb512c",
                      opacity: 0.5,
                    },
                    yAxis: this.xbarCL.ua[0],
                  },
                  {
                    yAxis: this.xbarCL.ua[1],
                  },
                ],
              ],
            },
            // areaStyle: {},
            data: this.mrGraphEntity.list?.map((item) => {
              const obj = {
                position: item.position,
                value: item[this.upLine[this.lineIndex].name],
                sRule: item[this.upLine[this.lineIndex].rules],
                sl:`ucl-${this.xbarCL.ucl.toFixed(2)} cl-${this.xbarCL.cl.toFixed(2)} lcl-${this.xbarCL.lcl.toFixed(2)} `
              };
              return obj;
            }),
          },
          {
            name: this.yName2,
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 0,
            type: "line",
            smooth: true,
            symbol: "emptyDiamond", // 设定为实心点
            symbolSize: 10,
            lineStyle: {
              // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
              width: 1,
            },
            markLine: {
              // 最大值最小值均值线
              symbol: "none",
              label: {
                normal: {
                  show: true,
                  position: "end",
                  formatter: "{name|{b}}--{c}",
                  rich: {
                    name: {
                      color: "blue",
                      fontSize: 16,
                      fontWeight: 400,
                    },
                  },
                  textStyle: {
                    color: "black", //标注线终点文字颜色
                    fontSize: 14,
                    fontWeight: 400,
                  },
                },
              },
              data: [
                {
                  lineStyle: {
                    color: "#990000",
                    type: "solid",
                    width: 3,
                  },
                  name: "ucl",
                  yAxis: this.rcl.ucl,
                },
                {
                  lineStyle: {
                    color: "#990000",
                    width: 3,
                    type: [5, 10],
                    dashOffset: 5,
                  },
                  name: "cl",
                  yAxis: this.rcl.cl,
                },
                {
                  lineStyle: {
                    color: "#990000",
                    width: 3,
                    type: "solid",
                  },
                  name: "lcl",
                  yAxis: this.rcl.lcl,
                },
              ],
            },
            markPoint: {
              // 标记
              data: [],
              symbolSize: 50, // 标记的大小
              label: {
                // 标记单位
                fontSize: 10,
                formatter: "{c}", // 单位
              },
            },
            // areaStyle: {},
            data: this.mrGraphEntity.list?.map((item) => {
              const obj = {
                position: item.position,
                value: item[this.lowLine[this.lineIndex].name],
                sRule: item[this.lowLine[this.lineIndex].rules],
                sl:`ucl-${this.rcl.ucl.toFixed(2)} cl-${this.rcl.cl.toFixed(2)} lcl-${this.rcl.lcl.toFixed(2)} `
              };
              return obj;
            }),
          },
        ],
      };
      this.mrGraphEntity.list?.forEach((item, index) => {
        if (item[this.lowLine[this.lineIndex].rules].length) {
          option.visualMap[1].pieces.push({
            gte: index,
            lt: index + 1,
            color: "red",
          });
          option.series[1].markPoint.data.push({
            value: item[this.lowLine[this.lineIndex].name],
            coord: [index, item[this.lowLine[this.lineIndex].name]],
          });
        }
      });
      this.mrGraphEntity.list?.forEach((item, index) => {
        if (item[this.upLine[this.lineIndex].rules].length) {
          option.visualMap[0].pieces.push({
            gte: index,
            lt: index + 1,
            color: "red",
          });
          option.series[0].markPoint.data.push({
            value: item[this.upLine[this.lineIndex].name],
            coord: [index, item[this.upLine[this.lineIndex].name]],
          });
        }
      });
      this.chartLine1 = echarts.init(document.getElementById(this.chartLineName));
      this.chartLine1.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine1.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  .chart-box {
    min-height: 700px;
    margin-top: 20px;
  }
}
</style>
