<template>
  <!-- 降雨日历 -->
  <div class="rainCaldarPage">
    <div class="partTitleHM">
      降雨日历

      <el-date-picker
        v-model="rangeTime"
        :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
        :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
        placeholder="请选择日期"
        :cell-class-name="cellClassNameFn"
        popper-class="jianCePopperClass"
        :clearable="false"
        :disabled-date="disabledDateFun"
        @change="datePickerChange"
        style="float: right; width: 130px; margin: 5px 50px 0px 0px"
      >
        <template #default="cell">
          <div class="el-date-table-cell">
            <span class="el-date-table-cell__text">{{ cell.text }}</span>
            <span class="rain_value" v-if="rainObj[moment(cell.date).format('YYYY-MM-DD')]"
              >{{ rainObj[moment(cell.date).format('YYYY-MM-DD')] }}mm</span
            >
          </div>
        </template>
      </el-date-picker>
    </div>
    <div class="partContHM">
      <div class="flex flex-justcontent-spacebetween">
        <p :class="['partD', dateIndex == 'day' ? 'active' : '']" @click="changeDate('day')">日</p>
        <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
        <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
        <el-select clearable filterable v-model="rainCode" placeholder="请选择雨量站" style="width: 150px">
          <el-option
            v-for="dict in rainList"
            :key="dict.stCode"
            :label="dict.stName"
            :value="dict.stCode"
            @click="selectRainSite"
          ></el-option>
        </el-select>
      </div>
      <!-- 日 -->
      <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
        <div class="part">
          <p>日期</p>
          <p>{{ AllData.curDate }}<br />{{ AllData.curYear }}</p>
        </div>
        <div class="part">
          <p>累计降雨量</p>
          <p>{{ curInfo?.rainCumulative }}<br />mm/24h</p>
        </div>
        <div class="part">
          <p>雨强</p>
          <p style="padding-top: 15px" v-if="curInfo?.rainLevel">{{ level[curInfo?.rainLevel] }}</p>
        </div>
      </div>
      <!-- 月 -->
      <div class="partDay" v-if="dateIndex == 'month'">
        <DEchart curType="month" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
      </div>

      <!-- 年 -->
      <div class="partDay" v-if="dateIndex == 'year'">
        <DEchart curType="year" :stCode="rainCode" :rainTime="rangeTime"></DEchart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { rainRainDaylist } from '@/api/newPageline/riverCapacity.js';
import DEchart from '@/views/sponeScreen/Echarts/DEchart.vue';
import { getStationList } from '@/api/dataAnalysis/syntherticData';
const { proxy } = getCurrentInstance();
const rainCode = ref('');
const rangeTime = ref('');
const curInfo = ref({});
const rainObj = ref({});
const currentType = ref('time'); //当前类型,区分是点击时间还是站点
const level = {
  '0_NAN': '无降雨',
  '1_SMALL': '小雨',
  '2_MIDDLE': '中雨',
  '3_LARGE': '大雨',
  '4_STORM': '暴雨',
  '5_LARGE_STORM': '大暴雨',
  '6_EX_LARGE_STORM': '特大暴雨',
};
const checkedList = ref([]);
const rainList = ref([]);
const dateIndex = ref('day');
const AllData = reactive({
  curDate: '',
  curYear: '',
});

const cellClassNameFn = data => {
  const time = proxy.moment(data).format('YYYY-MM-DD');
  if (time === rangeTime.value) {
    return 'current';
  }
  const list = checkedList.value.map(item => item.rainTime);
  if (list.includes(time)) {
    return 'checked';
  }
};
const disabledDateFun = data => {
  if (dateIndex.value != 'day') return;
  const list = checkedList.value.map(item => item.rainTime);
  const time = proxy.moment(data).format('YYYY-MM-DD');
  if (list.includes(time)) {
    return false;
  } else {
    return true;
  }
};

// 点击切换
function changeDate(val) {
  dateIndex.value = val;
  console.log(dateIndex.value, 'dateIndex.value');
  let valueFormat =
    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
  rangeTime.value = proxy.moment().format(valueFormat);
  currentType.value = '';

  getBasRainTimeSectionListFn();
}

//获取站点数据
const getStationData = async () => {
  let res = await getStationList();
  if (res && res.code == 200) {
    let datas = res.data;
    rainList.value = datas || [];
    rainCode.value = rainList.value[0].stCode;
    getBasRainTimeSectionListFn();
  }
};

//选择站点
const selectRainSite = () => {
  currentType.value = '';
  getBasRainTimeSectionListFn();
};
//选择降雨时间
const datePickerChange = val => {
  console.log(val);
  currentType.value = 'time';
  if (dateIndex.value == 'day') {
    handelData();
  }
};

function getBasRainTimeSectionListFn() {
  if (dateIndex.value != 'day') return;
  let prams = {
    stCode: rainCode.value,
  };
  rainRainDaylist(prams).then(res => {
    if (res?.code !== 200) return;
    checkedList.value = res.data || [];
    checkedList.value.forEach(item => {
      rainObj.value[item.rainTime] = item.rainCumulative;
    });
    rangeTime.value = checkedList.value.length ? checkedList.value[0].rainTime : '';
    handelData();
  });
}

const handelData = () => {
  let arrData = checkedList.value.filter(item => item.rainTime == rangeTime.value);
  curInfo.value = arrData ? arrData[0] : '';
  rangeTime.value = curInfo.value?.rainTime;
  AllData.curDate = proxy.moment(rangeTime.value).format('MM-DD');
  AllData.curYear = proxy.moment(rangeTime.value).format('YYYY');
};

onMounted(() => {
  getStationData();
});
</script>

<style lang="scss">
.rainCaldarPage {
  width: 100%;
  .partContHM {
    .partD {
      width: 82px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: url('@/assets/newImgs/HMScreen/rainD.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .active {
      background: url('@/assets/newImgs/HMScreen/rainA.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }
    .partDay {
      margin-top: 10px;
      height: 163px;
      .part {
        width: 132px;
        height: 163px;
        background: url('@/assets/newImgs/HMScreen/rainP.png') no-repeat;
        background-size: 100% 100%;
        p {
          text-align: center;
          &:nth-of-type(1) {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            margin: 12px 0px 30px 0px;
          }
          &:nth-of-type(2) {
            color: #3afff8;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 22px;
          }
        }
      }
    }
  }
}
.jianCePopperClass {
  // width: 400px;

  .el-date-table {
    td {
      &.disabled {
        .el-date-table-cell {
          opacity: 0.5;
          background-color: #ccc !important;
          // border-radius: 50%;
          // width: 24px;
          // height: 24px;
          // line-height: 24px;
        }
      }

      &.checked {
        &:not(.current) {
          .el-date-table-cell {
            .el-date-table-cell__text {
              // background-color: #d08f5a;
              // color: #fff;
              // color: #d08f5a;
              // font-weight: bolder;'

              color: #ffffff;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
}

.el-date-table-cell {
  position: relative;

  .rain_value {
    position: absolute;
    left: 2px !important;
    top: 15px;
    color: yellow;
    font-size: 10px;
    font-weight: bolder;
  }
}
</style>