<template>
  <!-- 管网监测分析 -->
  <div id="jiancefenxiGWFX">
    <div class="dateDatetimerange">
      <el-date-picker
        v-model="Timers"
        type="datetimerange"
        range-separator="至"
        :clearable="false"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        @change="datetimerangeChange"
        :default-time="defaultTime1"
      />
    </div>
    <div
      class="ChartHeight"
      v-loading="loadingEchart"
      element-loading-background="rgba(11, 18, 52, 0.3)"
    >
      <shuikujianceEcharts
        v-if="showecharts"
        :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 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="140px">
            <!-- <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="降雨级别">
            <template #default="scope">
              <div>
                {{ RainfallLevelFun(scope.row.rain) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maxData" label="最大雨强(mm)" />
          <el-table-column prop="zdss" label="最大水深(cm)" />
          <el-table-column prop="cmd" label="充满度" />
          <el-table-column prop="warn" label="风险" />
          <el-table-column prop="duration" label="风险时长(分钟)" width="140px" />
        </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 class="tableBox">
      <div class="name">均值分析:</div>
      <div class="text popUpTable">
        <el-table :data="tableData.JunZhiData" class="w100" stripe>
          <el-table-column
            v-for="(item, index) in tableData.JunZhiHeader"
            :prop="item.field"
            :label="item.name"
            :key="index"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="jiancefenxiGWFX">
import {
  drainageDispatchRainAnalysisByGwjcd,
  getEchart,
  dataSiteRelationGetHistoryCount,
} from "@/api/MonitorAssetsOnMap";
import { Back } from "@element-plus/icons-vue";

import shuikujianceEcharts from "@/views/pictureOnMap/page/components/DialogTabs/component/shuikujianceEcharts.vue";

import moment from "moment";
import { reactive } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
  Getproperties: {
    type: Object,
  },
});
const defaultTime1 = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
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();
  gitDataFun();
  getJunZhiData();
};
// 获取数据
const loading = ref(false);
const listData = ref({});
const tableData = reactive({
  JunZhiData: [],
  JunZhiHeader: [],
});

function gitDataFun() {
  loading.value = true;
  let params = {
    id: props.Getproperties.id,
  };
  drainageDispatchRainAnalysisByGwjcd(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);
};
function RainfallLevelFun(rain) {
  let sum = Number(rain);
  let text = "";
  switch (true) {
    // 江河水位
    case sum > 200:
      text = "特大暴雨";
      break;
    case sum > 100:
      text = "大暴雨";
      break;
    case sum > 50:
      text = "暴雨";
      break;
    case sum > 25:
      text = "大雨";
      break;
    case sum > 10:
      text = "中雨";
      break;
    case sum > 0:
      text = "小雨";
      break;
    default:
      text = "无雨";
  }
  return text;
}

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: [],
  marklinearr: [],
});

let loadingEchart = ref(false);
const showecharts = ref(false);
function getDataEchart() {
  showecharts.value = false;
  loadingEchart.value = true;
  let params = {
    stType: props.Getproperties.stType,
    stCode: props.Getproperties.stCode,
    dataCode: props.Getproperties.dataCode,
    // 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) => {
      showecharts.value = true;
      loadingEchart.value = false;

      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();
    },
    (error) => {
      loadingEchart.value = false;
    }
  );
}
const getJunZhiData = () => {
  dataSiteRelationGetHistoryCount({
    stCode: props.Getproperties.stCode,
    start: Timers.value[0],
    end: Timers.value[1],
    stType: props.Getproperties.stType,
  }).then((res) => {
    if (res && res.code == 200) {
      tableData.JunZhiHeader = res.data.head;
      tableData.JunZhiData = res.data.data;
    }
  });
};
onMounted(() => {
  console.log("Getproperties123", props.Getproperties);
  if (props.Getproperties.daterange) {
    Timers.value = props.Getproperties.daterange;
  }
  getDataEchart();
  gitDataFun();
  getJunZhiData();
});
</script>

<style lang="scss" scoped>
#jiancefenxiGWFX {
  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-width: 200px;
      min-height: 37px;

      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: 160px;
      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;
      }
    }
  }

  .junZhiFenXi {
    width: 100%;
    height: 300px;
  }
}
</style>