<template>
  <!-- 监测分析 -->
  <div id="jiancefenxiZSFX">
    <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"
    />
    </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="降雨日期">
              <!-- <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="90px" >
            <template #default="scope">
                <div>
                  {{ RainfallLevelFun(scope.row.rain )}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="zdjss" label="最大积水深(cm)"  />
            <el-table-column prop="nlqx" label="内涝情形"  />
            <el-table-column prop="duration" label="内涝持续时间(分钟)" width="160px" />
            <!-- <el-table-column prop="responseEndTime" label="备注" width="120" :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="jiancefenxiZSFX">
import { drainageDispatchRainAnalysisByZsjcd,getEchart } 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';
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
  }
  drainageDispatchRainAnalysisByZsjcd(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,  
      // 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
  });

}
onMounted(() => {

  console.log('Getproperties123',props.Getproperties);
  if(props.Getproperties.daterange){
    Timers.value=props.Getproperties.daterange
  }
  getDataEchart()
  gitDataFun()


});
</script>

<style lang="scss" scoped>
#jiancefenxiZSFX {
  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: 140px;
      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>