<template>
  <div class="detail-real-box">
    <div class="timeSearch">
      <span> 时间范围</span>
      <el-date-picker v-model="dateRange"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      @change="GetEchartlist"
                      end-placeholder="结束日期"></el-date-picker>

      <el-select filterable
                 v-model="ylzcode"
                 placeholder="请选择雨量站"
                 @change="GetEchartlist"
                 style="width: 150px">
        <el-option v-for="item in  ylzlist"
                   :key="item.stCode"
                   :label="item.stName"
                   :value="item.stCode" />
      </el-select>
    </div>
    <div class="detail-echarts">
      <DetailJsd :data="allData.chartData"
                 :refresh="allData.chartData.refresh"></DetailJsd>
    </div>
  </div>
</template>

<script setup>
import {
  getImageUrl,
} from "@/utils/ruoyi";

import {
  selectWaterLevelEchart,
  getSiteList
} from "@/api/cockpit";

import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment"
import useUserStore from '@/store/modules/user'
const appStore = useUserStore()
import DetailJsd from './components/detail-jsd.vue'

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
});

const ylzlist = ref([])
const ylzcode = ref('')

const dateRange = ref([
  moment().format("YYYY-MM-DD 00:00:00"),
  moment().format("YYYY-MM-DD HH:mm:ss")
])

const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  chartData: {
    DataName: "",
    XAxis: [],
    typeName: "1",
    typeName2: "2",
    YAxis: [], //雨量站
    YAxis2: [],  //积水深度
    one: '',
    two: '',
    three: '',
    loading: false,
    refresh: 1
  },
})

function showpic () {

};

// 获取下拉列表
function GetgetSiteList () {
  getSiteList(1).then(res => {
    console.log(res.data);
    ylzlist.value = res.data
    ylzcode.value = res.data[0].stCode
    GetEchartlist()
  })
}

// 查询echart
function GetEchartlist () {
  let prams = {
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    rainStcode: ylzcode.value,
    waterStcode: props.pointfeature.stCode
  }
  selectWaterLevelEchart(prams).then(res => {
    console.log(res.data);

    allData.chartData = {
      XAxis: res.data.datas,
      YAxis: res.data.rainValue, //雨量站
      YAxis2: res.data.waterValue,  //积水深度
      one: res.data.levelOne,
      two: res.data.levelTwo,
      three: res.data.levelThree,
      loading: false,
    }

    allData.chartData.refresh = Math.random()

  })
}

console.log(props.pointfeature);
switch (Number(props.pointfeature.pointType)) {
  // 内涝点
  case 1:
    GetgetSiteList()
    break;
}

</script>
<style lang="scss" scoped>
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  flex-direction: column;
}

.timeSearch {
  width: 100%;
  margin-bottom: 0px;
  // position: absolute;
  // z-index: 999;
}
</style>