<template>
<!-- 关联监测 -->
  <div class="guanlianjianceHeHu flex">
    <!-- <div class="leftBtn flex flex-v flex-justcontent-spacearound">
        <div class="btnClass" :class="item.value==activeValue?'activeBtn':'' " v-for="(item) in tabList" :key="item.value" @click="tabGLClick(item)">{{item.label}}</div>
    </div> -->
    <div class="flex-1 GLJCform">
      <el-form :model="Search_form" label-width="auto"  :inline="true">
        <el-form-item label="监测点">
          <el-select v-model="Search_form.stCode" >
            <el-option
              v-for="item in AllData.paikou"
              :key="item.stCode"
              :label="item.stName"
              :value="item.stCode"
            />
          </el-select>
        </el-form-item>
         <el-form-item label="监测时间">
          <el-date-picker 
            v-model="Search_form.Timers"
            type="datetimerange"
            range-separator="至"
            :clearable="false"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            />
        </el-form-item>

        <el-form-item>
          <el-button color="#0B9BFF" :icon="Search" @click="searchFun">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="popUpTable" v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
        <el-table :data="AllData.tableData" class="" stripe>
            <el-table-column prop="tt" label="观测时间">
              <!-- <template #default="scope">
                  {{ moment(scope.row.time).format("YYYY年MM月DD日") }}
              </template> -->
            </el-table-column>
            <el-table-column prop="zvalue" label="水位(m)"  />
            <el-table-column prop="time" label="水位趋势">
              <template #default="scope">
                  <div v-html="scope.row.zvalueTrend"></div>
              </template>
            </el-table-column>
            <el-table-column prop="zamplitude" label="幅度"  />
          </el-table>
                <div class="paginationBox">
        <el-pagination v-if="Search_form.query.total>0"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="Search_form.query.pageSize"
          :total="Search_form.query.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      </div>
    </div>
  </div>
</template>
<script setup name="guanlianjianceHeHu">
import {ref,reactive,onMounted} from "vue"
import { Search } from "@element-plus/icons-vue";

import { siteHistoryMonitorDataAnalysis } from '@/api/FloodControlAndDrainage';
import { getRELAList } from '@/api/MonitorAssetsOnMap';
import moment from 'moment';

const { proxy } = getCurrentInstance();
const props = defineProps({
  Getproperties:{
    type: Object,
  }
});
const loading=ref(false)
const activeValue=ref('SW')
const tabList=ref([
  {
    label:'河湖水位监测',
    value:'SW'
  },
  // {
  //   label:'河湖水质监测',
  //   value:'SZ'
  // },
])
const AllData = reactive({
paikou:[],
tableData:[]
})
const Search_form = reactive({
  stCode: "",
  Timers: [
  moment().subtract(3, "day").format("YYYY-MM-DD HH:mm:ss"),
    moment().format("YYYY-MM-DD HH:mm:ss"),
],
  query: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
});
function searchFun(){
  Search_form.query.pageNum=1
  Search_form.query.pageSize=10
  getTableList()
}
const  tabGLClick=(e)=>{
  activeValue.value=e.value
}
// 获取对应排口
function getpaikouData(){
  let  params={
    dataCode:'lake_info',
    dataId:props.Getproperties.id
  }
   getRELAList(params).then(res => {
    if (res && res.code == 200) {
      AllData.paikou=res.data
      if(res.data?.length>0){
        Search_form.stCode=res.data?.[0].stCode
      getTableList()
      }
      
    }
   })
}
function getTableList(){
  loading.value=true
  let params={
    stCode:Search_form.stCode,
    // stCode:'0201460310',
    startTime:Search_form.Timers[0],
    endTime:Search_form.Timers[1],
    pageSize:Search_form.query.pageSize,
    pageNum:Search_form.query.pageNum,
  }
   siteHistoryMonitorDataAnalysis(params).then(res => {
  loading.value=false

    if (res && res.code == 200) {
      Search_form.query.total=res.total
      AllData.tableData=res.data
    }
   },(error)=>{
    loading.value=false
  })
}
const handleSizeChange = (val) => {
  Search_form.query.pageSize = val;
  console.log(Search_form.query);
  getTableList()

};
const handleCurrentChange = (val) => {
  Search_form.query.pageNum = val;
  console.log(Search_form.query);
  getTableList()
};
onMounted(() => {
  console.log('props.Getproperties.id',props.Getproperties);
  getpaikouData()
  if(props.Getproperties.daterange){
    Search_form.Timers=props.Getproperties.daterange
  }
});

</script>
<style lang="scss" scoped>
.guanlianjianceHeHu {
  height: 100%;
  padding:0 15px;
  .leftBtn {
    min-width: 120px;
    height: 100%;
    border-right: 1px solid #0d2359;
    padding-right: 10px;
    box-sizing: border-box;
    .btnClass {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #283179;
      color: #fff;
      font-size: 16px;
      border-radius: 3px;
      cursor: pointer;
    }
    .activeBtn {
      background: #409EFF;
      border: none;
    }
  }
    :deep(.GLJCform) {
    height: 110px;
    // width: 100%;
      width: calc(100% - 150px);
padding-left: 10px;
    box-sizing: border-box;
    .el-form-item__label {
      font-weight: bold;
      font-size: 14px;
      color: #ccdfff;
    }
    .el-input__wrapper {
      background: #0d2359;
      border-radius: 6px;
      border: 1px solid #0b9bff;
      box-shadow: none;

      .el-input__inner {
        color: #8fbffe;
      }
    }
    .el-select {
      background: #0d2359;
    }
    .el-date-editor .el-range-input {
      color: #8fbffe;
    }
    .el-date-editor .el-range-separator,.el-date-editor .el-range__icon {
      color: #fff;
    }
  }

}

</style>