<template>
  <!-- 降雨分析报告 -->
  <div class="rainSituationReport">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.val" v-for="item in tabsList"></el-tab-pane>
    </el-tabs>
    <el-form :model="queryParams" ref="queryRef" :rules="Formrules" :inline="true" label-width="90px">
      <el-form-item label="日期选择：" prop="dateTime">
        <el-date-picker
          :value-format="activeName == 'day' ? 'YYYY-MM-DD' : activeName == 'month' ? 'YYYY-MM' : 'YYYY'"
          :clearable="false"
          :type="activeName == 'day' ? 'date' : activeName == 'month' ? 'month' : 'year'"
          placeholder="选择日期"
          v-model="queryParams.dateTime"
          style="width: 180px"
          :popper-class="activeName == 'day' ? 'dialogMonthPopperClass' : 'dialogPopperClass'"
          @panel-change="panelChange"
        >
          <template #default="cell" v-if="activeName == 'day'">
            <div class="cell" :class="{ current: cell.isCurrent }">
              <span class="text">{{ cell.text }}</span>
              <div class="data" v-for="(item, index) in rainCalenderData" :key="item">
                <div class="data-body" v-if="item.rainTime == cell.dayjs.format('YYYY-MM-DD')">
                  <div
                    class="datadiv"
                    style="color: #ffffff"
                    :class="[
                      item.rainLevel == '' ? 'MIDDLE0' : '',
                      item.rainLevel == '1' ? 'MIDDLE1' : '',
                      item.rainLevel == '2' ? 'MIDDLE2' : '',
                      item.rainLevel == '3' ? 'MIDDLE3' : '',
                      item.rainLevel == '4' ? 'MIDDLE4' : '',
                      item.rainLevel == '5' ? 'MIDDLE5' : '',
                      item.rainLevel == '6' ? 'MIDDLE6' : '',
                    ]"
                  >
                    {{ Number(item.rainCumulative) > 1 ? item.rainCumulative + 'mm' : '' }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="雨量站：" prop="stCodeList">
        <el-select
          filterable
          v-model="queryParams.stCodeList"
          :clearable="false"
          multiple
          collapse-tags
          placeholder="雨量站"
          popper-class="dialogPopperClass"
        >
          <el-option v-for="item in rainData" :key="item.stCode" :label="item.stName" :value="item.stCode" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button plain type="warning" icon="Download" @click="downloadPdf" style="margin-left: 10px">导出</el-button>
        <el-button plain type="warning" icon="Download" @click="downloadPdf" v-if="activeName == 'year'" style="margin-left: 10px">
          各雨量站日累计降雨量导出
        </el-button>
      </el-form-item>
    </el-form>
    <ReportDayDetail
      v-if="queryParams.stCodeList && queryParams.stCodeList.length && activeName == 'day'"
      :params="queryParams"
      :rainfallIntensity="rainfall_intensity"
    >
    </ReportDayDetail>
    <ReportMonthDetail
      v-if="queryParams.stCodeList && queryParams.stCodeList.length && activeName == 'month'"
      :params="queryParams"
      :rainfallIntensity="rainfall_intensity"
    >
    </ReportMonthDetail>
    <ReportYearDetail
      v-if="queryParams.stCodeList && queryParams.stCodeList.length && activeName == 'year'"
      :params="queryParams"
      :rainfallIntensity="rainfall_intensity"
    >
    </ReportYearDetail>
  </div>
</template>
<script setup>
import bus from '@/bus';
import { rainTimeDay } from '@/api/zongHeDD.js';
import { getStationList } from '@/api/sponeScreen/syntherticData';
import ReportDayDetail from './rainFX/ReportDayDetail.vue';
import ReportMonthDetail from './rainFX/ReportMonthDetail.vue';
import ReportYearDetail from './rainFX/ReportYearDetail.vue';
const { proxy } = getCurrentInstance();
const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度  字典数据
const queryParams = ref({
  dateTime: '',
  stCodeList: [],
  rainLevel: '',
});
const search = ref({
  time: '',
});
const activeName = ref('day');
const Formrules = reactive({
  stCodeList: [{ required: true, message: '请至少选择一个雨量站', trigger: ['change'] }],
});
const tabsList = [
  { name: '日降雨情况', val: 'day' },
  { name: '月降雨情况', val: 'month' },
  { name: '年降雨情况', val: 'year' },
];
const rainCalenderData = ref([]); //日历数据
const rainData = ref([]); //雨量站数据

//tab切换
const handleClick = (tab, event) => {
  activeName.value = tab.props.name;
  queryParams.value.rainLevel = rainfall_intensity.value[0].value;
  queryParams.value.dateTime =
    activeName.value == 'day'
      ? search.value.time
      : activeName.value == 'month'
      ? proxy.moment(search.value.time).format('YYYY-MM')
      : activeName.value == 'year'
      ? proxy.moment(search.value.time).format('YYYY')
      : '';
  queryParams.value.stCodeList = [rainData.value[0].stCode];
  if (activeName.value == 'day') {
    getRainTimeDayData(queryParams.value.dateTime);
  }
};

//获取降雨日历数据
const getRainTimeDayData = val => {
  activeName.value = 'day';
  let data = {
    belongTimeStartTime: proxy.moment(val).startOf('month').format('YYYY-MM-DD'),
    belongTimeEndTime: proxy.moment(val).endOf('month').format('YYYY-MM-DD'),
  };
  rainTimeDay(data).then(res => {
    rainCalenderData.value = res.data;
  });
};
//获取雨量站
const getRainList = () => {
  queryParams.value.stCodeList = [];
  getStationList({ monitorTargetType: 'rainfall' }).then(res => {
    rainData.value = res.data;
    queryParams.value.rainLevel = rainfall_intensity.value[0].value;
    if (rainData.value.length) {
      queryParams.value.stCodeList.push(rainData.value[0].stCode);
    }
  });
};

//日历面板改变
const panelChange = val => {
  //日面板才调用
  if (activeName.value == 'day') {
    getRainTimeDayData(val);
  }
};
//搜索pdf
const handleQuery = () => {
  proxy.$refs['queryRef'].validate(valid => {
    if (valid) {
      bus.emit('searchRainFX', queryParams.value);
    }
  });
};
//重置
const resetQuery = () => {
  queryParams.value = {
    dateTime:
      activeName.value == 'day'
        ? search.value.time
        : activeName.value == 'month'
        ? proxy.moment(search.value.time).format('YYYY-MM')
        : activeName.value == 'year'
        ? proxy.moment(search.value.time).format('YYYY')
        : '',
    stCodeList: [rainData.value[0].stCode],
    rainLevel: rainfall_intensity.value[0].value,
  };
  handleQuery();
};
//下载pdf
const downloadPdf = () => {
  bus.emit('downLoadRainFX');
};
onMounted(() => {
  search.value.time = queryParams.value.dateTime = localStorage.getItem('setRainDateKF');
});
defineExpose({
  getRainTimeDayData,
  getRainList,
});
</script>
<style lang="scss" scoped>
.dialogMonthPopperClass {
  .el-picker-panel__content {
    .prev-month,
    .next-month {
      .cell {
        display: none;
      }
    }

    .cell {
      &:hover {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50%;
        line-height: 20px;
        margin: 0 auto;

        .datadiv {
          bottom: -12px;
        }
      }
    }

    .current {
      .cell {
        color: #fff;
        width: 20px !important;
        height: 20px !important;
        line-height: 20px;
        border-radius: 50%;
        background-color: #409eff;
        margin: 0 auto;

        .datadiv {
          bottom: -12px;
        }
      }
    }
  }

  .data-body {
    position: relative;
    height: 100%;

    .datadiv {
      position: absolute;
      height: 14px;
      line-height: 14px;
      left: 50%;
      margin-left: -18px;
      bottom: -7px;
      font-size: 11px;
    }

    .MIDDLE1 {
      background-color: #70ccf4;
    }

    .MIDDLE2 {
      background-color: #009de2;
    }

    .MIDDLE3 {
      background-color: #e1c401;
    }

    .MIDDLE4 {
      background-color: #ff9f15;
    }

    .MIDDLE5 {
      background-color: #e20f36;
    }

    .MIDDLE6 {
      background-color: #760404;
    }
  }
}
</style>