<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"
    />
    </div>
    <div class="ChartHeight"  v-loading="loadingEchart"
    element-loading-background="rgba(11, 18, 52, 0.3)">
      <MonitoringAnalysisChart  v-if="isEchart" :refresh="chartInfo2.refresh"
                          :DataName="chartInfo2.DataName"
                          :XAxis="chartInfo2.XAxis"
                          :YAxis="chartInfo2.YAxis"
                          :typeName="chartInfo2.typeName"
                          :typeName2="chartInfo2.typeName2"
                          :YAxis2="chartInfo2.YAxis2"
                          :marklineJYL="chartInfo2.marklineJYL"
                          :marklineSS="chartInfo2.marklineSS"
                          
                          />
    </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>
</template>

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

import MonitoringAnalysisChart from './MonitoringAnalysisChart.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({})
const tableData=ref([])

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: [

        ],
        typeName: '5分钟降雨量(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,  
      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 => {
    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(() => {

    console.log('Getproperties123',props.Getproperties);
    getDataEchart()
  gitDataFun()



});
</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;
      }
    }
  }
}
</style>