<template>
  <div id="YSIndex_right2">
    <div class="historySZ">
      <div class="leve2Title">{{name}}历史水质</div>
      <div id="history">
      <HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>

      </div>
    </div>
    <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>
</template>

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

const props = defineProps({
  //分区编号
  waterRegionCode: {
    type: [String],
    default: '',
  },
    name: {
    type: String,
    default: '',
  },
});
const AllData = reactive({
  allSZ:[],
  szHistoryData:[],
  szHistoryrefresh:[],

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

    }

  },
  { immediate: true, deep: true }
);

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

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

      AllData.szHistoryData=res.data
      AllData.szHistoryrefresh=Math.random()
      }
  })
}
function getData(){
    getPortChannelEchart(props.waterRegionCode).then(res=>{
            let res1 = {
        code: 200,
        msg: '操作成功',
        data: {
          datas: [
            {
              dataKey: 'z',
              dataName: '黄海水位',
              unit: '(m)',
              datas: ['0', '0', '1', '0', '2', '0.5', '0', '0', '0', '0.2'],
              cordonLineList: [
                {
                  id: '1856620587907244131',
                  cordonId: '1856647503229968394',
                  lineName: '正常蓄水位',
                  lineValue: '1.3',
                  lineType: '2',
                  lineColor: 'rgba(0, 255, 68, 1)',
                  systemDefault: '0',
                  code: 'normal_water_level',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
                {
                  id: '1856620587932409132',
                  cordonId: '1856647503229968394',
                  lineName: '设计洪水位',
                  lineValue: '1.8',
                  lineType: '1',
                  lineColor: 'rgba(221, 255, 0, 1)',
                  systemDefault: '0',
                  code: 'design_flood_level',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
                {
                  id: '1856620587936604135',
                  cordonId: '1856647503229968394',
                  lineName: '校核洪水位',
                  lineValue: '1.98',
                  lineType: '1',
                  lineColor: 'rgba(255, 191, 0, 1)',
                  systemDefault: '0',
                  code: 'verify_flood_level',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
                {
                  id: '1856620587936604134',
                  cordonId: '1856647503229968394',
                  lineName: '坝顶高程',
                  lineValue: '2.8',
                  lineType: '1',
                  lineColor: 'rgba(255, 81, 0, 1)',
                  systemDefault: '0',
                  code: 'dam_hight',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
              ],
            },
            {
              dataKey: 'pn05',
              dataName: '降雨量',
              unit: 'mm',
              datas: ['10', '5', '11', '2', '2', '20', '15', '0', '0', '0.2'],
              cordonLineList: [],
            },
          ],
          times: [
            '1732291200000',
            '1732291200000',
            '1732291800000',
            '1732292100000',
            '1732292400000',
            '1732292700000',
            '1732293000000',
            '1732293300000',
            '1732293600000',
            '1732293900000',
          ],
        },
      };
      console.log('水质',res);
    if(res.code==200){
       let arr=[]
       let data=res.data
       data.forEach((e)=>{
        let obj={
          stName:e.stName,
          stCode:e.stCode,
          targetQuality:e.targetQuality,
          chartInfo:{
            name:'',
            XAxis:[],
            nh4n:[],
            dO:[],
            turb:[],
            cond:[],
            ph:[],
            marklinearr:[],
            refresh:1
          }
        }
       obj.chartInfo.XAxis = e.siteEchartDto.times;

        e.siteEchartDto.datas.forEach((j) => {
          let at=obj.chartInfo
        switch (j.dataKey) {
          case "nh4n":
            at.nh4n = j.datas;
            break;
          case "dO":
            at.dO = j.datas;
            break;
          case "turb":
            at.turb = j.datas;
            break;
          case "cond":
            at.cond = j.datas;
            break;
            case "ph":
            at.ph = j.datas;
            break;
        }
      });

      arr.push(obj)
       obj.chartInfo.refresh =Math.random()
      
       })
      AllData.allSZ=arr
      console.log('AllData.allSZ',AllData.allSZ);
      
    }
  })
}
onMounted(() => {
  console.log('ppp',props.name);
});
</script>

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

  // }
}
</style>