<template>
  <div ref="main" :style="{width: config.width, height: config.height}">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getConfigByName, runLogic } from '@vue2-client/services/api/common'

export default {
  name: 'XChart',
  props: {
    // 配置名
    queryParamsName: {
      type: String,
      default: ''
    },
    // 服务名
    serviceName: {
      type: String,
      default: 'af-his'
    }
  },
  data () {
    return {
      data: [],
      // 配置项
      config: {},
      // 标准值
      standardValue: 0,
      // 标准差
      sd: 0
    }
  },
  mounted () {
  },
  methods: {
    initDome (queryParamsName, parameter) {
      getConfigByName(queryParamsName, 'af-his', async (res) => {
        this.config = res
        console.log('res', res)
        runLogic(res.data, parameter, 'af-his').then(result => {
          if (result != 0) {
            this.standardValue = result[0][this.config.standardValue] != null ? result[0][this.config.standardValue] : 0
            this.sd = result[0].sd
            const listData = result.map(item => [item.x, item.y])
            this.data = listData
            this.renderChart()
          } else {
            this.$message.warn('没有获取到结果数据')
          }
        })
      })
    },
    // 渲染图表
    renderChart () {
      const chartDom = this.$refs.main
      const myChart = echarts.init(chartDom)

      // 计算控制线
      const centerLine = this.standardValue
      const sd1Upper = centerLine + this.sd
      const sd1Lower = centerLine - this.sd
      const sd2Upper = centerLine + 2 * this.sd
      const sd2Lower = centerLine - 2 * this.sd
      const sd3Upper = centerLine + 3 * this.sd
      const sd3Lower = centerLine - 3 * this.sd

      // 计算y轴范围，让靶值居中
      const yMin = centerLine - this.sd * 4
      const yMax = centerLine + this.sd * 4

      const option = {
        title: {
          text: this.config.title,
          subtext: this.config.subtext,
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          },
          subtextStyle: {
            fontSize: 12,
            color: '#666'
          }
        },
        legend: {
          bottom: 10,
          data: ['测量值', '中心线', '±1SD', '±2SD', '±3SD']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            let result = `第${params[0].data[0]}次测量<br/>`
            params.forEach(param => {
              if (param.seriesName === '测量值') {
                result += `${param.seriesName}: ${param.data[1]}<br/>`
              }
            })
            return result
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          name: '测量次数',
          nameLocation: 'middle',
          nameGap: 30,
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: this.config.formatter,
          nameLocation: 'middle',
          nameGap: 50,
          nameTextStyle: {
            color: '#333',
            fontSize: 12
          },
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#333'
            }
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            show: true,
            rotate: 0
          },
          min: yMin,
          max: yMax,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#ddd'
            }
          }
        },
        series: [
          {
            type: 'line',
            data: this.data,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: '#1890ff',
              width: 2
            },
            itemStyle: {
              color: '#1890ff',
              borderColor: '#fff',
              borderWidth: 2
            },
            markLine: {
              silent: true,
              symbol: 'none',
              lineStyle: {
                color: '#52c41a',
                width: 2,
                type: 'solid'
              },
              data: [
                {
                  yAxis: centerLine,
                  label: {
                    formatter: `中心线: ${centerLine}`,
                    position: 'insideEndTop'
                  }
                },
                {
                  yAxis: sd1Upper,
                  lineStyle: {
                    color: '#faad14',
                    type: 'dashed'
                  },
                  label: {
                    formatter: `+1SD: ${sd1Upper.toFixed(2)}`,
                    position: 'insideEndTop'
                  }
                },
                {
                  yAxis: sd1Lower,
                  lineStyle: {
                    color: '#faad14',
                    type: 'dashed'
                  },
                  label: {
                    formatter: `-1SD: ${sd1Lower.toFixed(2)}`,
                    position: 'insideEndBottom'
                  }
                },
                {
                  yAxis: sd2Upper,
                  lineStyle: {
                    color: '#ff7a45',
                    type: 'dashed'
                  },
                  label: {
                    formatter: `+2SD: ${sd2Upper.toFixed(2)}`,
                    position: 'insideEndTop'
                  }
                },
                {
                  yAxis: sd2Lower,
                  lineStyle: {
                    color: '#ff7a45',
                    type: 'dashed'
                  },
                  label: {
                    formatter: `-2SD: ${sd2Lower.toFixed(2)}`,
                    position: 'insideEndBottom'
                  }
                },
                {
                  yAxis: sd3Upper,
                  lineStyle: {
                    color: '#ff4d4f',
                    type: 'dashed'
                  },
                  label: {
                    formatter: `+3SD: ${sd3Upper.toFixed(2)}`,
                    position: 'insideEndTop'
                  }
                },
                {
                  yAxis: sd3Lower,
                  lineStyle: {
                    color: '#ff4d4f',
                    type: 'dashed'
                  },
                  label: {
                    formatter: `-3SD: ${sd3Lower.toFixed(2)}`,
                    position: 'insideEndBottom'
                  }
                }
              ]
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  },
  watch: {
    queryParamsName: {
      deep: true,
      immediate: true,
      handler (val) {
        console.log('queryParamsName', val)
        this.initDome(val, {})
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
