<template>
    <div ref="page" :class="[warnTheme=='dark'?'page-dark':'page']">
      <a-spin :spinning="spinning" style="height:100%" size="large">
        <div class="main-chart">
             <div class="header-chart">
              <div class="headerOne">
                <a-radio-group style="margin-top:0px;flex:1" default-value="zjy" @change="goLtd" v-if="ltd==1">
                  <a-radio value="ltd" style="display:block" > 录井仪 </a-radio>
                  <a-radio value="zjy" style="display:block"> 钻井液 </a-radio>
                </a-radio-group>
                <div :style="{marginTop:ltd==1?'30px':'80px'}">时间</div>
                <a-date-picker @change="onTimeChange" :disabled-date="disabledDate" v-model="time"  size="small" style="width:118px;"/>
              </div>
              <div
                  v-for="(item, index) in chartList"
                  :key="index"
                  :class="[item.fix==='1'?'header-content-fix':'header-content']"
                  :style="[{width:item.width+'px'}]"
                  v-if="index<3"
              >
                  <div
                      class="slick-item"
                      v-for="(item2, index2) in item.children"
                      :index="index2"
                      :key="index2"
                      :data-id="item.id"
                      >
                  <div
                      class="t-header"
                      :style="{ color: item2.color }"
                  >
                      <div style="text-align: center">
                      <a v-if="item2.opacity===0" @click="hideChart(item2.title+'('+item2.unit+')',item2.id,0)"><a-icon type="eye-invisible" theme="filled" style="font-size:15px;color:#d71345"/></a>
                      <a v-else @click="hideChart(item2.title+'('+item2.unit+')',item2.id,1)"><a-icon type="eye" theme="filled" style="font-size:15px;color:#009ad6"/></a>
                      {{ item2.title+item2.val }}
                      </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>
              </div>
                <div
                  :class="[chartList[3].fix==='1'?'header-content-fix':'header-content']"
                  :style="[{width:chartList[3].width+'px'}]"
                  v-else
              >
                  <div class="slick-item">
                  <div class="t-header" :style="{ color: chartList[3].children[0].color }" >
                      <div style="text-align: center">
                      <a 
                        v-if="chartList[3].children[0].opacity===0" 
                        @click="hideChart(chartList[3].children[0].title+'('+chartList[3].children[0].unit+')',chartList[3].children[0].id,0)">
                        <a-icon type="eye-invisible" theme="filled" style="font-size:15px;color:#d71345"/>
                      </a>
                      <a v-else 
                          @click="hideChart(chartList[3].children[0].title+'('+chartList[3].children[0].unit+')',chartList[3].children[0].id,1)">
                          <a-icon type="eye" theme="filled" style="font-size:15px;color:#009ad6"/>
                      </a>
                      {{ chartList[3].children[0].title+chartList[3].children[0].val }}
                      </div>
                      <a-divider
                      :style="{
                          margin: '0px',
                          background: chartList[3].children[0].color,
                          height: '2px'
                      }"
                      />
                      <div style="display: flex">
                      <span style="flex: 1; text-align: left">
                          {{ chartList[3].children[0].minNum }}
                      </span>
                      <span style="flex: 1; text-align: center">{{
                          chartList[3].children[0].unit
                      }}</span>
                      <span style="flex: 1; text-align: right">{{
                          chartList[3].children[0].maxNum
                      }}</span>
                      </div>
                  </div>
                  <div class="t-header" :style="{ color: chartList[3].children[1].color }" >
                      <div style="text-align: center">
                      <a 
                        v-if="chartList[3].children[1].opacity===0" 
                        @click="hideChart(chartList[3].children[1].title+'('+chartList[3].children[1].unit+')',chartList[3].children[1].id,0)">
                        <a-icon type="eye-invisible" theme="filled" style="font-size:15px;color:#d71345"/>
                      </a>
                      <a v-else 
                          @click="hideChart(chartList[3].children[1].title+'('+chartList[3].children[1].unit+')',chartList[3].children[1].id,1)">
                          <a-icon type="eye" theme="filled" style="font-size:15px;color:#009ad6"/>
                      </a>
                      {{ chartList[3].children[1].title+chartList[3].children[1].val }}
                      </div>
                      <a-divider
                      :style="{
                          margin: '0px',
                          background: chartList[3].children[1].color,
                          height: '2px'
                      }"
                      />
                      <div style="display: flex">
                      <span style="flex: 1; text-align: left">
                          {{ chartList[3].children[1].minNum }}
                      </span>
                      <span style="flex: 1; text-align: center">{{
                          chartList[3].children[1].unit
                      }}</span>
                      <span style="flex: 1; text-align: right">{{
                          chartList[3].children[1].maxNum
                      }}</span>
                      </div>
                  </div>
                  </div>
                  <div class="slick-item">
                  <div class="t-header" :style="{ color: chartList[3].children[2].color }" >
                      <div style="text-align: center">
                      <a 
                        v-if="chartList[3].children[2].opacity===0" 
                        @click="hideChart(chartList[3].children[2].title+'('+chartList[3].children[2].unit+')',chartList[3].children[2].id,0)">
                        <a-icon type="eye-invisible" theme="filled" style="font-size:15px;color:#d71345"/>
                      </a>
                      <a v-else 
                          @click="hideChart(chartList[3].children[2].title+'('+chartList[3].children[2].unit+')',chartList[3].children[2].id,1)">
                          <a-icon type="eye" theme="filled" style="font-size:15px;color:#009ad6"/>
                      </a>
                      {{ chartList[3].children[2].title+chartList[3].children[2].val }}
                      </div>
                      <a-divider
                      :style="{
                          margin: '0px',
                          background: chartList[3].children[2].color,
                          height: '2px'
                      }"
                      />
                      <div style="display: flex">
                      <span style="flex: 1; text-align: left">
                          {{ chartList[3].children[2].minNum }}
                      </span>
                      <span style="flex: 1; text-align: center">{{
                          chartList[3].children[2].unit
                      }}</span>
                      <span style="flex: 1; text-align: right">{{
                          chartList[3].children[2].maxNum
                      }}</span>
                      </div>
                  </div>
                  <div class="t-header" :style="{ color: chartList[3].children[3].color }" >
                      <div style="text-align: center">
                      <a 
                        v-if="chartList[3].children[3].opacity===0" 
                        @click="hideChart(chartList[3].children[3].title+'('+chartList[3].children[3].unit+')',chartList[3].children[3].id,0)">
                        <a-icon type="eye-invisible" theme="filled" style="font-size:15px;color:#d71345"/>
                      </a>
                      <a v-else 
                          @click="hideChart(chartList[3].children[3].title+'('+chartList[3].children[3].unit+')',chartList[3].children[3].id,1)">
                          <a-icon type="eye" theme="filled" style="font-size:15px;color:#009ad6"/>
                      </a>
                      {{ chartList[3].children[3].title+chartList[3].children[3].val }}
                      </div>
                      <a-divider
                      :style="{
                          margin: '0px',
                          background: chartList[3].children[3].color,
                          height: '2px'
                      }"
                      />
                      <div style="display: flex">
                      <span style="flex: 1; text-align: left">
                          {{ chartList[3].children[3].minNum }}
                      </span>
                      <span style="flex: 1; text-align: center">{{
                          chartList[3].children[3].unit
                      }}</span>
                      <span style="flex: 1; text-align: right">{{
                          chartList[3].children[3].maxNum
                      }}</span>
                      </div>
                  </div>
                  </div>
                  <div class="slick-item">
                  <div class="t-header" :style="{ color: chartList[3].children[4].color }" >
                      <div style="text-align: center">
                      <a 
                        v-if="chartList[3].children[4].opacity===0" 
                        @click="hideChart(chartList[3].children[4].title+'('+chartList[3].children[4].unit+')',chartList[3].children[4].id,0)">
                        <a-icon type="eye-invisible" theme="filled" style="font-size:15px;color:#d71345"/>
                      </a>
                      <a v-else 
                          @click="hideChart(chartList[3].children[4].title+'('+chartList[3].children[4].unit+')',chartList[3].children[4].id,1)">
                          <a-icon type="eye" theme="filled" style="font-size:15px;color:#009ad6"/>
                      </a>
                      {{ chartList[3].children[4].title+chartList[3].children[4].val }}
                      </div>
                      <a-divider
                      :style="{
                          margin: '0px',
                          background: chartList[3].children[4].color,
                          height: '2px'
                      }"
                      />
                      <div style="display: flex">
                      <span style="flex: 1; text-align: left">
                          {{ chartList[3].children[4].minNum }}
                      </span>
                      <span style="flex: 1; text-align: center">{{
                          chartList[3].children[4].unit
                      }}</span>
                      <span style="flex: 1; text-align: right">{{
                          chartList[3].children[4].maxNum
                      }}</span>
                      </div>
                  </div>
                  </div>
              </div>
              <div class="warning-header">
                  <span style="font-size:14px;color: #acadaf">报警信息</span>
                  <span style="font-size:17px;">{{'最新报警('+warnTime+')'}}</span>
                  <div class="main-tag">
                    <div class="item-tag" v-for="(tagItem, index) in tagList" :key="index" v-if="tagItem.num>0">
                          <a-tag color="pink" style="position: relative;font-size:7px;padding:2px 1px">
                          {{tagItem.bjlx}}
                          <span class="ant-badge-status-dot ant-badge-status-red" style="position: absolute; top: -10px; right: -10px;">
                            <span style="line-height:14px;display:block">{{tagItem.num}}</span>
                          </span>
                        </a-tag>         
                    </div>
                    
                  </div>
              </div>
              </div>
              <div style="width:100%;flex:1;display:flex;">
                  <div class="content">
                      <div class="chart" id="chartMain" ref="chartMain">
                      <div
                          id="chartContent"
                          class="chart-item"
                      >
                      </div>
                      </div>
                  </div>
                  <div style="width:2%;height:100%" id="dataZoomChart"></div>
              </div>
        </div>
      </a-spin>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
import {getDateStr} from '@/utils/util'
import {getZjyConfig} from '@/views/part1/data'
import { getZjyLtdData,getZjyAllData,getZjyData } from '@/api/api'
import elementResizeDetectorMaker from 'element-resize-detector'
import moment from 'moment'
let intervalId=null
let zjyTimeInterval=1000*60//钻井液获取数据时间间隔
let mainChart=null//主图表实例
let timer=null//防抖的计时器
const chartColor=['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
export default {
    name: 'zjyEcharts',
    components:{},
    props:{
      jhProp:{
        type: [String, String],
        default: '车古271'
      },
      ltd:{
       type: Number,
       default: 0
      },
      serchTime:{
      type:String,
      default:''
    }
    },
    data(){
        return{
            chart:null,
            time:'',//时间select
            time1:'2017-04-19 00:00:00',
            time2:'2017-04-19 02:00:00',
            warnTime:'',
            realTime:'',//即时时间
            spinning:false,//loading
            // 当前图表数据
            chartList: [
            ],
            jh:this.jhProp.split(',')[0],//井号
            timeAllDate:[],//所有的时间数据
            warning:{
                time:'2021/11/21 15:00:00',
                title:'溢流报警',
                num:'1'
            },
            warningList:[
              {
                name:'钻井液',
                width:'80',
                show:true,
                id:'zjy',
                jh:'',
                loading:false
              }
            ],
            allRealTime:[],//缓存实时数据
            runRecu:true,//递归标志位
            tagList:[
              {
                id:'0',
                bjlx:'门限报警',
                num:0
              },
              {
                id:'1',
                bjlx:'溢流报警',
                num:0
              },
              {
                id:'2',
                bjlx:'井漏报警',
                num:0
              },
              {
                id:'3',
                bjlx:'异常报警',
                num:0
              }
            ]//预警标签统计
        }
    },
    created(){
        this.getData()
    },
    async mounted(){
      await this.getTime()
      this.$nextTick(() => {
      this.initChart()
      const _this=this
      const erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById('chartMain'), element => {
        _this.$nextTick(() => {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(() => {
            _this.chartResize()
          }, 2000)
        })
      })
    })
    },
    beforeDestroy(){
      this.runRecu=false
      if(mainChart!=null){
        mainChart.clear()
        mainChart.dispose()
        this.chart.dispose()
        this.chart=null
        mainChart=null
      }
    },
    methods:{
       /* 获取最新时间 */
      async getTime(){
        const params={jh:this.jh}
        await getZjyAllData(params).then((res)=>{
          if(res.success){
            this.time=res.result[0]
            this.timeAllDate=[...res.result]
          }else{
            this.time=''
            //this.$message.error(res.message)
          }
        })
      },
    /* 不能被选中的时间 */
      disabledDate(current){
        let result=true
        result=!this.timeAllDate.some(son=>{
          return moment(current).isSame(son,'day')
        })
        return result
      },
      getData(){
          const data=getZjyConfig()
          this.chartList=[...data[0].children]
      },
         /* 循环加载图表数据以及预警数据 */
      async loadChartData(){
        if(this.time!='')
        {
          if(intervalId!=null){
            clearInterval(intervalId)
            intervalId=null
          }
          this.spinning=true
          this.time1=this.time+' 00:00:00'
          this.time2=this.time+' 02:00:00'
          this.runRecu=true
          const jh=this.jh
          await this.getIntervalTime(false,jh)//生产数据的递归获取
        }
      },
       /* 线程休眠 */
      sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      },
      async getIntervalTime(isRealTime,jh){
        const _this=this
        let timeDate=new Date(this.time)
        let tomorDay=new Date(timeDate.setDate(timeDate.getDate()+1)).setHours(0,0,0)
        let timeDate1=new Date(this.time1)
        let timeDate2=new Date(this.time2)
        if((timeDate2<tomorDay||isRealTime)&&this.runRecu){
          //用这个状态字符结束不需要的子线程内的递归:1正常运行,2不是当前模板或者井号的递归,3此递归被关闭,4没有获取到数据或者为当天实时数据
          let resultStatus='1'
          await this.getDataByTime(isRealTime,jh).then((res)=>{
            resultStatus=res
          })
          if((resultStatus==='4'||isRealTime)
              &&new Date().toDateString()===new Date(this.time).toDateString()
              &&new Date(this.realTime)<tomorDay
              &&resultStatus!='2'
              &&resultStatus!='3'
              ){
            this.spinning=false
            if(!isRealTime){
              this.getZjyData(this.jh)//预警部分的数据获取
              if(new Date().toDateString()===new Date(this.time).toDateString()){
                intervalId=setInterval(() => {
                  _this.getZjyData(this.jh)
                }, zjyTimeInterval) 
              }
            }
            await this.sleep(3000)
            await this.getIntervalTime(true,jh)
          }
          else if(resultStatus==='1'||resultStatus==='4')
          {
              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)
              //递归
              await this.getIntervalTime(false,jh)
          }
        }else{
          this.spinning=false
          if(new Date().toDateString()===new Date(this.time).toDateString()&&new Date(this.realTime)<tomorDay){
            await this.sleep(3000)
            if(!isRealTime){
              this.getZjyData(this.jh)//预警部分的数据获取
              if(new Date().toDateString()===new Date(this.time).toDateString()){
                intervalId=setInterval(() => {
                  _this.getZjyData(this.jh)
                }, zjyTimeInterval) 
              }
            }
            await this.getIntervalTime(true,jh)
          }else{
              await this.getDataByTime(false,jh)
              this.getZjyData(this.jh)//预警部分的数据获取
              this.time1=this.time+' 00:00:00'
              this.time2=this.time+' 02:00:00'
          }
        }
      },
       /* 获取钻井液数据 */
      getZjyData(jh){
        this.tagList.forEach((item)=>{
                  item.num=0
                })      
        const params={jh:jh,time:this.time}
        try{
          getZjyData(params).then((res)=>{
          if(res.success&&res.result.length>0&&res.result[0].jh===this.jh)
          {
              let op=mainChart.getOption()
              let zjySeriesMap={}
              op.series.forEach((item)=>{
                if(item.id==='zjywarnings')
                {
                  zjySeriesMap={...item}
                }
              })
              const zjySeriesAll=[]
              res.result.forEach((resItem,index)=>{
                let myZjySeriesMa={}
                myZjySeriesMa={...zjySeriesMap}
                const dataItem=[0.5]
                let bjlxStr=''
                if(resItem.bjlx==='0'){bjlxStr='门限报警'}
                if(resItem.bjlx==='1'){bjlxStr='溢流报警'}
                if(resItem.bjlx==='2'){bjlxStr='井漏报警'}
                if(resItem.bjlx==='3'){bjlxStr='异常报警'}
                this.tagList.forEach((item)=>{
                  if(item.id===resItem.bjlx){
                    item.num++
                  }
                })      
                dataItem.push(resItem.sj)
                let dataConf={}
                dataConf.value=[...dataItem]
                dataConf.tooltip={
                  show:true,
                  formatter: '时间:'+resItem.sj+'</br>类型:'+bjlxStr+'</br>信息:'+resItem.bjxx
                }
                this.warnTime=resItem.sj
                const sIndex=zjySeriesAll.findIndex(n=>n.id=='zjywarnings'+resItem.bjlx)
                if(sIndex>=0){
                  zjySeriesAll[sIndex].data.push(dataConf)
                }
                else{
                  myZjySeriesMa.label={
                    show:true,
                    position: 'right',
                    formatter: bjlxStr,
                    borderColor:'#000',
                    borderRadius:5,
                    padding:[1,3],
                    borderWidth:1
                  }
                  myZjySeriesMa.id='zjywarnings'+resItem.bjlx
                  myZjySeriesMa.data=[]
                  myZjySeriesMa.data.push(dataConf)
                  myZjySeriesMa.itemStyle={}
                  myZjySeriesMa.itemStyle.color=chartColor[Number(resItem.bjlx)]
                  zjySeriesAll.push(myZjySeriesMa)
                }    
              })
              const options={series:zjySeriesAll}
              mainChart.setOption(options)
          }
          })
        }catch(error){
        }
      },
      /* 接口获取图表数据 */
      async getDataByTime(isRealTime,jh){
        let resultStatus='1'
        if(this.runRecu&&((isRealTime&&new Date().toDateString()===new Date(this.realTime).toDateString()))||!isRealTime){
          let params={}
          if(isRealTime){
            params={jh:jh,time1:this.realTime,time2:''}
          }else{
            params={jh:jh,time1:this.time1,time2:this.time2}
          }
          const _this=this
          await getZjyLtdData(params).then((res)=>{
            if(res.success&&res.result.length>0){
              if(jh===this.jh){
                let op=mainChart.getOption()
                const listLength=res.result.length-1
                res.result.forEach((itemRes,index1)=>{
                _this.chartList.forEach((chartItem,index2)=>{
                  chartItem.children.forEach((childItem,index3)=>{
                    if(childItem.data===undefined||childItem.data===null){
                        childItem.data=[]
                      }
                      childItem.data.push(itemRes[childItem.dataSource.toLowerCase()])
                      if(listLength===index1){
                         let realTimeNum=itemRes[childItem.dataSource.toLowerCase()]
                         if(realTimeNum==undefined)
                         {
                            realTimeNum='未安装'
                         }
                        _this.$set(_this.chartList[index2].children[index3],'val','['+realTimeNum+']')
                      }
                  })
                })
                op.series.forEach((item)=>{
                  if(item.id.indexOf('warnings')<0)
                  {
                      const dataItem=[]
                      const dataSource=item.id.split('-')[0]
                      dataItem.push(itemRes[dataSource.toLowerCase()])
                      dataItem.push(itemRes.sj)
                      item.data.push(dataItem)
                  }
                })
                //获取刷新到此处的时间,用于当天实时刷新数据
                _this.realTime=itemRes.sj
              })
                mainChart.setOption(op)
                if(isRealTime){
                  resultStatus='4'
                }else{
                  resultStatus='1'
                }
              }else{
                resultStatus='2'
              }
            }
            if(res.result.length===0){
              if(jh===this.jh)
              {
                resultStatus='4'
              }else{
                resultStatus='2'
              }
              
            }
          }) 
        }else{
          resultStatus='3'
        }
        return new Promise((resolve, reject)=>{
                  resolve(resultStatus)
                })
      },
       /* 初始化图表 */
      initChart () {
        if(mainChart!=null){
          mainChart.clear()
          mainChart.dispose()
          this.chart.dispose()
          this.chart=null
          mainChart=null
        }
        this.chartList.forEach(chartItem=>{
          chartItem.children.forEach(childItem=>{
            childItem.data=[]
          })
        })
        const chartsList = []
        mainChart = echarts.init(document.getElementById("chartContent"),'shine')
        this.chart = echarts.init(document.getElementById('dataZoomChart'),'shine')
        const _this=this
        this.$nextTick(() => {
              _this.dataZoomSetOptions(_this.chart)
              _this.setOptions(_this.chartList)
        })
        chartsList.push(mainChart)
        chartsList.push(this.chart)
        echarts.connect(chartsList)
        mainChart.finished=this.loadChartData()
      },
    /* 数据图表配置 */
      setOptions (chart) {
        const timeDate=new Date(this.time)
        const tomorDay=new Date(new Date(timeDate.setDate(timeDate.getDate()+1)).setHours(2,0,0))
        const tomoStr= getDateStr(tomorDay)
        console.log(tomoStr)
        const dataZoomYIndex=[0,1,2,3,4]
        let warningWidth=200//预警部分图表的宽度
        const options = {
          animation:false,
          tooltip: {
            show: true
          },
          dataZoom: [
            {
              type: 'inside',
              throttle:0,
              yAxisIndex: dataZoomYIndex,
              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'
            }
          ]
        }
        const series = []
        const grid = []
        const xAxis = []
        const yAxis = []
        if(!this.$refs.chartMain.offsetWidth){
            return
        }
        const chartMainWidth=this.$refs.chartMain.offsetWidth-120-warningWidth
        let fixWidth=0
        let rate = chart.length
        chart.forEach((item,index)=>{
          if(item.fix==='1')
          {
            fixWidth+=Number(item.width)
            rate--
          }
        })
        let chartWidth = (chartMainWidth-fixWidth) / rate
        let preLeft=117
        //一个grid多个x轴
        let xIndex=0
        chart.forEach((item, index) => {
          const width=item.fix==='1'?item.width:chartWidth
          const gridItem = {
            left: preLeft+'',
            right: '0',
            bottom: '0',
            top: '0',
            width: width+'',
            containLabel: false,
            tooltip: {
              show: true,
              trigger: 'axis',
              backgroundColor: 'rgba(255,255,255,0.6)',
              axisPointer: {
                label: {
                  formatter: '时间：{value}',
                  backgroundColor: '#777'
                }
              }
            },
            backgroundColor: 'transparent',
          }
          preLeft+=Number(width)
          const yAxisItem = {
            id:'y'+index,
            gridIndex: index,
            type: 'time',
            axisLine: { onZero: false, show: true,
            lineStyle:{color:this.warnTheme=='dark'?'#fbdc61':'#000'}
            },
            axisTick: { show: index == 0 ? true : false,
            lineStyle:{color:this.warnTheme=='dark'?'#fbdc61':'#000'}
            },
            boundaryGap: false,
            min:this.time+' 00:00:00',
            max:tomoStr,
            maxInterval: 3600 * 24 * 1000,
            splitNumber:11,
            splitLine: { // 网格线
              show: true,
              lineStyle:{
                color:'#aaa'
              }
            },
            axisLabel: {
            color:this.warnTheme=='dark'?'#b581f5':'#000',
            formatter:index == 0 ? '{HH}:{mm}' : '' 
            },
            data: [],
            inverse: true
          }
          if(item.children===undefined||item.children.length===0)
          {
            const xAxisItem = {
              gridIndex: index,
              type: 'value',
              splitLine: { // 网格线
              show: true,
              lineStyle:{
                color:'#aaa'
              }
              },
              axisLabel: {
                formatter: function () {
                  return ''
                }
              }
            }
            xAxis.push(xAxisItem)
          }
          item.children.forEach((ele,index2) => {
            const serItem = {
              id:ele.dataSource+'-'+xIndex,
              name: ele.title+'('+ele.unit+")",
              yAxisIndex: index,
              type: 'line',
              symbolSize: 10,
              symbol: 'circle',
              //smooth: ele.lineStyle === 'smooth',
              smooth: false,
              showSymbol: false,
              hoverAnimation: false,
              step: ele.lineStyle === 'step', // 阶梯线
              showSymbol: false,
              itemStyle: {
              width: 1,
              color: ele.color,
              style: 'solid'
              },
              emphasis: {
              focus: 'series'
              },
              xAxisIndex:xAxis.length,
              z:20-index2,
              data: []
            }          
            const xAxisItem = {
              gridIndex: index,
              min:function (value) {
                if(ele.spread==='1'){
                  if(ele.minSpread==='a')
                  {
                    return  Math.floor(Number(value.min) / 10) * 10
                  }else{
                    return value.min
                  }
                }else{
                  return ele.minNum
                }
              },
              max:function (value) {
                if(ele.spread==='1'){
                  if(ele.minSpread==='a')
                  {
                    return  Math.ceil(Number(value.max) / 10) * 10
                  }else{
                    return value.max
                  }
                }else{
                  return ele.maxNum
                }
              },
              type: 'value',
              splitLine: { // 网格线
              show: index2===0?true:false,
              lineStyle:{
                color:'#aaa'
              }
              },
              axisLabel: {
                formatter: function () {
                  return ''
                }
              }
            }
            series.push(serItem)
            xAxis.push(xAxisItem)
            xIndex++
          })
          grid.push(gridItem)
          yAxis.push(yAxisItem)
        })
        //预警部分图表
        let warningLeft=preLeft
        this.warningList.forEach((item,index)=>{
          if(item.show){
            let gridItem = {
              id:item.id+'grid',
              left: warningLeft+'',
              backgroundColor: 'transparent',
              right: '0',
              bottom: '0',
              top: '0',
              width: warningWidth,
              containLabel: false,
              tooltip:{show:false}
            }
            let yAxisItem = {
              id:item.id+'y',
              gridIndex: grid.length,
              type: 'time',
              axisLine: { onZero: false, show: true,
              lineStyle:{color:'#000'}
              },
              axisTick: { show:false },
              boundaryGap: false,
              min:this.time+' 00:00:00',
              max:tomoStr,
              maxInterval: 3600 * 24 * 1000,
              splitNumber:11,
              splitLine: { // 网格线
                show: true,
                lineStyle:{
                color:'#aaa'
              }
              },
              axisLabel: {
              formatter: '' 
              },
              data: [],
              inverse: true
            }
            const xAxisItem = {
                id:item.id+'x',
                gridIndex: grid.length,
                min:0,
                max:3,
                type: 'value',
                splitLine: { // 网格线
                show: true,
                lineStyle:{
                  color:'#aaa'
                }
                }
              }
            let serItem={
              id:item.id+'warnings',
              yAxisIndex: yAxis.length,
              xAxisIndex:xAxis.length,
              type: 'scatter',
              symbolSize: 20,
              data:[]
            }
            grid.push(gridItem)
            yAxis.push(yAxisItem)
            xAxis.push(xAxisItem)
            series.push(serItem)
          }
        })
        options.grid = grid
        options.xAxis = xAxis
        options.yAxis = yAxis
        options.series = series
        mainChart.setOption(options)
      },
       /* 伸缩条配置 */
      dataZoomSetOptions (chart) {
        const timeDate=new Date(this.time)
        const tomorDay=new Date(new Date(timeDate.setDate(timeDate.getDate()+1)).setHours(2,0,0))
        const tomoStr= getDateStr(tomorDay)
        const options = {
          animation:false,
          grid: {
            left: '0',
            right: '0',
            bottom: '-3%',
            top: '0',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'inside',
              throttle:0,
              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:this.time+' 00:00:00',
            max:tomoStr,
            maxInterval: 3600 * 24 * 1000,
            splitNumber:11,
            splitLine: { // 网格线
              show: false,
              lineStyle:{
                    color:'#aaa'
                  }
            },
            axisLabel: {
              formatter: function () {
                return ''
              }
            },
            inverse: true
          },
          tooltip: {
            show: false
          }
        }
        chart.setOption(options)
      },
      chartResize () {
        if(mainChart===null){
          return
        }
        this.chart.resize()
        //mainChart.resize()
        if(this.$refs.chartMain)
        {
          let warningWidth=200
          const chartMainWidth=this.$refs.chartMain.offsetWidth-120-warningWidth
              let fixWidth=0
              let rate = this.chartList.length
              this.chartList.forEach((item,index)=>{
                if(item.fix==='1')
                {
                  fixWidth+=Number(item.width)
                  rate--
                }
              })
              let chartWidth = (chartMainWidth-fixWidth) / rate
              let preLeft=118
              const grid = []
              this.chartList.forEach((item,index)=>{
                const width=item.fix==='1'?item.width:chartWidth
                const gridItem = {
                  left: preLeft+'',
                  right: '0',
                  bottom: '0',
                  top: '0',
                  width: width+'',
                  containLabel: false
                }
                preLeft+=width
                grid.push(gridItem)
              })
              let warningLeft=preLeft
              this.warningList.forEach((item,index)=>{
                if(item.show){
                  let gridItem = {
                    id:item.id+'grid',
                    left: warningLeft+''
                  }
                  grid.push(gridItem)
                }
              })
            mainChart.setOption({grid:grid})
        }
        mainChart.resize()
      },
      /* 隐藏或者显示曲线 */
      hideChart(name,id,opacity){
      let newOPa=1
      if(opacity===0){
        newOPa=1
        const series={
          name:name,
          lineStyle:{
            opacity:1
          }
        }
        mainChart.setOption({series:[series]})
      }else{
        newOPa=0
        const series={
        name:name,
        lineStyle:{
          opacity:0
        }
      }
      mainChart.setOption({series:[series]})
      }
      this.chartList.forEach((item,index)=>{
        item.children.forEach((item2,index2)=>{
          if(item2.id===id){
            this.$set(this.chartList[index].children[index2],'opacity',newOPa)
          }
        })
      })
      },
      onTimeChange(date, dateString){
        this.time=dateString
        this.initChart()
      },
       /* 修改图表主题颜色 */
      chartThene(theme){
        const yitem={
          id:'y0',
          axisLine: { onZero: false, show: true ,
            lineStyle:{color:this.warnTheme=='dark'?'#fbdc61':'#000'}
          },
          axisTick: {
            lineStyle:{color:this.warnTheme=='dark'?'#469f92':'#000'}
            },
          axisLabel: {
              color:this.warnTheme=='dark'?'#b581f5':'#000'
            }
        }
        const op={yAxis:yitem}
        mainChart.setOption(op)
      },
      goLtd(){
        this.$emit('goLtd')
      }
    },
    computed:{
      ...mapState({
      warnTheme: state => state.app.warnTheme
      })
    },
    watch:{
       warnTheme(val){
        this.chartThene(val) 
      },
      jhProp(val){
          const jh=val.split(',')[0]
          this.initChart()
          this.runRecu=false
          this.jh=jh
          const _this=this
          this.getTime().then(res=>{
            if(this.serchTime){
              this.time=this.serchTime
              this.allRealTime=[]
            }
          this.$nextTick(() => {
                setTimeout(() => {
                  _this.initChart()
                }, 500)
              })
          })
      }
  
    }
}
</script>
<style lang="less" scoped>
@darkColor: transparent;
@foreColor:#b581f5;
@lightForeColor:#000;
.page {
  background: @darkColor;
  color: @lightForeColor;
  font-size: 5px;
  font-weight: 500;
  height: 100%;
}
.main-chart{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-dark{
  background: @darkColor;
  color: @foreColor;
  font-size: 5px;
  font-weight: 500;
  height: 100%;
}
.backColor{
  background-color: @darkColor;
}
.foreColor{
  color: @lightForeColor;
}
.foreColor-dark{
  color: @foreColor;
}
.header-chart {
  background: @darkColor;
  width: 98%;
  display: flex;
  height: 180px;
}
.headerOne {
  min-height: 175px;
  width: 120px;
  border: 1px solid;
  text-align: center;
}
.header-content {
  flex: 1;
  border: 1px solid;
  margin-left: -1px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header-content-fix {
  border: 1px solid;
  margin-left: -1px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.slick-item:nth-last-child(1) {
  border-bottom: 0px;
}
.slick-item {
  background: @darkColor;
  flex: 1;
  transform:scale(1);
  border-bottom: 1px solid;
  display: flex;
}
.slick-item:hover{
  transform: scale(1.2);
  background: #d3d7d4;
  cursor: move;
}
.t-header {
  flex:1;
  min-height: 37px;
  height: 100%;
  padding: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.warning-header{
  display: flex;
  width:200px;
  text-align: center;
  flex-direction: column;
  justify-content: space-around;
  border-right: 1px solid;
  border-bottom:  1px solid;
  border-top: 1px solid;
}
.ant-badge-status-dot{
    position: relative;
    top: -1px;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    border-radius: 50%;
    color: #fff;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  background: @darkColor;
}
.chart {
  flex: 1;
  border-left: 1px solid @foreColor;
  border-right: 1px solid @foreColor;
  border-bottom: 1px solid @foreColor;
  display: flex;
}
.chart-item {
  flex: 1;
  border-right: 1px solid @foreColor;
}
.chart-item-fix {
  border-right: 1px solid @foreColor;
}
.chart-item:nth-last-child(1) {
  border-right: 0;
}
.ant-spin-nested-loading /deep/ .ant-spin-blur{
  height: 100%;
}
.ant-spin-nested-loading /deep/ .ant-spin-container{
  height: 100%;
}
.main-tag{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 57px;
}
.item-tag{
  align-content: space-around;
  height: 26px;
}
</style>