<template>
  <!-- 降雨日历 -->
  <div class="rainCaldarPage">
    <div class="partTitleHM">
      降雨日历
      <el-date-picker
        type="date"
        v-model="dateDay"
        value-format="YYYY-MM-DD"
        placeholder="请选择日期"
        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
        size="small"
        v-if="dateIndex == 'day'"
      />
      <el-date-picker
        type="month"
        v-model="dateMonth"
        value-format="YYYY-MM"
        placeholder="请选择日期"
        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
        size="small"
        v-if="dateIndex == 'month'"
      />
      <el-date-picker
        type="year"
        v-model="dateYear"
        value-format="YYYY"
        placeholder="请选择日期"
        style="float: right; width: 130px; margin: 10px 60px 0px 0px"
        size="small"
        v-if="dateIndex == 'year'"
      />
    </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.value" :label="dict.label" :value="dict.value"></el-option>
        </el-select>
      </div>
      <!-- 日 -->
      <div class="partDay flex flex-justcontent-spacebetween" v-if="dateIndex == 'day'">
        <div class="part">
          <p>日期</p>
          <p>06-12<br />2024</p>
        </div>
        <div class="part">
          <p>累计降雨量</p>
          <p>1.2<br />mm/24h</p>
        </div>
        <div class="part">
          <p>雨强</p>
          <p style="padding-top: 15px">小雨</p>
        </div>
      </div>
      <!-- 月 -->
      <div class="partDay" v-if="dateIndex == 'month'">
        <ChartBar3D :refresh="refresh" :echartData="echartData"></ChartBar3D>
      </div>

      <!-- 年 -->
      <div class="partDay" v-if="dateIndex == 'year'">
        <ChartBar3D :refresh="refresh2" :echartData="echartData2"></ChartBar3D>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
const { proxy } = getCurrentInstance();

const dateDay = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM'));
const dateYear = ref(proxy.moment(new Date()).format('YYYY-MM'));
const rainCode = ref('1');
const rainList = ref([
  { value: '1', label: '汴京路雨量站' },
  { value: '2', label: '黄河路雨量站' },
]);
const dateIndex = ref('day');
const refresh = ref(1);
const echartData = ref({
  xAxis: ['06-01', '06-05', '06-10', '06-15', '06-20', '06-25', '06-30'],
  yName: '降雨量mm',
  seriesData: [23.2, 10, 0, 12, 5, 19, 56],
  seriesDataMax: [100, 100, 100, 100, 100, 100, 100],
});

const refresh2 = ref(1);
const echartData2 = ref({
  xAxis: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
  yName: '降雨量mm',
  seriesData: [123.2, 100, 60, 102, 85, 19, 123.2, 100, 60, 42, 59, 99],
  seriesDataMax: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
});

// 点击切换
function changeDate(val) {
  dateIndex.value = val;
}

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

<style lang="scss" scoped>
.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;
          }
        }
      }
    }
  }
}
</style>