
<template>
  <div class="page" ref="page">
    <div style="height:100%">
      <a-spin :spinning="spinning" style="height:100%" size="large">
      <splitpanes style="height: 100%;background: #fff">
        <pane>
          <splitpanes horizontal style="background: #fff">
            <pane style="background: #fff;" :size="topHeight">
              <div class="header-chart">
                <div class="headerOne">
                  <div>时间</div>
                  <div style="color: #dc143c">实测井深</div>
                  <div style="color: #0000ff">钻头位置</div>
                </div>
                <div
                  v-for="(item, index) in chartList"
                  :key="index"
                  :class="[item.fix==='1'?'header-content-fix':'header-content']"
                  :style="[{width:item.width+'px'}]"
                >
                  <draggable
                    class="slick-list"
                    group="site"
                    animation="300"
                    dragClass="dragClass"
                    ghostClass="ghostClass"
                    chosenClass="chosenClass"
                    style="background-color: #f3f3f3"
                    v-model="item.children"
                    @end="draggableEnd"
                  >
                    <transition-group style="height: 100%;display: flex;flex-direction: column;">
                      <div
                        class="slick-item"
                        v-for="(item2, index2) in item.children"
                        :index="index2"
                        :key="index2"
                        :data-id="item.id"
                        @contextmenu.prevent="customClick($event,item.key,item2.key)"
                      >
                        <div
                          class="t-header"
                          :style="{ color: item2.color }"
                        >
                          <div style="text-align: center">
                            {{ item2.title }}
                          </div>
                          <a-divider
                            :style="{
                              margin: '0px',
                              background: item2.color,
                              height: '2px'
                            }"
                          />
                          <div style="display: flex">
                            <span style="flex: 1; text-align: left">
                              {{ item2.minNum }}
                            </span>
                            <span style="flex: 1; text-align: center">{{
                              item2.unit
                            }}</span>
                            <span style="flex: 1; text-align: right">{{
                              item2.maxNum
                            }}</span>
                          </div>
                        </div>
                      </div>
                    </transition-group>
                  </draggable>
                </div>
              </div>
            </pane>
            <pane style="overflow: visible; background: #fff" :size="bottomHeight">
              <div style="width:100%;height:100%;display:flex;">
                <div class="content">
                  <div class="time-list">
                    <div style="width:40px;height:100%;margin-left:auto" id="timeChart"></div>
                  </div>
                  <div class="chart">
                    <div
                      id="chartContent"
                      :class="[item.fix==='1'?'chart-item-fix':'chart-item']"
                      :style="[{width:item.width+'px'}]"
                      v-for="(item, index) in chartList"
                      :key="index"
                    >
                      <div
                        v-if="echartsList.length==chartList.length"
                        append-to-body
                        :id="echartsList[index].id"
                        :style="{ width: '100%', height: '100%' }"
                      ></div>
                    </div>
                  </div>
                </div>
                <div style="width:2%;height:100%" id="dataZoomChart"></div>
              </div>
            </pane>
          </splitpanes>
        </pane>
      </splitpanes>
      </a-spin>
    </div>
    <a-modal title="新增曲线道" @ok="handleOk" width="1000px" v-model="addVisible">
      <AddOptions ref="addOptionsModel" :chartKey="newTrackKey" v-if="addVisible"/>
    </a-modal>
    <a-modal v-model="OpVisible" title="配置" @ok="handleOptionsOk" width="1000px">
      <ChartOptions ref="chartOptionsModel" :selectedKey="selectedKey" :configureKey="selectedConfigureKey" v-if="OpVisible"/>
    </a-modal>
    <a-menu class="menustyle" :style="menuStyle" v-if="menuVisible" id="menu" >
      <a-menu-item>
        <a @click="showOptionsModal">配置</a>
      </a-menu-item>
      <a-menu-item>
        <a @click="deleteChart">删除</a>
      </a-menu-item>
      <a-menu-item>
        <a @click="showModal('r')">右侧新增曲线道</a>
      </a-menu-item>
      <a-menu-item>
        <a @click="showModal('l')">左侧新增曲线道</a>
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { Splitpanes, Pane } from 'splitpanes'
import { mapState } from 'vuex'
import draggable from 'vuedraggable'
import elementResizeDetectorMaker from 'element-resize-detector'
import { getYdata } from '../part1/data'
import AddOptions from '@/views/form/addOptions'
import ChartOptions from '@/views/form/chartOptions'
import AddTemplate from '@/views/form/addTemplate'
import {getDateStr} from '@/utils/util'
import { getChartTreeList,deleteLine,moveLine,addByDirection, getDataByTime,getYData } from '@/api/api'

export default ({
  name: 'IndexEChats',
  components: {
    Splitpanes,
    Pane,
    draggable,
    AddOptions,
    ChartOptions,
    AddTemplate
  },
  data () {
    return {
      chart: null,
      timeChart: null,
      menuVisible: false,
      addVisible: false,
      OpVisible: false,
      topHeight:37,
      bottomHeight:63,
      menuStyle: {
        position: 'absolute',
        top: '0',
        left: '0',
        zIndex: 1,
        borderRadius: '5px',
        border: '1px solid #eee'
      },
      spinning:false,
      // 选中的曲线
      selectedKey: undefined,
      // 选中的曲线道
      selectedPKey: undefined,
      // 选中的配置项key
      selectedConfigureKey: '1',
      // 新增时新的曲线道key
      newTrackKey: undefined,
      // 新增曲线道方向
      direction: 'r',
      // 当前显示深度还是时间
      yType: 'time',
      //计时器
      timer:null,
      time1:'2017-04-19 00:00:00',
      time2:'2017-04-19 02:00:00',
      // 时间数据
      timeData: [],
      // 深度数据
      deepData: [
        '0',
        '100',
        '200',
        '300',
        '400',
        '500',
        '600',
        '700',
        '800',
        '900',
        '1000',
        '1100',
        '1200',
        '1300',
        '1400',
        '1500'
      ],
      // echarts实例
      echartsList: [{chart:null,id:''}],
      // 当前图表数据
      chartList: [
      ]
    }
  },
  created () {
    //this.getYData2()
  },
  async mounted () {
   await this.getData()
    this.$nextTick(() => {
      this.initChart()
      let headerHeight=0
      this.chartList.forEach((item)=>{
        if(item.children.length>headerHeight){
          headerHeight=item.children.length
        }
      })
      const pageHeight=this.$refs.page.offsetHeight
      this.topHeight= (headerHeight*43)/pageHeight*100
      this.bottomHeight=100-this.topHeight
    })
    const _this = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('chartContent'), element => {
      _this.$nextTick(() => {
        _this.chartResize()
      })
    })
  },
  beforeDestroy () {
  },
  methods: {
    /* 循环加载图表数据 */
    loadChartData(){
      this.time1='2017-04-19 00:00:00'
      this.time2='2017-04-19 02:00:00'
      this.spinning=true
      this.getIntervalTime()
    },
    /* 获取数据 */
   async getData () {
      const _this=this
      await getChartTreeList({id:this.selectedConfigureKey}).then((res)=>{
        if(res.success){
           _this.chartList=[...res.result[0].children]
           _this.yType=res.result[0].yType
            let echartsItem
          _this.echartsList.forEach(item => {
              if (item.chart != null) {
                item.chart.dispose()
                item.chart = null
              }
            })
           _this.echartsList = []
           _this.chartList.forEach(item => {
             echartsItem = { chart: null, id: 'chart' + item.id }
             _this.echartsList.push(echartsItem)
          })
        }
      })
    },
    async getchartData(){
      const _this=this
      await getChartTreeList({id:this.selectedConfigureKey}).then((res)=>{
        if(res.success){
           _this.chartList=[...res.result[0].children]
        }
      })
    },
    async getIntervalTime(){
      clearTimeout(this.timer)
      this.timer=null
      let timeDate1=new Date(this.time1)
      let timeDate2=new Date(this.time2)
      if(timeDate2<new Date('2017-04-20 00:00:00')){
        await this.getDataByTime()
        const _this=this
        timeDate1=new Date(timeDate1.getTime()+1000*60*60*2)
        timeDate2=new Date(timeDate2.getTime()+1000*60*60*2)
        this.time1=getDateStr(timeDate1)
        this.time2=getDateStr(timeDate2)
        this.timer= setTimeout(function () {
                                _this.getIntervalTime();
                            }, 500);
      }else{
        await this.getDataByTime()
        this.spinning=false
        this.time1='2017-04-19 00:00:00'
        this.time2='2017-04-19 02:00:00'
      }
    },
    /* 接口获取图表数据 */
    async getDataByTime(){
      const params={jh:'',time1:this.time1,time2:this.time2}
      const _this=this
      await getDataByTime(params).then((res)=>{
        if(res.success){
            _this.echartsList.forEach((item, index) => {
            const series = []
            let op=item.chart.getOption()
              _this.chartList[index].children.forEach((item2, index2) => {
                const data=[]
                res.result.forEach((itemRes)=>{
                  const dataItem=[]
                  dataItem.push(itemRes[item2.dataSource.toLowerCase()])
                  dataItem.push(itemRes.time)
                  data.push(dataItem)
                })
                if(item2.data===undefined||item2.data===null){
                  item2.data=[]
                }
                item2.data.push(...data)
                op.series[index2].data.push(...data)
                const serItem = {
                  data: data
                }
                series.push(serItem)
              })
           // op.series=series
            item.chart.setOption(op)
        })
        }
      })
    },
    /* 删除曲线 */
    deleteChart () {
       const _this = this
       this.$confirm({
        title: '是否确认删除此曲线?',
        onOk () {
           const chartIndex = _this.chartList.findIndex(n => n.key === _this.selectedPKey)
           const newChartData = _this.chartList[chartIndex].children.filter(item => {
           if (item.key === _this.selectedKey) {

            } else {
              return item
            }
           })
           _this.setOptions2(newChartData, _this.echartsList[chartIndex].chart)
           _this.chartList[chartIndex].children=[...newChartData]
           deleteLine({id:_this.selectedKey.split('-')[2]}).then((res)=>{
                 if (res.success) {
                    _this.$message.success(res.message);
                    //_this.getchartData()
                  } else {
                    _this.$message.warning(res.message);
                  }
            })
        },
        onCancel () {}
      })
    },
    /* 显示曲线配置 */
    showOptionsModal () {
      this.OpVisible = true
    },
    handleOptionsOk (e) {
      this.OpVisible = false
    },
    /* 新增曲线道 */
    showModal (direction) {
      this.direction = direction
      this.newTrackKey = this.selectedConfigureKey + '-' + this.chartList.length
      this.addVisible = true
    },
    /* 新增曲线道 */
    handleOk (e) {
      if (this.$refs.addOptionsModel.treeData[0].children.length === 0) {
        this.$message.warning('请添加曲线')
        return
      }
      const parms={
        direction:this.direction,
        tempId:this.selectedConfigureKey,
        trackId:this.selectedPKey,
        newTrack:this.$refs.addOptionsModel.treeData[0]
      }
      const _this=this
      addByDirection(parms).then((res)=>{
         if(res.success){
            _this.getData().then((res)=>{
              _this.$nextTick(() => {
                _this.initChart()
              })
            })
        }else{
           _this.$message.warning(res.message);
        }
      })
      this.addVisible = false
    },
    /* 初始化图表 */
    initChart () {
       this.echartsList.forEach(item => {
          if (item.chart != null) {
            item.chart.dispose()
            item.chart = null
          }
        })
        const chartsList = []
        for (let i = 0; i < this.chartList.length; i++) {
          this.echartsList[i].chart = echarts.init(document.getElementById(this.echartsList[i].id))
          window.onresize = this.echartsList[i].chart.resize
          this.setOptions(this.chartList[i], this.echartsList[i])
          chartsList.push(this.echartsList[i].chart)
        }
        this.chart = echarts.init(document.getElementById('dataZoomChart'))
        this.timeChart = echarts.init(document.getElementById('timeChart'))
        window.onresize = this.chart.resize
        window.onresize = this.timeChart.resize
        this.dataZoomSetOptions(this.chart)
        this.timeSetOptions(this.timeChart)
        chartsList.push(this.chart)
        chartsList.push(this.timeChart)
        echarts.connect(chartsList)
        this.loadChartData()
    },
    /* 数据图表配置 */
    setOptions (chartData, chart) {
      const options = {
        animation:false,
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: false
        },
        dataZoom: [
          {
            type: 'inside',
            throttle:10,
            yAxisIndex: 0,
            filterMode: 'none',
            start: 0,
            end: 100
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            show: false,
            filterMode: 'none',
            handleSize: '100%',
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleStyle: {
              color: '#0B3C6F',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            width: '7px',
            bottom: '10px',
            top: '5px'
          }
        ],
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: function () {
              return ''
            }
          }
        },
        yAxis: {
          type: 'time',
          axisLine: { onZero: true, show: false },
          axisTick: { show: false },
          boundaryGap: false,
          min:'2017-04-19 00:01:00',
          max:'2017-04-20 02:00:00',
          maxInterval: 3600 * 24 * 1000,
          splitNumber:11,
          splitLine: { // 网格线
            'show': true
          },
          axisLabel: {
            formatter: function () {
              return ''
            }
          },
          data: this.yType === 'time' ? this.timeData : this.deepData,
          inverse: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.6)',
          axisPointer: {
            label: {
              formatter: this.yType === 'time' ? '时间：{value}' : '深度：{value}',
              backgroundColor: '#777'
            }
          }
        }
      }
      const series = []
      const xAxis=[]
      chartData.children.forEach((item, index) => {
        const serItem = {
          name: item.title+'('+item.unit+")",
          id:item.id,
          type: 'line',
          //sampling: 'lttb',//降采样策略,
          symbolSize: 10,
          symbol: 'circle',
          smooth: item.lineStyle === 'smooth',
          showSymbol: false,
          hoverAnimation: false,
          step: item.lineStyle === 'step', // 阶梯线
          itemStyle: {
            width: 1,
            color: item.color,
            style: 'solid'
          },
          emphasis: {
            focus: 'series'
          },
          markPoint:{
            data:[
              {
               type:'max',
               name: '最大值'
              },
              {
               type:'min',
               name: '最小值'
              }
            ]
          },
          xAxisIndex:index,
          z:20-index,
          data: []
        }
        let minSpreadNum
        let maxSpreadNum
        if(item.spread==='1'){
          minSpreadNum=Math.ceil(Number(item.minNum) / 10) * 10
          maxSpreadNum=Math.ceil(Number(item.maxNum) / 10) * 10
        }else{
          minSpreadNum=Number(item.minNum)
          maxSpreadNum=Number(item.maxNum)
        }
        const xItem={
           type: 'value',
           axisLabel: {
            formatter: function () {
              return ''
            }
           },
          min:minSpreadNum,
          max:maxSpreadNum
        }
        series.push(serItem)
        xAxis.push(xItem)
      })
      options.series = series
      options.xAxis=xAxis
      chart.chart.setOption(options)
    },
     /* 数据图表配置2 */
    setOptions2 (chartData, chart) {
      const options = chart.getOption()
      options.yAxis = {
          type: 'time',
          axisLine: { onZero: true, show: false },
          axisTick: { show: false },
          min:'2017-04-19 00:01:00',
          max:'2017-04-20 02:00:00',
          maxInterval: 3600 * 24 * 1000,
          splitNumber:11,
          boundaryGap: false,
          splitLine: { // 网格线
            'show': true
          },
          axisLabel: {
            formatter: function () {
              return ''
            }
          },
          data: this.yType === 'time' ? this.timeData : this.deepData,
          inverse: true
        }
      options.tooltip = {
        show: false,
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.6)',
          axisPointer: {
            label: {
              formatter: this.yType === 'time' ? '时间：{value}' : '深度：{value}',
              backgroundColor: '#777'
            }
          }
      }
      const series = []
      const xAxis=[]
      chartData.forEach((item, index) => {
        let data=[]
        options.series.forEach((sItem)=>{
          let name=item.title+'('+item.unit+")"
          if(sItem.name===name){
            data=sItem.data
            if(item.data===undefined||item.data===null||item.data.length===0){
              item.data=[]
              item.data.push(...data)
            }
          }
        })
        if(data.length===0){
          data=item.data
        }
        const serItem = {
          name: item.title+'('+item.unit+")",
          id:item.id,
          sampling: 'lttb',//降采样策略,
          type: 'line',
          symbolSize: 10,
          symbol: 'circle',
          smooth: item.lineStyle === 'smooth',
          showSymbol: false,
          step: item.lineStyle === 'step', // 阶梯线
          data:data,
          itemStyle: {
            width: 0.5,
            color: item.color,
            style: 'solid'
          },
          emphasis: {
            focus: 'series'
          },
          xAxisIndex:index,
          z:20-index
        }
         let minSpreadNum
        let maxSpreadNum
        if(item.spread==='1'){
          minSpreadNum=Math.ceil(Number(item.minNum) / 10) * 10
          maxSpreadNum=Math.ceil(Number(item.maxNum) / 10) * 10
        }else{
          minSpreadNum=Number(item.minNum)
          maxSpreadNum=Number(item.maxNum)
        }
        const xItem={
           type: 'value',
           axisLabel: {
            formatter: function () {
              return ''
            }
           },
          min:minSpreadNum,
          max:maxSpreadNum
        }
        series.push(serItem)
        xAxis.push(xItem)
      })
      options.series = series
      options.xAxis=xAxis
      chart.setOption(options, true)
    },
    /* 配置左侧刻度轴和右侧伸缩轴 */
    setBothOptions () {
      const timeOptions = this.timeChart.getOption()
      timeOptions.yAxis = {
          type: 'category',
          axisLine: { onZero: false, show: true },
          axisTick: { show: true },
          boundaryGap: false,
          splitLine: { // 网格线
            'show': false
          },
          data: this.yType === 'time' ? this.timeData : this.deepData,
          inverse: true
        }
      this.timeChart.setOption(timeOptions, true)
      const zoomOptions = this.chart.getOption()
      zoomOptions.yAxis = {
          type: 'category',
          axisLine: { onZero: false, show: false },
          axisTick: { show: false },
          boundaryGap: false,
          splitLine: { // 网格线
            'show': false
          },
          axisLabel: {
            formatter: function () {
              return ''
            }
          },
          data: this.yType === 'time' ? this.timeData : this.deepData,
          inverse: true
        }
      this.chart.setOption(zoomOptions, true)
    },
    /* 拖拽之后的处理 */
    draggableEnd (e) {
      const oldIndex = this.chartList.findIndex(n => n.id === e.from.firstChild.dataset.id)
      const oldTrack=this.chartList[oldIndex]
      const newIndex=this.chartList.findIndex(n => n.id === e.to.firstChild.dataset.id)
      const newTrack=this.chartList[newIndex]
      const prms={
        oldTrack:oldTrack,
        newTrack:newTrack
      }
        const _this=this
        moveLine(prms).then((res)=>{
          if(res.success){
            getChartTreeList({id:this.selectedConfigureKey}).then((res)=>{
              if(res.success){
                setTimeout(() => {
                  _this.setOptions2(_this.chartList[oldIndex].children, this.echartsList[oldIndex].chart)
                }, 100);
                setTimeout(() => {
                  _this.setOptions2(_this.chartList[newIndex].children, this.echartsList[newIndex].chart)
                }, 100);
                _this.chartList[oldIndex].children.forEach((item,i)=>{
                   item.key= res.result[0].children[oldIndex].children[i].key
                   item.id=res.result[0].children[oldIndex].children[i].id
                })
                _this.chartList[newIndex].children.forEach((item,i)=>{
                   item.key= res.result[0].children[newIndex].children[i].key
                   item.id=res.result[0].children[newIndex].children[i].id
                })
              }
            })
          } else {
            _this.$message.warning(res.message);
          }
      })
    },
    /* 伸缩条配置 */
    dataZoomSetOptions (chart) {
      const options = {
        animation:false,
         grid: {
          left: '0',
          right: '0',
          bottom: '-3%',
          top: '0',
          containLabel: true
        },
         dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'none',
            start: 0,
            end: 100
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            show: true,
            filterMode: 'none',
            handleSize: '100%',
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleStyle: {
              color: '#0B3C6F',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            right: '12px',
            width: '13px',
            bottom: '10px',
            top: '5px'
            // eslint-disable-next-line
          },
        ],
         xAxis: {
          type: 'value',
          axisLabel: {
            formatter: function () {
              return ''
            }
          }
        },
        yAxis: {
          type: 'time',
          axisLine: { onZero: false, show: false },
          axisTick: { show: false },
          boundaryGap: false,
          min:'2017-04-19 00:00:00',
          max:'2017-04-20 02:00:00',
          maxInterval: 3600 * 24 * 1000,
          splitNumber:11,
          splitLine: { // 网格线
            'show': false
          },
          axisLabel: {
            formatter: function () {
              return ''
            }
          },
          data: this.yType === 'time' ? this.timeData : this.deepData,
          inverse: true
        },
        tooltip: {
          show: false
        }
      }
      chart.setOption(options)
    },
    /* 时间轴配置 */
    timeSetOptions (chart) {
      let a=getYdata()
      const data=[]
      a.forEach((item)=>{
        const dataItem=[]
        dataItem.push('')
        dataItem.push(item)
        data.push(dataItem)
      })
      const options = {
        animation:false,
         grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: true
        },
         dataZoom: [
          {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'none',
            start: 0,
            end: 100
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            show: false,
            filterMode: 'none',
            handleSize: '100%',
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleStyle: {
              color: '#0B3C6F',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            right: '12px',
            width: '13px',
            bottom: '10px',
            top: '5px'
          }
        ],
         xAxis: {
          type: 'value',
          axisLabel: {
            formatter: function () {
              return ''
            }
          }
        },
        yAxis: {
          type: 'time',
          axisLine: { onZero: false, show: true },
          axisTick: { show: true },
          boundaryGap: false,
          min:'2017-04-19 00:00:00',
          max:'2017-04-20 02:00:00',
          maxInterval: 3600 * 24 * 1000,
          splitNumber:11,
          splitLine: { // 网格线
            'show': false
          },
          axisLabel:{
            formatter: '{HH}:{mm}'
          },
          data: this.yType === 'time' ? this.timeData : this.deepData,
          inverse: true
        },
        tooltip: {
          show: false
        },
        series: [{
           name: '',
            type: 'line',
            sampling: 'lttb',//降采样策略,
            data: data
        }]
      }
      chart.setOption(options)
    },
    showTip (i) {
      if(this.echartsList[i].chart!=null){
         this.echartsList[i].chart.setOption({
          tooltip: {
          show: true
          }
        })
      }
    },
    hideTip (i) {
     if(this.echartsList[i].chart!=null){
         this.echartsList[i].chart.setOption({
          tooltip: {
          show: false
          }
        })
      }
    },
    chartResize () {
      this.chart.resize()
      this.timeChart.resize()
      this.echartsList.forEach(item => {
        if(item.chart!=null){
          item.chart.resize()
        }
      })
    },
    /* 右键点击 */
    customClick (MouseEvent, pKey, key) {
      this.selectedPKey = pKey
      this.selectedKey = key
      this.menuVisible = false
      this.menuVisible = true
      document.addEventListener('click', this.foo)
      this.menuStyle.top = MouseEvent.clientY + 'px'
      this.menuStyle.left = MouseEvent.clientX + 'px'
      return false
    },
    foo () {
      this.menuVisible = false
      document.removeEventListener('click', this.foo)
    }
  },
  computed: {
    ...mapState({
    lineConfigSelected: state => state.lineConfig.lineConfigSelected
    }),
     ...mapState({
    chartOptions: state => state.lineConfig.chartData
    }),
    ...mapState({
    configureKey: state => state.lineConfig.configureKey
    })
   },
  watch: {
    // lineConfigSelected (config) {
    //   const value = config.key
    //   if (value.indexOf('second') === 0) {
    //     this.selectedConfigureKey = '1'
    //     this.getData()
    //     this.initChart()
    //   } else {
    //     this.selectedConfigureKey = '1'
    //     this.getData()
    //     this.initChart()
    //   }
    // },
    chartOptions(value) {
      if(value!=undefined){
         const type=value.split('_')[0]
         const _this=this
          if(type==='update'){
            if (this.configureKey === this.selectedConfigureKey) {
              this.getchartData().then((res)=>{
                _this.echartsList.forEach((item, index) => {
                  _this.setOptions2(_this.chartList[index].children, item.chart)
                })
              })
            }
          }
          if(type==='init'){
              _this.getData().then((res)=>{
              _this.$nextTick(() => {
                _this.initChart()
              })
            })
          }
      }
   }
  }
})
</script>
<style scoped>
.page {
  background: #fff;
  font-size: 5px;
  font-weight: 500;
  height: 100%;
}
.ghostClass {
    background-color: #d3d7d4 !important;
    border: 1px solid #74787c;
}
.ant-spin-nested-loading /deep/ .ant-spin-container{
  height: 100%;
}
.chosenClass {
    background-color: #d3d7d4 !important;
    opacity: 1 !important;
    border: 1px solid #74787c;
}
.dragClass {
    background-color: #d3d7d4 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
    border: 1px solid #74787c;
}
.splitpanes /deep/ .splitpanes__splitter{
  width: 98%;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.header-chart {
  background: #fff;
  width: 98%;
  display: flex;
  height: 100%;
}
.headerOne {
  width: 120px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.content {
  width: 98%;
  height: 100%;
  display: flex;
  background: #fff;
}
.header-content {
  flex: 1;
  border: 1px solid black;
  margin-left: -1px;
}
.header-content-fix {
  border: 1px solid black;
  margin-left: -1px;
}
.slick-list {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.slick-item:nth-last-child(1) {
  border-bottom: 0px;
}
.slick-item {
  background: #fff;
  flex: 1;
  transform:scale(1);
  border-bottom: 1px solid black;
}
.slick-item:hover{
  transform: scale(1.2);
  background: #d3d7d4;
  cursor: move;
}
.t-header {
  width: 100%;
  min-height: 37px;
  height: 100%;
  padding: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.time-content {
  width: 120px;
  height: 16.7%;
  text-align: center;
  border-bottom: 1px solid black;
  position: relative;
}
.time-list {
  width: 120px;
  height: 100%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.time {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
}
.chart {
  flex: 1;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
}
.chart-item {
  flex: 1;
  border-right: 1px solid black;
}
.chart-item-fix {
  border-right: 1px solid black;
}
.chart-item:nth-last-child(1) {
  border-right: 0;
}
</style>
