<template>
  <div id="YSIndex_right2">
    <div class="historySZ">
      <div class="leve2Title flex flex-justcontent-spacebetween">
        <div>历史水质</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'" ref="scrollContainer">
      <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'" ref="scrollContainer">
      <div
        class="eachLake"
        ref="PKeachLake"
        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, nextTick } 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";
import bus from "@/bus";

const props = defineProps({
  //分区编号
  waterRegionCode: {
    type: [String],
    default: "",
  },
});
const AllData = reactive({
  selectmodel: "",
  filterList: [],
  activeName: "",
  GQdata: [],
  PKdata: [],
  allSZ: [],
  allPK: [],
  szHistoryData: [],
  szHistoryrefresh: [],
});
const scrollContainer = ref(null);
const PKeachLake = ref(null);
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;
}
// 通过name去定位到某一个echarts
const SZEchartsScrollTop = (item) => {
  AllData.activeName = "PK";
  chuliDataFunPK();
  nextTick(() => {
    //  获取一个单位的echart元素高度
    let EchartsHeight = PKeachLake.value[0].offsetHeight;
    // 获取当前站点名称在所有数据中的索引
    var index = AllData.allPK.findIndex(function (element) {
      return element.stName == item.name;
    });
    scrollContainer.value.scrollTop = index * EchartsHeight;
  });
};
onMounted(() => {
  bus.on("SZEchartsScrollTop", SZEchartsScrollTop);
});

onBeforeUnmount(() => {
  bus.off("SZEchartsScrollTop");
});
</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>