<template>
  <!-- 泵站分析 -->
  <div class="jiancefenxiBZ">
    <!-- 泵站目前没有接入  没有监测数据20241126 -->

    <div class="flex flex-justcontent-spacebetween">
      <div class="eachInfo">
        <div class="name">所属雨水分区:</div>
        <div class="text">{{ listData.rainArea }}</div>
      </div>
      <div class="eachInfo">
        <div class="name">运维片区:</div>
        <div class="text">{{ listData.watchAreaName }}</div>
      </div>
    </div>

    <div class="tableBox">
      <div class="name">历史经验:</div>
      <div class="text popUpTable">
        <el-table :data="listData.rainHistoryList" class=" w100" stripe>
          <el-table-column prop="time" label="降雨日期" width="125">
            <!-- <template #default="scope">
                  {{ moment(scope.row.time).format("YYYY年MM月DD日") }}
              </template> -->
          </el-table-column>
          <el-table-column prop="rain" label="日降雨量(mm)" />
          <el-table-column prop="jyjb" label="降雨级别" width="80">
            <template #default="scope">
              <div>
                {{ RainfallLevelFun(scope.row.rain) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maxData" label="最大雨强(mm)" />
          <el-table-column prop="openNum" label="开泵数" width="70" />
          <el-table-column prop="kjts" label="开机台时(小时)" />
          <el-table-column prop="dayCpl" label="抽排量(万m³)" />
          <el-table-column prop="kbmx" label="开泵明细" :show-overflow-tooltip="true" />
        </el-table>
      </div>
    </div>
    <div class="eachInfo">
      <div class="name">周边环境分析:</div>
      <div class="text">{{ listData.zbhjfx }}</div>
    </div>

    <div class="eachInfo">
      <div class="name">分析建议:</div>
      <div class="text">{{ listData.fxjy }}</div>
    </div>
  </div>
</template>

<script setup name="jiancefenxiBZ">
import { drainageDispatchRainAnalysisByBz, getEchart } from '@/api/MonitorAssetsOnMap';
import shuikujianceEcharts from '@/views/pictureOnMap/page/components/DialogTabs/component/shuikujianceEcharts.vue';

import moment from 'moment';
import { RainfallLevelFun } from '@/utils/util.js';

const { proxy } = getCurrentInstance();

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

const Timers = ref([moment().subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]);

const datetimerangeChange = () => {
  getDataEchart();
};
// 获取数据
const loading = ref(false);
const listData = ref({
});


function gitDataFun() {
  loading.value = true;
  let params = {
    id: props.Getproperties.id,
  };
  drainageDispatchRainAnalysisByBz(params).then(
    res => {
      console.log('监测分析泵站历史', res);
      loading.value = false;
      if (res && res.code == 200) {
        listData.value = res.data;
      }
    },
    error => {
      loading.value = false;
    }
  );
}

const changeTime = e => {
  console.log('e', e);
};

const chartInfo2 = ref({
  refresh: 1,
  // DataName: "",
  XAxis: [],
  typeName: '小时降雨量(mm)',
  typeName2: '水深(m)',
  YAxis: [],
  YAxis2: [],
  loading: false,
  marklineJYL: [],
  marklineSS: [],
});
let isEchart = ref(false);
let loadingEchart = ref(false);
function getDataEchart() {
  loadingEchart.value = true;
  let params = {
    stType: props.Getproperties.stType,
    stCode: props.Getproperties.stCode,
    // start:'2024-09-01 12:12:12',
    // end:'2024-12-01 12:12:12',
    //       dataCode:'reservoir_info',
    // stType:'reservoir_water_level',
    // stCode:'4201110002',
    start: Timers.value[0],
    end: Timers.value[1],
  };
  console.log('params', params);
  getEchart(params).then(
    res => {
      isEchart.value = true;

      let res1 = {
        code: 200,
        msg: '操作成功',
        data: {
          datas: [
            {
              dataKey: 'z',
              dataName: '黄海水位',
              unit: '(m)',
              datas: ['0', '0', '1', '0', '2', '0.5', '0', '0', '0', '0.2'],
              cordonLineList: [
                {
                  id: '1856620587907244131',
                  cordonId: '1856647503229968394',
                  lineName: '正常蓄水位',
                  lineValue: '1.3',
                  lineType: '2',
                  lineColor: 'rgba(0, 255, 68, 1)',
                  systemDefault: '0',
                  code: 'normal_water_level',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
                {
                  id: '1856620587932409132',
                  cordonId: '1856647503229968394',
                  lineName: '设计洪水位',
                  lineValue: '1.8',
                  lineType: '1',
                  lineColor: 'rgba(221, 255, 0, 1)',
                  systemDefault: '0',
                  code: 'design_flood_level',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
                {
                  id: '1856620587936604135',
                  cordonId: '1856647503229968394',
                  lineName: '校核洪水位',
                  lineValue: '1.98',
                  lineType: '1',
                  lineColor: 'rgba(255, 191, 0, 1)',
                  systemDefault: '0',
                  code: 'verify_flood_level',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
                {
                  id: '1856620587936604134',
                  cordonId: '1856647503229968394',
                  lineName: '坝顶高程',
                  lineValue: '2.8',
                  lineType: '1',
                  lineColor: 'rgba(255, 81, 0, 1)',
                  systemDefault: '0',
                  code: 'dam_hight',
                  stConfig: 'z',
                  calcType: '2',
                  relateRainSiteSt: '4201110002',
                },
              ],
            },
            {
              dataKey: 'pn05',
              dataName: '降雨量',
              unit: 'mm',
              datas: ['10', '5', '11', '2', '2', '20', '15', '0', '0', '0.2'],
              cordonLineList: [],
            },
          ],
          times: [
            '1732291200000',
            '1732291200000',
            '1732291800000',
            '1732292100000',
            '1732292400000',
            '1732292700000',
            '1732293000000',
            '1732293300000',
            '1732293600000',
            '1732293900000',
          ],
        },
      };
      console.log('监测分析统计res', res);
      loadingEchart.value = false;

      if (res && res.code == 200) {
        let data = res.data;
        let pn05Arr = data.datas.find(item => item.dataKey == 'pn05') || []; //降雨
        let zArr = data.datas.find(item => item.dataKey == 'z') || []; //水深
        if (pn05Arr) {
          chartInfo2.value.YAxis = pn05Arr.datas;
          chartInfo2.value.marklineJYL = pn05Arr.cordonLineList;
        }
        if (zArr) {
          chartInfo2.value.YAxis2 = zArr.datas;
          chartInfo2.value.marklineSS = zArr.cordonLineList;
        }

        chartInfo2.value.XAxis =  data.times;
        // console.log('chartInfo2123', chartInfo2.value);
        chartInfo2.value.refresh = Math.random();
      }
    },
    error => {
      loadingEchart.value = false;
    }
  );
}
onMounted(() => {
  // getDataEchart()
  gitDataFun();
});
</script>

<style lang="scss" scoped>
.jiancefenxiBZ {
  width: 100%;
  height: 100%;
  color: #ccefff;
  padding: 0px 15px;
  overflow-y: auto;
  .ChartHeight {
    width: 100%;
    height: 250px;
  }
  .eachInfo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;

    .name {
      color: #ccdfff;
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .text {
      flex: 1;
      min-height: 37px;
      min-width: 200px;
      color: #8fbffe;
      background: #0d2359;
      border-radius: 6px;
      border: 1px solid #0b9bff;
      padding: 7px 12px;
    }
  }
  .tableBox {
    display: flex;
    font-size: 14px;
    margin-bottom: 10px;
    color: #ccefff;
    .name {
      color: #ccdfff;
      min-width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .text {
      width: calc(100% - 100px);
    }
    :deep(.el-scrollbar__wrap) {
      max-height: 440px;
      overflow-y: auto;
    }
  }

  .dateDatetimerange {
    margin-bottom: 10px;
    :deep(.el-range-editor.el-input__wrapper) {
      background: #0d2359;

      box-shadow: none;
      .el-range-separator {
        color: #fff;
      }
      .el-range-input {
        color: #fff;
      }
    }
  }
}
</style>