<template>
  <th-dialog
    ref="dialog"
    class="th-electric-graph"
    v-bind="dialogProps"
  >
    <div class="dialog-main-box">
      <th-form
        v-bind="form"
        :options="{
          equipid: equimentOptions,
          qxType: lineCharTypeOptions
        }"
        @handleSubmit="handleSubmit"
      />
      <div class="chart-wrap">
        <v-chart
          :loading="loading"
          :options="charOptions"
        />
      </div>
    </div>
  </th-dialog>
</template>

<script>
import VChart from 'vue-echarts'
import 'echarts/lib/chart/line'
// import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'

export default {
  name: 'ThElectricGraph',
  components: {
    VChart
  },
  props: {
    request: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      dialogProps: {
        title: '配变线路电流曲线',
        width: '1100px',
        buttons: [],
        showCancelButton: false
      },
      form: {
        loading: false,
        labelWidth: '123px',
        data: {
          equipid: '',
          qxType: '1',
          beginTime: '',
          endTime: ''
        },
        items: [
          {
            label: '设备名称',
            prop: 'equipid',
            component: 'select',
            style: {
              marginRight: 0,
              width: '260px'
            }
          },
          {
            label: '曲线类型',
            prop: 'qxType',
            component: 'select',
            style: {
              marginRight: 0,
              width: '260px'
            }
          },
          {
            label: '开始时间',
            prop: 'beginTime',
            component: 'date',
            props: {
              type: 'date',
              valueFormat: 'yyyy-MM-dd',
              clearable: true
            },
            style: {
              marginRight: 0,
              width: '260px'
            }
          },
          {
            label: '结束时间',
            prop: 'endTime',
            component: 'date',
            props: {
              type: 'date',
              valueFormat: 'yyyy-MM-dd',
              clearable: true
            },
            style: {
              marginRight: 0,
              width: '260px'
            }
          }
        ],
        buttons: [
          {
            label: '查询',
            key: 'Search'
          },
          {
            label: '实时查询',
            key: 'TimeSearch'
          }
        ]
      },
      row: null,
      equimentOptions: [],
      lineCharTypeOptions: [],
      charOptions: {
        backgroundColor: '#006265',
        grid: {
          top: 50,
          left: 70,
          right: 70,
          bottom: 50,
          containLabel: false,
          show: true,
          backgroundColor: '#222222',
          borderWidth: 0
        },
        title: {
          text: '',
          subtext: '',
          left: '50%',
          textAlign: 'center',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
            fontWeight: 800
          },
          subtextStyle: {
            color: '#ffffff',
            fontSize: 12,
            fontWeight: 800
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#006265',
          borderColor: '#ffffff',
          formatter: '{a} , {b} , {c}',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#006265'
            }
          }
        },
        legend: {
          type: 'plain',
          bottom: 5,
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLabel: {
            color: '#ffffff'
          },
          axisLine: {
            lineStyle: {
              color: '#04d22e',
              width: 2
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          nameLocation: 'middle',
          nameTextStyle: {
            color: '#ffffff',
            fontWeight: 800
          },
          axisLabel: {
            color: '#ffffff'
          },
          axisLine: {
            show: false
          }
        },
        series: [
          // {
          //   name: '邮件营销',
          //   type: 'line',
          //   data: [820, 932, 901, 934, 1290, 1330, 1320],
          //   smooth: true,
          //   selectedMode: 'single',
          //   selectedOffset: 30,
          //   clockwise: true,
          //   label: {
          //     normal: {
          //       textStyle: {
          //         fontSize: 18,
          //         color: '#235894'
          //       }
          //     }
          //   },
          //   labelLine: {
          //     normal: {
          //       lineStyle: {
          //         color: '#235894'
          //       }
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       opacity: 0.7,
          //       color: {
          //         image: undefined,
          //         repeat: 'repeat'
          //       },
          //       borderWidth: 3,
          //       borderColor: '#235894'
          //     }
          //   }
          // }
        ]
      }
    }
  },
  methods: {
    // 显示弹框
    showDialog(row) {
      if (row) {
        this.row = row
        this.form.data.equipid = row.equipmentId
        const t = row.happenTime.split(' ')
        this.form.data.beginTime = t.length ? t[0] : ''
        this.form.data.endTime = t.length ? t[0] : ''
        this.$refs.dialog.showDialog()
        this.fetchEquimentOptions(row)
        this.initParams('0')
      } else {
        this.$message.warning('请选择一行数据！')
      }
    },
    handleSearch() {
      this.initParams('0')
    },
    handleTimeSearch() {
      this.initParams('1')
    },
    // 点击查询
    handleSubmit(data, btn) {
      if (btn.key === 'Search') {
        this.handleSearch()
      } else if (btn.key === 'TimeSearch') {
        this.handleTimeSearch()
      }
    },
    // 获取设备列表
    fetchEquimentOptions(row) {
      if (row && row.equipmentId) {
        const params = {
          // unitid: row.unit_id,
          id: row.equipmentId
        }
        this.request.fetchEquimentOptions(params).then(res => {
          if (res.data.code === 0 && res.data.data) {
            this.equimentOptions = (res.data.data || []).map(d => {
              d.label = d.TEXT
              d.value = d.VALUE
              return d
            })
          }
        })
      }
    },
    initParams(isRealTime) {
      const params = {
        ...this.form.data,
        equipType: 'pdline',
        unitId: this.row.unitId,
        typeSelect: '1,2,3',
        glqxBox: 'T',
        ygqxBox: 'F',
        wgqxBox: 'F',
        isRealTime
      }
      this.fetchLineCharData(params)
    },
    // 获取曲线数据
    fetchLineCharData(params) {
      this.loading = true
      // ?typesel=1&checkbox=gl01&byqbh=117633&ddate=2019-04-26&cldbh=1019284
      // ?equipid=2723913                                   &sdate=2019-10-28&edate=2019-10-28&equiptype=pdline&unitid=2108&isRealTime=0&typeSelect=1,2,3&glqxBox=T&ygqxBox=F&wgqxBox=F&qxType=电流曲线

      this.request.fetchLineCharLineData(params).then(res => {
        this.loading = false
        if (res.data.code === 0 && res.data.data) {
          // const xmlStr = res.data.data.children[0]
          // const char = this.XmlStrToJson(xmlStr)
          const root = res.data.data
          this.charOptions.title = {
            ...this.charOptions.title,
            text: root.caption,
            subtext: root.subcaption
          }
          this.charOptions.xAxis = {
            ...this.charOptions.xAxis,
            name: root.xAxisName,
            data: root.children && root.children[0] && root.children[0].categoriesList[0] ? root.children[0].categoriesList[0].categoryList.map(a => a.label) : []
          }
          this.charOptions.yAxis = {
            ...this.charOptions.yAxis,
            name: root.yAxisName,
            min: root.yAxisMinValue
            // max: root.yAxisMaxValue
          }
          this.charOptions.legend = {
            ...this.charOptions.legend,
            show: root.showLegend === 1 ? true : false,
            backgroundColor: root.legendBgColor,
            borderColor: root.legendBorderColor
          }
          this.charOptions.tooltip = {
            ...this.charOptions.tooltip,
            trigger: 'item',
            show: root.showToolTip === 1 ? true : false,
            backgroundColor: root.toolTipBgColor,
            borderColor: root.toolTipBorderColor,
            formatter: '{a} , {b} , {c}(' + root.yAxisName + ')'
          }
          this.charOptions.textStyle = {
            fontSize: root.baseFontSize,
            color: root.baseFontColor
          }
          const obj = root.children && root.children[0] && root.children[0].trendLines && root.children[0].trendLines[0] ? root.children[0].trendLines[0] : null
          this.charOptions.series = root.children[0] ? root.children.map(s => {
            return {
              data: s.datasetList[0].setList.map(d => d.value),
              name: s.datasetList[0].seriesName,
              type: 'line',
              lineStyle: {
                width: parseInt(root.lineThickness)
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: root.baseFontSize,
                    color: '#' + s.datasetList[0].color
                  }
                }
              },
              markLine: {
                color: obj ? obj.color : '',
                lineStyle: {
                  type: obj && obj.dashed === 1 ? 'dashed' : 'solid',
                  with: obj ? obj.thickness : ''
                },
                data: [
                  {
                    name: obj ? obj.displayvalue : '',
                    yAxis: obj ? obj.startValue : '',
                    tooltip: {
                      text: obj ? obj.toolText : ''
                    }
                  }
                ]
              }
            }
          }) : []
        }
      })
    },
    // 获取
    fetchLineCharType() {
      if (this.request.fetchLineCharType) {
        this.request.fetchLineCharType().then(res => {
          if (res.data.code === 0 && this.$length(res.data.data)) {
            this.lineCharTypeOptions = res.data.data.map(d => {
              d.label = d.name
              d.value = d.code
              return d
            })
          }
        })
      }
    }
  }
}
</script>
