<template>
  <div class="water-analysis-page">
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7="" v-if="!isComponent"></MapBox>

    <div class="top" v-if="!isComponent">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-top: -10px">
        <el-tab-pane label="工程法" name="todo"> </el-tab-pane>
        <el-tab-pane label="监测法" name="done"> </el-tab-pane>
      </el-tabs>
    </div>
    <detial v-else-if="isComponent.type == 1" @searchClick="searchClick" :isComponent="isComponent"></detial>
    <jcdetial v-else @searchClick="searchClick" :isComponent="isComponent"></jcdetial>

    <div v-if="activeName == 'todo' && !isComponent">
      <div class="icon">
        <module ref="todoDonRef" :params="tableData" @searchClick="searchClick"></module>
      </div>
      <div class="tuli">
        <div style="margin: 10px; font-size: 18px">图例</div>
        <div v-for="i in tuliList" class="tuli_img">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
      </div>
    </div>
    <div v-if="activeName == 'done' && !isComponent">
      <div class="icon">
        <jctable ref="todoDonRef" :params="tableData" @searchClick="searchClick"></jctable>
      </div>

      <div class="tuli" v-if="activeName == 'todo'">
        <div style="margin: 10px; font-size: 18px">图例</div>
        <div v-for="i in tuliList" class="tuli_img">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
      </div>
      <div class="tuli" v-else>
        <div style="margin: 10px; font-size: 18px">图例</div>
        <div v-for="i in tuliList1" class="tuli_img">
          <img :src="i.icon" alt="" />
          <div>{{ i.label }}</div>
        </div>
      </div>
    </div>
    <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
      <div class="titleTop">
        <el-tabs class="PopupWaterloggingtabs" @tab-change="tabChange">
          <el-tab-pane label="积水过程线">
            <div class="allContent">
              <div>开始时间：{{ yearMaxStartTime }}</div>
              <div>结束时间：{{ yearMaxEndTime }}</div>
              <empty v-if="pipePopupdata" emptyText="暂无积水数据" :width="100" :height="100" style="margin-top: 50px"></empty>
              <div id="chartPopupRain" class="chartHeight"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="历史积水记录">
            <el-table
              ref="tableModal"
              :data="tableData2"
              max-height="240"
              v-loading="tableLoading"
              @row-click="clickModal"
              highlight-current-row
            >
              <el-table-column label="发生时间" prop="startTime" width="160px" />
              <el-table-column label="持续小时" prop="durationTime" width="120px">
                <template #default="scope">
                  <span>{{ formatter(scope.row.durationTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最大积水深度（cm）" prop="maxLevel" width="160px" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><Close /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
import bus from '@/utils/mitt';
import detial from './detial/index';
import jcdetial from './jcdetial/index';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import module from './module.vue';
import jctable from './jctable.vue';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
import { waterloggingRecordList } from '@/api/spongePerformance/waterloggedArea';
const { proxy } = getCurrentInstance();
const todoDonRef = ref(null);
const pipePopupShow = ref(false);
const yearMaxStartTime = ref('');
const yearMaxEndTime = ref('');
const stCodes = ref('');
const pipePopupdata = ref(false);
let isComponent = ref(0);
const activeName = ref('todo');
const tableData2 = ref([]);
const waterEchart = shallowRef(null);
let tuliList = ref([
  { label: '未消除内涝点', id: 0, icon: '/images/1.1.jpg' },
  { label: '已消除内涝点', id: 1, icon: '/images/1.2.jpg' },
]);
let tuliList1 = ref([
  { label: '未消除内涝点', id: 0, icon: '/images/1.1.jpg' },
  { label: '已消除内涝点', id: 1, icon: '/images/1.2.jpg' },
]);

//动态组件
let dataForm = reactive({
  tableData: {},
  tableData: { examineType: 'water_logging', examineMethod: 'engineering ' },
  tableDateTwo: '',
  tableLoading: true,
});
let { tableData } = toRefs(dataForm);
// 获取列表数据
function handleClick({ props: { name } }) {
  activeName.value = name;
  // console.log('name', name);
  if (name == 'todo') tableData.value = { examineType: 'water_logging', examineMethod: 'engineering' };
  else tableData.value = { examineType: 'water_logging', examineMethod: 'monitoring' };
}
function searchClick(v) {
  isComponent.value = v;
}
// 积水历史记录列表
const lsjsTabList = async () => {
  let params = {
    startTime: yearMaxStartTime.value,
    endTime: yearMaxEndTime.value,
    stCode: stCodes.value,
  };
  let res = await waterloggingRecordList(params);
  if (res && res.code == 200) {
    let datas = res.data;
    tableData2.value = [];
    tableData2.value = datas;
  }
};

function formatter(row) {
  // console.log(row.durationTime / 60, 123123);
  let a = Math.floor(row / 60);
  return a;
}

//获取监测数据
const getSuperViseData = async () => {
  let params = {
    startTime: yearMaxStartTime.value,
    endTime: yearMaxEndTime.value,
    stCode: stCodes.value,
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    pipePopupShow.value = true;
    if (datas.propertyMonitorXList.length == 0) {
      pipePopupdata.value = true;
      return;
    }
    if (Boolean(datas.propertyMonitorXList.length)) {
      propertyMonitorXList.value = [];
      datas.propertyMonitorXList.forEach(i => {
        propertyMonitorXList.value.push(i.substr(0, 16));
      });
    }
    unitName.value = datas.propertyMonitorList[0].propertyUnit;
    selectData.value = datas.propertyMonitorList[0].ylist;

    //降雨过程线
    setTimeout(() => {
      initEchartsPopup();
    }, 1000);
  }
};

// 积雨趋势折线图
let chartPopupRain = null;
const initEchartsPopup = () => {
  if (!!chartPopupRain) chartPopupRain.dispose();
  chartPopupRain = echarts.init(document.getElementById('chartPopupRain'));
  chartOption.popupRainTrend.legend.data = [seleceName.value];
  chartOption.popupRainTrend.yAxis.name = unitName.value;
  chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
  chartOption.popupRainTrend.series.name = seleceName.value;
  chartOption.popupRainTrend.series.data = selectData.value;
  // 设置鼠标滚轮放大缩小展示数据区间
  chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
  if (propertyMonitorXList.value.length > 0) {
    chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
  } else {
    chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
  }
  chartPopupRain.clear();
  chartPopupRain.setOption(chartOption.popupRainTrend);
};

const closePopup = () => {
  pipePopupShow.value = false;
};

const tabChange = tab => {
  lsjsTabList();
  getSuperViseData();
};
onMounted(() => {
  bus.on('waterLoginclickfeature', e => {
    if (e.isFlood == '1') {
      yearMaxStartTime.value = e.yearMaxStartTime;
      yearMaxEndTime.value = e.yearMaxEndTime;
      stCodes.value = e.stCodes;
      getSuperViseData();
      lsjsTabList();
    }
    // console.log(e, 9999999999);
    pipePopupShow.value = true;
  });
});
onBeforeUnmount(() => {
  bus.off('waterLoginclickfeature');
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  width: 100%;
  height: 95%;
  .top {
    position: absolute;
    z-index: 99;
    left: 30px;
    top: 20px;
  }
  .icon {
    right: 20px;
    top: 20px;
    z-index: 111;
    position: absolute;
    width: 70%;
  }
  .tuli {
    left: 20px;
    bottom: 40px;
    z-index: 111;
    position: absolute;
    padding: 10px;
    background: #00314e;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    div {
      flex: 1;
    }
    .tuli_img {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      img {
        margin-right: 10px;
        width: 25px;
      }
    }
  }
}
#PopupWaterlogging {
  position: fixed;
  left: 52%;
  bottom: 5%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 310px;
  background: #021534;
  border: 1px solid #114f89;
  z-index: 2000;
  display: flex;
  .allContent {
    width: 425px;
    height: 300px;
  }
  .chartHeight {
    width: 450px;
    height: 205px;
  }
  .titleTop {
    width: 95%;
    display: flex;
    padding-top: 8px;
    margin-left: 20px;
  }
  .closePopup {
    width: 5%;
    margin: 15px;
    cursor: pointer;
  }
  .PopupWaterloggingtabs {
    width: 100%;
  }
}
</style>