<template>
  <div id="YSIndex_right2">
    <div class="historySZ">
      <div class="leve2Title flex flex-justcontent-spacebetween">
        <div @click="getData">历史水质</div>
        <div>
              <el-select
      v-model="AllData.selectmodel"
      placeholder="请选择湖泊"
      style="width: 90px;position: relative;margin-bottom: 5px;"
      filterable
      size="small"
      placement="bottom"
      @change="selectchange"
    >

      <el-option v-for="(item) in AllData.filterList" :key="item.lakerId" :label="item.lakerName" :value="item.lakerId">
      </el-option>
    </el-select>
        </div>
      </div>
      <div id="history">
      <HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>

      </div>
    </div>
    <el-tabs v-model="AllData.activeName" class="demo-tabs" @tab-click="handleClick" stretch>
    <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
    <el-tab-pane label="排口" name="PK"></el-tab-pane>
  </el-tabs>
  <div class="chartsbox" v-if="AllData.activeName=='GQ'">
        <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode" >
      <div class="h100">
        <div class="leve2Title">{{item.stName}}</div>
        <div id="Charts">
                      <ShuiZhicharts
              :data="item.chartInfo"
              :refresh="item.chartInfo.refresh"
            ></ShuiZhicharts>
        </div>
      </div>
      
    </div>
     <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length==0">
    暂无数据
  </div>
  </div>

  <div class="chartsbox" v-if="AllData.activeName=='PK'">
        <div class="eachLake" v-for="(item) in AllData.allPK" :key="item.stCode" >
      <div class="h100">
        <div class="leve2Title">{{item.stName}}</div>
        <div id="Charts">
                      <Paikoucharts 
          :refresh="item.chartInfo.refresh"
          :XAxis="item.chartInfo.XAxis"
          :YAxis="item.chartInfo.YAxis"
          :yAxisarr="item.chartInfo.yAxisarr"
        >
        </Paikoucharts>
        </div>
      </div>
      
    </div>
        <div class="flex flex-justcontent-center"   v-if="AllData.allPK.length==0">
    暂无数据

  </div>
  </div>


  </div>
</template>

<script setup name="YSIndex_right2">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { getWaterQualityEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
import ShuiZhicharts from "./components/ShuiZhicharts.vue";
import Paikoucharts from "./components/Paikoucharts.vue";
import HistorySZChart from "./components/HistorySZChart.vue";

const props = defineProps({
  //分区编号
  waterRegionCode: {
    type: [String],
    default: '',
  },

});
const AllData = reactive({
  selectmodel:'',
  filterList:[],
  activeName:'',
  GQdata:[],
  PKdata:[],
  allSZ:[],
  allPK:[],
  szHistoryData:[],
  szHistoryrefresh:[],

});

watch(
  () => props.waterRegionCode,
  val => {
    console.log('YSIndex_right2:分区编号变了2', val);
    // debugger
    if(val){
      getHistoryData();
      getData();

    }

  },
  { immediate: true, deep: true }
);
function selectchange(value) {
  console.log('value',value);
  AllData.filterList.map((e)=>{
    if(e.lakerId==value){
              AllData.szHistoryData=e

      AllData.szHistoryrefresh=Math.random()
    }
  })

}
function handleClick(e){
  console.log('e',e.props.name);
  console.log('AllData.activeName',AllData.activeName);
  if(e.props.name=='GQ'){
    chuliDataFunGQ()
  }else {
    chuliDataFunPK()

  }
}
function getHistoryData(){
  let params={
    waterRegionCode:props.waterRegionCode,
    // lakerId:5,

  }
  riverQualityGetHistory(params).then(res=>{
    console.log('水质历史数据',res);
      if(res.code==200){

      AllData.filterList=res.data
      if(res.data?.length>0){
      AllData.selectmodel=res.data[0].lakerId

        AllData.szHistoryData=res.data[0]
      AllData.szHistoryrefresh=Math.random()
      }

      }
  })
}
function getData(){
    getWaterQualityEchart(props.waterRegionCode).then(res=>{

      console.log('水质',res);
    if(res.code==200){
      AllData.GQdata=res.data.portChannelDataList
      AllData.PKdata=res.data.outletDataList
      if(AllData.GQdata.length>0){
        AllData.activeName='GQ'
      chuliDataFunGQ()
      return
      }else if(AllData.PKdata.length>0) {
        AllData.activeName='PK'
      chuliDataFunPK()
      return
      }else {
         AllData.activeName='GQ'
      chuliDataFunGQ()
      }

      
    }
  })
}
function chuliDataFunGQ(){
         let arr=[]
       let data=AllData.GQdata
       data.forEach((e)=>{
        let obj={
          stName:e.stName,
          stCode:e.stCode,
          targetQuality:e.targetQuality,
          chartInfo:{
            name:'',
            XAxis:[],
            nh4n:[],
            DO:[],
            codcr:[],
            cond:[],
            ph:[],
            marklineObj:{
            nh4n:'',
            DO:'',
            codcr:'',
            cond:'',
            ph:'',
       },
            refresh:1
          }
        }
        let at=obj.chartInfo
       at.XAxis = e.siteEchartDto.times;
        if(e.targetQuality==1){
          at.marklineObj.nh4n=0.15
          at.marklineObj.DO=7.5
          at.marklineObj.codcr=15
          at.marklineObj.cond=''
          at.marklineObj.ph=''
        }else if(e.targetQuality==2){
           at.marklineObj.nh4n=0.5
          at.marklineObj.DO=6
          at.marklineObj.codcr=15
          at.marklineObj.cond=''
          at.marklineObj.ph=''
        }else if(e.targetQuality==3){
           at.marklineObj.nh4n=1
          at.marklineObj.DO=5
          at.marklineObj.codcr=20
          at.marklineObj.cond=''
          at.marklineObj.ph=''
        }else if(e.targetQuality==4){
           at.marklineObj.nh4n=1.5
          at.marklineObj.DO=3
          at.marklineObj.codcr=30
          at.marklineObj.cond=''
          at.marklineObj.ph=''
        }else if(e.targetQuality==5){
           at.marklineObj.nh4n=2
          at.marklineObj.DO=2
          at.marklineObj.codcr=40
          at.marklineObj.cond=''
          at.marklineObj.ph=''
        }
        e.siteEchartDto.datas.forEach((j) => {
          
        switch (j.dataKey) {
          case "nh4n":
            at.nh4n = j.datas;
            break;
          case "DO":
            at.DO = j.datas;
            break;
          case "codcr":
            at.codcr = j.datas;
            break;
          case "cond":
            at.cond = j.datas;
            break;
            case "ph":
            at.ph = j.datas;
            break;
        }
      });
      if(e.siteEchartDto?.times?.length>0){
        arr.push(obj)
      }
      
       obj.chartInfo.refresh =Math.random()
      
       })
      AllData.allSZ=arr
      console.log('AllData.allSZ',AllData.allSZ);
}
function chuliDataFunPK(){
    let arr=[]
       let data=AllData.PKdata
       console.log('dataPK',data);
       data.forEach((e)=>{
        let obj={
          stName:e.stName,
          stCode:e.stCode,
          targetQuality:e.targetQuality,
          chartInfo:{
              refresh: 1,
  DataName: '',
  XAxis: [],
  typeName: '',
  YAxis: [0, 1, 6, 3, 4],
  loading: false,
  yAxisarr: [

  ],
  marklinearr: [

  ],
          }
        }
        let at=obj.chartInfo
         e.siteEchartDto.datas.map(item => {
      at.marklinearr.push(...item.cordonLineList);
    });
       at.XAxis = e.siteEchartDto.times;
        at.yAxisarr = e.siteEchartDto.datas;
              if(e.siteEchartDto?.times?.length>0){
        arr.push(obj)
      }
       at.refresh =Math.random()

       })
       console.log('arrPK',arr);
          AllData.allPK=arr
}
onMounted(() => {
});
</script>

<style lang="scss" scoped>
#YSIndex_right2 {
  width: 100%;
  height: 100%;
  
  .historySZ{
    height: calc((100% - 30px) / 3);
    
  }
  #Charts,#history {
    width: calc(100% - 10px);

    height: calc(100% - 32px);
  }
  .chartsbox {
    height: calc((100% - 68px) / 3 * 2);
    overflow-y: auto;
  }
  .eachLake {
height: calc((100% - 30px) / 2);
  }
  :deep(.el-select .el-input__inner){
    color: #fff;
    
  }

}
</style>