<template>
  <!-- 管网监测弹窗 -->
  <div class="supervisePopup" id="supervisePopup" v-show="allData.popupShow">
    <div class="title">
      <div class="titleName">{{ allData.dataList['stName'] }}</div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><Close /></el-icon>
      </div>
    </div>
    <div class="allContent">
      <div class="basicInfo">
        <div class="basicContent">
          <div class="contentInfo">
            <div class="contentName">站点编码：</div>
            <div class="contentValue">{{ allData.dataList['stCode'] }}</div>
          </div>
          <div class="contentInfo" v-if="allData.dataList['address']">
            <div class="contentName">安装地址：</div>
            <div class="contentValue" :title="allData.dataList['address']">
              {{ allData.dataList['address'] }}
            </div>
          </div>
          <div class="contentInfo">
            <div class="contentName">站点经度：</div>
            <div class="contentValue">{{ allData.dataList['lon'] }}</div>
          </div>
          <div class="contentInfo">
            <div class="contentName">站点纬度：</div>
            <div class="contentValue">{{ allData.dataList['lat'] }}</div>
          </div>
          <div class="contentInfo" v-if="allData.dataList['onlineStatus']">
            <div class="contentName">在线状态：</div>
            <div class="contentValue">{{ allData.dataList['onlineStatus'] }}</div>
          </div>
          <div class="contentInfo" v-if="allData.dataList['groundElevation']">
            <div class="contentName">地面标高：</div>
            <div class="contentValue">{{ allData.dataList['groundElevation'] }}m</div>
          </div>
          <div class="contentInfo" v-if="allData.dataList['bottomBuriedDepth']">
            <div class="contentName">井底标高：</div>
            <div class="contentValue">{{ allData.dataList['bottomBuriedDepth'] }}m</div>
          </div>
          <div class="contentInfo" v-if="allData.dataList['sectionTypeMax']">
            <div class="contentName">管径：</div>
            <div class="contentValue">{{ allData.dataList['sectionTypeMax'] }}m</div>
          </div>
          <!-- <div class="contentInfo" v-if="allData.dataList['sectionType']">
            <div class="contentName">管径：</div>
            <div class="contentValue">{{ allData.dataList['sectionType'] }}m</div>
          </div> -->
        </div>
        <el-image
          v-if="allData.dataList['coverPhotosFileList']"
          :src="allData.dataList['coverPhotosFileList'][0]"
          :preview-src-list="srcList"
          style="padding-left: 50px"
        />
      </div>
      <div class="dividerLine"></div>
      <div class="trend">
        <!-- <el-date-picker
          v-model="allData.dataTime1"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          @change="changeDate"
          style="width: 220px"
        /> -->
        <el-date-picker
          v-model="allData.dataTime1"
          type="date"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 120px; margin-left: 10px"
          @change="changeDate"
        />
        -
        <el-date-picker
          v-model="allData.dataTime2"
          type="date"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width: 120px"
          @change="changeDate"
        />
        <el-select v-model="selectCode" style="margin: 0px 0px 0px 10px; width: 120px" size="small" @change="changeSuperType">
          <el-option v-for="(item, index) in dataOption" :key="index" :label="item.label" :value="item.value" />
        </el-select>
        <div id="chartPopupSupervise" v-if="propertyMonitorXList.length > 0"></div>
        <!-- 暂无数据 -->
        <el-empty :image-size="80" v-if="propertyMonitorXList.length == 0" style="margin-top: 50px" />
      </div>
    </div>
  </div>
</template>

<script setup name="commonSupervisePopup">
import bus from '@/bus';
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
const { proxy } = getCurrentInstance();
const allData = reactive({
  popupShow: false,
  currentIndex: 1,
  warnFormulaValue: '',
  dataTime1: proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'),
  dataTime2: proxy.moment(new Date()).format('YYYY-MM-DD'),
  // dataTime1: [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
  dataList: {},
});
const dataOption = ref([]);
const selectData = ref([]);
const selectCode = ref('');
const seleceName = ref('');
const unitName = ref('');
const propertyMonitorXList = ref([]);

const dmgc = ref(''); //地面高程
const gqgc = ref(''); //管顶高程
const yjzhb = ref(''); //预警值带海拔
const swdhb = ref(''); //水位带海拔
const gdgc = ref(''); //管底高程

const closePopup = () => {
  allData.popupShow = false;
  allData.dataTime1 = proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD');
  allData.dataTime2 = proxy.moment(new Date()).format('YYYY-MM-DD');
  newfiberMapbox.map.easeTo({
    center: [114.312, 34.802],
    zoom: 12.9,
    pitch: 55,
  });

  let clearSelectedFeature = [];
  newfiberMapbox.getLayers().forEach(feature => {
    if (feature.newfiberId == 'highlight_point') {
      clearSelectedFeature.push(feature);
    }
  });

  if (!!clearSelectedFeature.length) {
    clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  }
};
//时间格式化
const getYearMonthDay = time => {
  return proxy.moment(time).format('YYYY-MM-DD');
};
const changeDate = () => {
  // allData.dataTime1 = [getYearMonthDay(allData.dataTime1[0]), getYearMonthDay(allData.dataTime1[1])];

  getSuperViseData();
};
function changeSuperType(val) {
  selectCode.value = val;
  let obj = dataOption.value.filter(item => item.value == val)[0];
  selectCode.value = obj.value;
  seleceName.value = obj.label;
  unitName.value = obj.propertyUnit;
  selectData.value = obj.ylist;
  allData.warnFormulaValue = '';
  if (Boolean(allData.dataList.siteWarnConfigList && allData.dataList.siteWarnConfigList.length) && seleceName.value) {
    let alist = JSON.parse(allData.dataList.siteWarnConfigList);
    alist.forEach(element => {
      if (element.warnFactorName.includes(seleceName.value)) {
        allData.warnFormulaValue = element.warnFormulaValue;
      }
    });
  }
  //如果是水位，则计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程

  if (seleceName.value === '水位' && allData.dataList.groundElevation) {
    var testData = { ...allData.dataList };
    // testData.endCopNoseElevation = '25.004';
    // testData.endGroundDepth = '0.98';

    var test = calcValue({
      groundElevation: testData.groundElevation,
      endTopElevation: testData.endTopElevation,
      sectionTypeMax: testData.sectionTypeMax,
      warnFormulaValue: allData.warnFormulaValue,
      waterLevel: selectData.value,
    });
    dmgc.value = test.dmgc; //地面高程
    gqgc.value = test.gxgc; //管顶高程
    yjzhb.value = test.yjzdhb; //预警值带海拔
    swdhb.value = test.swdhb; //水位带海拔
    gdgc.value = test.gdgc; //管底高程
  } else {
    dmgc.value = ''; //地面高程
    gqgc.value = ''; //管顶高程
    yjzhb.value = ''; //预警值带海拔
    swdhb.value = ''; //水位带海拔
    gdgc.value = ''; //管底高程
  }
  setTimeout(() => {
    initEcharts1();
  });
}

/**
 * 处理数字，若是NaN则返回空字符串，否则返回保留两位小数的字符串
 * @param {string} val
 */
function stringToNumberFixed(val) {
  return isNaN(val) ? '' : val.toFixed(2);
}
/**
 * 计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程
 * @param {*} posinfoData
 */
function calcValue(posinfoData) {
  var {
    groundElevation,
    endTopElevation,
    sectionTypeMax,
    // 水位
    waterLevel,
    // 预警值
    warnFormulaValue,
  } = posinfoData;
  // console.log('testtesttesttesttest', groundElevation, endTopElevation, sectionTypeMax, waterLevel, warnFormulaValue);
  // 地面高程 groundElevation
  // 管顶高程 endTopElevation
  // 预警值带海拔 endTopElevation-sectionTypeMax+预警值
  // 水位带海拔 endTopElevation-sectionTypeMax+水位
  // 管底高程 endTopElevation-sectionTypeMax

  var gxgc = parseFloat(endTopElevation);
  var tempVal = gxgc - parseFloat(sectionTypeMax);
  return {
    // 地面高程
    dmgc: stringToNumberFixed(parseFloat(groundElevation)),
    // 管顶高程
    gxgc: stringToNumberFixed(gxgc),
    // 预警值带海拔
    yjzdhb: warnFormulaValue ? stringToNumberFixed(tempVal + parseFloat(warnFormulaValue)) : '',
    // 水位带海拔
    swdhb: waterLevel.map(item => stringToNumberFixed(tempVal + parseFloat(item))),
    // 管底高程
    gdgc: stringToNumberFixed(tempVal),
  };
}
//获取监测数据
const getSuperViseData = async () => {
  let params = {
    startTime: allData.dataTime1,
    endTime: allData.dataTime2,
    // startTime: '2024-01-01',
    // endTime: '2024-01-02',
    stCode: allData.dataList['stCode'] || allData.dataList['站点编码'],
  };
  dataOption.value = [];
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    datas.propertyMonitorList.map(item => {
      dataOption.value.push({
        value: item.stCode + item.monitorPropertyName,
        label: item.monitorPropertyName,
        propertyUnit: item.propertyUnit,
        ylist: item.ylist,
      });
    });
    propertyMonitorXList.value = datas.propertyMonitorXList;
    if (datas.propertyMonitorXList.length == 0) return;
    selectCode.value = dataOption.value[0].value;
    seleceName.value = dataOption.value[0].label;
    unitName.value = dataOption.value[0].propertyUnit;
    selectData.value = dataOption.value[0].ylist;
    if (Boolean(allData.dataList.siteWarnConfigList && allData.dataList.siteWarnConfigList.length) && seleceName.value) {
      let alist = JSON.parse(allData.dataList.siteWarnConfigList);
      alist.forEach(element => {
        if (element.warnFactorName.includes(seleceName.value)) {
          allData.warnFormulaValue = element.warnFormulaValue;
        }
      });
    }
    //如果是水位，则计算地面高程、管顶高程、预警值带海拔、水位带海拔、管底高程

    if (seleceName.value === '水位' && allData.dataList.groundElevation) {
      var testData = { ...allData.dataList };
      var test = calcValue({
        groundElevation: testData.groundElevation,
        endTopElevation: testData.endTopElevation,
        sectionTypeMax: testData.sectionTypeMax,
        warnFormulaValue: allData.warnFormulaValue,
        waterLevel: selectData.value,
      });
      dmgc.value = test.dmgc; //地面高程
      gqgc.value = test.gxgc; //管顶高程
      yjzhb.value = test.yjzdhb; //预警值带海拔
      swdhb.value = test.swdhb; //水位带海拔
      gdgc.value = test.gdgc; //管底高程
    } else {
      chartOption.floodOneMapPipewater.series[1].data = [];
      chartOption.floodOneMapPipewater.series[1].markLine = '';
    }
    setTimeout(() => {
      initEcharts1();
    });
  }
};
//管网监测趋势图
let chartPopupSup = null;
const initEcharts1 = () => {
  if (!!chartPopupSup) chartPopupSup.dispose();
  chartPopupSup = echarts.init(document.getElementById('chartPopupSupervise'));
  chartOption.floodOneMapPipewater.legend.data = [seleceName.value];
  (chartOption.floodOneMapPipewater.yAxis[0] = {
    name: 'SS(mg/l)',
    type: 'value',
    textStyle: {
      color: '#00D1FF',
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#00D1FF', //刻度线的颜色
      },
    },
    splitLine: {
      //x网格样式
      show: true,
      lineStyle: {
        color: '#00D1FF',
        type: 'dashed',
      },
    },
  }),
    (chartOption.floodOneMapPipewater.yAxis[0].name = unitName.value);
  chartOption.floodOneMapPipewater.yAxis[1].name = '';

  // chartOption.floodOneMapPipewater.xAxis[0].data = propertyMonitorXList.value;
  chartOption.floodOneMapPipewater.xAxis[0].data = [];
  if (Boolean(propertyMonitorXList.value.length)) {
    propertyMonitorXList.value.forEach(i => {
      chartOption.floodOneMapPipewater.xAxis[0].data.push(i.substr(0, 16));
    });
  }
  chartOption.floodOneMapPipewater.series[0].name = seleceName.value;
  chartOption.floodOneMapPipewater.series[0].data = selectData.value;
  chartOption.floodOneMapPipewater.series[1].data = [];
  chartOption.floodOneMapPipewater.series[0].markLine = {
    symbol: 'none',
    label: {
      show: !!allData.warnFormulaValue,
      position: 'middle',
      formatter: seleceName.value + '警戒值：{c}',
      color: 'red',
      fontWeight: 'bold',
    },
    lineStyle: {
      color: 'red',
      width: 2,
      type: 'solid',
    },
    data: [
      {
        name: '警戒值',
        yAxis: allData.warnFormulaValue,
      },
    ],
  };
  if (seleceName.value === '水位' && swdhb.value) {
    chartOption.floodOneMapPipewater.series[0].data = swdhb.value;
    chartOption.floodOneMapPipewater.series[0].name = '水位';
    chartOption.floodOneMapPipewater.legend.data = ['水位'];

    chartOption.floodOneMapPipewater.series[0].markLine = {
      symbol: 'none', //去掉警戒线最后面的箭头
      label: {
        position: 'end', //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
      },
      data: [
        {
          silent: false, //鼠标悬停事件  true没有，false有
          lineStyle: {
            //警戒线的样式  ，虚实  颜色
            type: 'dashed',
            color: '#80c342',
          },
          name: '地面标高',
          yAxis: dmgc.value,
          label: {
            formatter: '地面标高',
            color: '#80c342',
            rotate: 40,
          },
        },
        {
          silent: false, //鼠标悬停事件  true没有，false有
          lineStyle: {
            //警戒线的样式  ，虚实  颜色
            type: 'dashed',
            color: '#4d90fe',
          },
          name: '管顶标高',
          yAxis: gqgc.value,
          label: {
            formatter: '管顶标高',
            color: '#4d90fe',
            rotate: 40,
          },
        },
        {
          silent: false, //鼠标悬停事件  true没有，false有
          lineStyle: {
            //警戒线的样式  ，虚实  颜色
            type: 'dashed',
            color: '#e94242',
          },
          name: '管底标高',
          yAxis: gdgc.value,
          label: {
            formatter: '管底标高',
            color: '#e94242',
            rotate: 40,
          },
        },
      ],
    };
    chartOption.floodOneMapPipewater.yAxis[0] = {
      type: 'value',
      name: '单位(m)',
      nameTextStyle: {
        //y轴上方单位的颜色
        color: '#00d1ff',
      },
      axisLabel: {
        textStyle: {
          color: '#00d1ff', // 设置 y 轴标签文字的颜色为绿色
        },
      },
      max: parseFloat(dmgc.value) + 2,
      min: stringToNumberFixed(gdgc.value - parseFloat(gdgc.value) * 0.05),
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    };
  }
  // 设置鼠标滚轮放大缩小展示数据区间
  chartOption.floodOneMapPipewater.dataZoom = [
    { type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] },
  ];
  if (propertyMonitorXList.value.length > 0) {
    chartOption.floodOneMapPipewater.graphic.invisible = true; //暂无数据
  } else {
    chartOption.floodOneMapPipewater.graphic.invisible = false; //暂无数据
  }
  console.log(chartOption.floodOneMapPipewater, 9999999);
  chartPopupSup.clear();
  chartPopupSup.setOption(chartOption.floodOneMapPipewater);
};
onMounted(() => {
  bus.on('closeCommonPopup', closeCommonPopup => {
    allData.popupShow = closeCommonPopup;
  });
  bus.on('popupSuperviseData', data => {
    allData.popupShow = data.popupShow;
    allData.dataList = data.popupInfo;
    if (!!chartPopupSup) chartPopupSup.dispose();
    selectCode.value = '';
    seleceName.value = '';
    getSuperViseData();
  });
});
onBeforeUnmount(() => {
  bus.off('popupSuperviseData');
  bus.off('closeCommonPopup');
});
</script>
<style lang="scss">
.supervisePopup {
  width: 748px;
  height: 476px;
  background-image: url('@/assets/newImgs/layer1.png');
  background-size: 100% 100%;
  z-index: 115;
  position: absolute;
  top: 80px;
  left: 330px;
  .title {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleName {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ccf1ff;
      line-height: 22px;
      padding-left: 80px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      padding-right: 40px;
      height: 22px;
      cursor: pointer;
    }
  }

  .allContent {
    display: flex;
    .basicInfo {
      width: 270px;
      margin-top: 10px;
      .basicContent {
        .contentInfo {
          display: flex;
          align-items: center;
          padding-left: 80px;
          .contentName {
            margin: 3px;
            height: 20px;
            width: 70px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #00d1ff;
          }
          .contentValue {
            height: 20px;
            width: 100px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #00d1ff;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .dividerLine {
      width: 3px;
      height: 350px;
      position: absolute;
      left: 250px;
      border: 1px;
      background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
    }
    .trend {
      width: 450px;
      #chartPopupSupervise {
        width: 90%;
        height: 300px;
        margin-top: 20px;
      }
    }
  }
}
</style>