<template>
  <div id="jianceEcharts">
    <div class="topdate">
      <el-select
        v-if="arrid.includes(dataCode)"
        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>
</template>

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

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
});

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('');

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();
  });
}

// 获取站点
function GetsiteList() {
  let params = {
    dataId: props.dataID,
    dataCode: props.dataCode,
  };
  getRELAList(params).then(res => {
    console.log(res.data);
    siteList.value = res.data;
    stCode.value = res.data[0].stCode;
    GetechartList();
  });
}

onMounted(() => {
  if (props.arrid.includes(props.dataCode)) {
    GetsiteList();
  } else {
    GetechartList();
  }

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

  setTimeout(() => {
    showecharts.value = true;
    chartInfo2.value.refresh = Math.random();
  }, 100);
});
</script>

<style lang="scss" scoped>
#jianceEcharts {
  width: 100%;
  height: calc(100% - 30px);
  color: #ccefff;

  .echartbody {
    width: 100%;
    height: 100%;
  }

  .topdate {
    height: 32px;
    padding: 0 10px;
    text-align: right;
  }
}
</style>