<template>
  <div id="jiancexinxi">
    <div class="leftbox">
      <div
        class="boxitem"
        :class="index == activedvalue ? 'actived' : ''"
        v-for="(item, index) in leftList"
        :key="item"
        @click="leftclick(item, index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="rightbox">
      <div class="topdate">
        <el-select v-model="stCode" placeholder="选择站点" clearable style="width: 200px" @change="GetechartList">
          <el-option v-for="dict in siteList" :key="dict.stCode" :label="dict.stName" :value="dict.stCode" />
        </el-select>

        <!-- 日期和时间选择: -->
        <DateSelect
          style="width: 320px"
          v-model:dateTime="dateTimearr"
          :format="'YYYY-MM-DD HH:mm'"
          :valueFormat="'YYYY-MM-DD HH:mm'"
          @change="GetechartList"
        />
      </div>
      <div class="echartbody" v-if="showecharts">
        <shuikujianceEcharts
          :refresh="chartInfo2.refresh"
          :DataName="chartInfo2.DataName"
          :XAxis="chartInfo2.XAxis"
          :YAxis="chartInfo2.YAxis"
          :typeName="chartInfo2.typeName"
          :typeName2="chartInfo2.typeName2"
          :YAxis2="chartInfo2.YAxis2"
          :YAxis3="chartInfo2.YAxis3"
          :yAxisarr="chartInfo2.yAxisarr"
        >
        </shuikujianceEcharts>
      </div>
    </div>
  </div>
</template>

<script setup name="jiancexinxi">
import { getReservoirSiteList, getEchart } from '@/api/MonitorAssetsOnMap';
import shuikujianceEcharts from '@/views/pictureOnMap/page/components/DialogTabs/component/shuikujianceEcharts.vue';
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
});

const leftList = ref([
  // {
  //   name: '水位监测',
  //   value: '1',
  // },
  // {
  //   name: '湖泊水质',
  //   value: '2',
  // },
  // {
  //   name: '排口监测',
  //   value: '3',
  // },
]);
const showecharts = ref(false);
const dateTimearr = ref([proxy.moment().format('YYYY-MM-DD 00:00'), proxy.moment().format('YYYY-MM-DD HH:mm')]);
const chartInfo2 = ref({
  refresh: 1,
  DataName: '',
  XAxis: ['1:00', '3:00', '5:00', '7:00', '9:00', '11:00', '13:00', '15:00', '17:00'],
  typeName: '降雨量',
  YAxis: [0, 1, 6, 3, 4],
  loading: false,
  yAxisarr: [
    // {
    //   dataKey: 'pn05',
    //   dataName: '5分钟时段降水量',
    //   datas: [1, 2, 3, 4, 5],
    //   unit: '(毫米)',
    // },
    // {
    //   dataKey: 'zt',
    //   dataName: '测试因子2',
    //   datas: [1, 2, 55, 4, 5],
    //   unit: '',
    // },
    // {
    //   dataKey: '22',
    //   dataName: '测试因子23',
    //   datas: [1, 2, 55, 4, 5],
    //   unit: '',
    // },
    // {
    //   dataKey: 'zt3',
    //   dataName: '测试因子24',
    //   datas: [1, 23, 55, 4, 5],
    //   unit: '',
    // },
  ],
  marklinearr: [
    // { lineName: '轻微内涝', lineValue: 3, lineColor: '#f59a23' },
    // { lineName: '严重内涝', lineValue: 12, lineColor: '#d9001b' },
  ],
});
const siteList = ref([]);
const stCode = ref('');
const activedvalue = ref(0);

// 左侧点击
function leftclick(item, index) {
  activedvalue.value = index;
  siteList.value = item.siteList;
  stCode.value = item.siteList[0].stCode;
  GetechartList();
}

function GetpageList() {
  let params = {
    id: props.dataID,
  };
  getReservoirSiteList(params).then(res => {
    console.log('水质站点列表', res.data);
    if (res.data && res.data.length) {
      leftList.value = res.data;
      siteList.value = res.data[0].siteList;
      stCode.value = res.data[0].siteList[0].stCode;
      GetechartList();
    }
  });
}

function GetechartList() {
  showecharts.value = false;
  chartInfo2.value.marklinearr = [];
  let params = {};
  // 站点的参数
  if (props.arrstcode.includes(props.dataCode)) {
    params.stCode = props.dataID;
    params.dataCode = 'site';
  }

  // 基础数据的参数
  if (props.arrid.includes(props.dataCode)) {
    params.stCode = stCode.value;
    params.dataCode = props.dataCode;
  }

  if (dateTimearr.value) {
    params.start = dateTimearr.value[0];
    params.end = dateTimearr.value[1];
  } else {
    params.start = null;
    params.end = null;
  }

  getEchart(params).then(res => {
    showecharts.value = true;

    console.log(res.data);
    chartInfo2.value.XAxis = res.data.times;
    chartInfo2.value.yAxisarr = res.data.datas;

    res.data.datas.map(item => {
      chartInfo2.value.marklinearr.push(...item.cordonLineList);
    });

    console.log('chartInfo2.value.marklinearr', chartInfo2.value.marklinearr);

    chartInfo2.value.refresh = Math.random();
  });
}

onMounted(() => {
  GetpageList();
});
</script>

<style lang="scss" scoped>
#jiancexinxi {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  display: flex;
  color: #ccefff;
}

.leftbox {
  width: 40px;
  display: flex;
  flex-wrap: wrap;

  .boxitem {
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 15px;
    margin-bottom: 10px;
    padding: 5px;

    &.actived {
      color: #1fa9f6;
      border: 1px solid #1fa9f6;
    }
  }
}
.rightbox {
  margin-left: 10px;
  width: calc(100% - 30px);
}

.echartbody {
  width: 100%;
  height: calc(100% - 50px);
}
</style>