<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)">
        <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"
          XnameTop="-480"
        />
      </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 MonitoringAnalysisChart from './MonitoringAnalysisChart.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: [],
  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: Search_form.stCode,
    start: Search_form.Timers[0],
    end: Search_form.Timers[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('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>