<template>
  <!-- 内涝风险评估右侧内容 -->
  <!-- 模拟设计参数 -->
  <div class="partCont">
    <div class="mapTitle">模拟设计参数</div>
    <div class="chartDom">
      <br />
      <p class="param">
        设计降雨量：<span> {{ props.paramsCase.rainfall }} </span>
        mm
      </p>
      <p class="param">
        模拟积水最大面积：<span>{{ props.paramsCase.depthArea }} </span>公顷
      </p>
      <p class="param">
        模拟管网排水能力<br />
        满管长度：<span>{{ props.paramsCase.fillingLength }} </span> km， 总长度：
        <span>{{ props.paramsCase.pipelineFillingLength }} </span>
        km
      </p>
    </div>
  </div>
  <!-- 积水面积趋势 -->
  <div class="partCont" v-if="props.paramsCase.moduleTypeEnum == 'duration-depth' || props.paramsCase.moduleTypeEnum == 'duration-filling'">
    <div class="mapTitle" v-if="props.paramsCase.moduleTypeEnum == 'duration-depth'">积水面积趋势</div>
    <div class="mapTitle" v-if="props.paramsCase.moduleTypeEnum == 'duration-filling'">满管过程线</div>
    <div class="chartDom">
      <div id="zsArea"></div>
    </div>
  </div>
  <!-- 降雨过程线 -->
  <div class="partCont">
    <div class="mapTitle">设计降雨过程线</div>
    <div class="chartDom">
      <div id="zsRain"></div>
    </div>
  </div>
</template>

<script setup name="pageRight">
import { selectProcessLine, getRainfallByHourEnum } from '@/api/floodSys/floodYP';
import chartOption from './riskChart';
import * as echarts from 'echarts';

const props = defineProps({
  paramsCase: { type: Object },
});

const { proxy } = getCurrentInstance();
// 积水面积趋势
let chart1 = null;
const initEchartsZS = async () => {
  if (!!chart1) chart1.dispose();
  chart1 = echarts.init(document.getElementById('zsArea'));
  let types = props.paramsCase.moduleTypeEnum.includes('depth') ? 'depth' : 'filling';
  let params = {
    hours: props.paramsCase.hours,
    moduleTypeEnum: types,
    scenario: props.paramsCase.scenario,
  };
  selectProcessLine(params).then(res => {
    let datas = res.data;
    chartOption.option1.xAxis[0].data = datas.date;
    chartOption.option1.series[0].data = datas.data;
    chartOption.option1.yAxis[0].name = props.paramsCase.moduleTypeEnum == 'duration-depth' ? '模拟积水面积(公顷)' : '模拟满管长度(km)';
    chartOption.option1.series[0].name = props.paramsCase.moduleTypeEnum == 'duration-depth' ? '模拟积水面积' : '模拟满管长度';
    chartOption.option1.graphic.invisible = datas.date.length > 0; // 暂无数据
    chart1.clear();
    chart1.setOption(chartOption.option1);
  });
};
// 设计降雨过程线
let chart2 = null;
const initEchartsRain = async () => {
  if (!!chart2) chart2.dispose();
  chart2 = echarts.init(document.getElementById('zsRain'));
  let params = {
    hours: props.paramsCase.hours,
    planYearEnum: props.paramsCase.scenario,
  };
  getRainfallByHourEnum(params).then(res => {
    let datas = res.data;
    // console.log(datas, '9999999999999');

    chartOption.option2.xAxis[0].data = [];
    chartOption.option2.series[0].data = [];
    chartOption.option2.series[1].data = [];
    if (Boolean(datas.tsStr.length)) {
      datas.tsStr.forEach(i => {
        chartOption.option2.xAxis[0].data.push(i.substr(0, 5));
      });
    }
    if (Boolean(datas.rainList.length)) {
      datas.rainList.forEach(i => {
        chartOption.option2.series[0].data.push(i.toString().match(/^\d+(?:\.\d{0,1})?/)[0]);
      });
    }

    if (Boolean(datas.rainCountList.length)) {
      datas.rainCountList.forEach(i => {
        chartOption.option2.series[1].data.push(i.toString().match(/^\d+(?:\.\d{0,1})?/)[0]);
      });
    }
    chartOption.option2.graphic.invisible = datas.tsStr.length > 0; // 暂无数据
    chart2.clear();
    chart2.setOption(chartOption.option2);
    chart2.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 0,
    });
  });
};

watch(
  () => props.paramsCase.fid,
  val => {
    if (!!!props.paramsCase.fid) return;
    setTimeout(() => {
      initEchartsRain();
      initEchartsZS();
    });
  },
  { deep: true, immediate: true }
);
watch(
  () => props.paramsCase.moduleTypeEnum,
  val => {
    if (!!!props.paramsCase.moduleTypeEnum) return;
    if (props.paramsCase.moduleTypeEnum == 'duration-depth' || props.paramsCase.moduleTypeEnum == 'duration-filling') {
      setTimeout(() => {
        initEchartsZS();
      });
    }
  },
  { deep: true, immediate: true }
);
// echarts动画渲染
watch(
  () => props.paramsCase.featureStep,
  val => {
    if (!!!props.paramsCase.featureStep) return;
    setTimeout(() => {
      chart2.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: props.paramsCase.featureStep,
      });
    });
  },
  { deep: true, immediate: true }
);

onMounted(() => {});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.partCont {
  .chartDom {
    width: 100%;
    height: calc(31vh - 50px);
    #zsArea,
    #zsRain {
      width: 100%;
      height: 100%;
    }
    .param {
      background: $mainColor2;
      box-shadow: 0 0 0 1px $mainColor2 inset !important;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 30px;
      font-size: 15px;

      span {
        font-size: 22px;
        color: $pink;
      }
    }
  }
}
</style>