<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" @change="searchFun">
            <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
            @change="searchFun"
            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="观测时间">

            </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 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>
  </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, getEchart } from '@/api/MonitorAssetsOnMap';
import shuikujianceEcharts from '@/views/pictureOnMap/page/components/DialogTabs/component/shuikujianceEcharts.vue';

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;
  getDataEchart();
}
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()
        getDataEchart();
      }
    }
  });
}
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();
};
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: Search_form.stCode,
    start: Search_form.Timers[0],
    end: Search_form.Timers[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('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;
    }
  }
  .ChartHeight {
    width: 100%;
    height: 550px;
  }
}
</style>