<template>
  <div class="detail-real-box historyBox">
    <div class="timeSearch">
      <span>上因子：</span>
      <el-select v-model="allData.up"
                 placeholder="请选择"
                 @change="GetgetUpDownDatas()"
                 style="width: 150px;">
        <el-option v-for="item in allData.GetyinziList"
                   :key="item.pointKey"
                   :label="item.pointName"
                   :value="item.pointKey">
        </el-option>
      </el-select>
      <span>下因子：</span>
      <el-select v-model="allData.down"
                 placeholder="请选择"
                 @change="GetgetUpDownDatas()"
                 style="width: 150px;">
        <el-option v-for="item in allData.GetyinziList"
                   :key="item.pointKey"
                   :label="item.pointName"
                   :value="item.pointKey">
        </el-option>
      </el-select>
      <span> 时间范围</span>
      <el-date-picker v-model="dateRange"
                      format="YYYY-MM-DD"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      @change="GetgetUpDownDatas()"
                      end-placeholder="结束日期"
                      style="width: 150px"></el-date-picker>
    </div>

    <div style="width: 100%; height: calc(100% - 45px)">
      <baobiaoecharts v-if="allData.chartData.yinziName"
                      :data="allData.chartData"
                      :refresh="allData.chartData.refresh"></baobiaoecharts>
    </div>

  </div>
</template>

<script setup>
import { getImageUrl } from "@/utils/ruoyi";
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 baobiaoecharts from "@/components/Detailbox/bengzhan/baobiaoecharts.vue";

import {
  getUpDownFactor,
  getUpDownDatas
} from "@/api/cockpit";

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

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


watch(
  () => props.refreshsecond,
  (newValue, oldValue) => {
    console.log('props.pointfeature', props.pointfeature);
    loadSiteYinZiData()
  },
  { immediate: true }
);

const allData = reactive({
  GetyinziList: [],  //因子列表
  up: "", //上因子
  down: "", //下因子
  yinziName: [], //筛选的因子名字列表

  chartData: {
    loading: false,
    data: [

    ],
    refresh: 1
  },
});


//获取站点分配的所有因子
function loadSiteYinZiData () {
  let format = new FormData()
  format.append('stationCode', props.pointfeature.pumpCode)
  getUpDownFactor(format).then(res => {
    console.log('getUpDownFactor', res.data);
    allData.GetyinziList = res.data
    allData.up = res.data[0].pointKey
    allData.down = res.data[0].pointKey
    // allData.yinziName = [res.data[0].pointName, res.data[0].pointName]

    GetgetUpDownDatas()
  });
}

//上下因子echart图 post
function GetgetUpDownDatas () {
  let firstname = allData.GetyinziList.filter(item => {
    return allData.up == item.pointKey
  })[0].pointName

  let secondname = allData.GetyinziList.filter(item => {
    return allData.down == item.pointKey
  })[0].pointName

  allData.yinziName = [firstname, secondname]

  let format = new FormData()
  format.append('stationCode', props.pointfeature.pumpCode)
  format.append('up', allData.up)
  format.append('down', allData.down)
  format.append('startTime', moment(dateRange.value[0]).format("YYYY-MM-DD HH:mm:ss"))
  format.append('endTime', moment(dateRange.value[1]).format("YYYY-MM-DD HH:mm:ss"))
  getUpDownDatas(format).then(res => {

    allData.chartData = {
      XAxis: res.data.time,
      YAxis: res.data.upData, //雨量站
      YAxis2: res.data.downData, //进水cod
      yinziName: allData.yinziName
    }

    setTimeout(() => {
      allData.chartData.refresh = Math.random()
    }, 0);

    console.log('allData.chartData.data', allData.chartData.data);
  })
}

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

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

.timeSearch {
  width: 100%;
}
</style>