<template>
  <div class="main">
    <div class="top-form">
      <a-row>
        <a-col class="form-box" :span="6">
          <div> 监测站点： </div>
          <div>
            <a-select
              class="custom-input sitemore"
              placeholder="监测站点"
              :maxTagCount="2"
              :maxTagTextLength="4"
              v-model:value="dataCenter.formData.station"
              :options="dataCenter.st_options"
              @change="selectChange"
            />
          </div>
        </a-col>
        <a-col class="form-box" :span="6">
          <div> 月份： </div>
          <div>
            <a-month-picker
              valueFormat="YYYY-MM"
              format="YYYY-MM"
              class="custom-input sitemore"
              v-model:value="dataCenter.formData.time"
            />
          </div>
        </a-col>
        <a-col class="btn-list" :span="12">
          <a-button @click="resetting">重置</a-button>
          <a-button class="cha" type="primary" @click="queryData">查询</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="table-title">
      {{ dataCenter.formData.time }}{{ dataCenter.activeS.label }}逐时降雨量月统计表
      <!-- <div class="table-title-left"
        >统计表模版
        <a-radio-group v-model:value="dataCenter.type">
          <a-radio :value="1">模版1</a-radio>
          <a-radio :value="2">模版2</a-radio>
        </a-radio-group>
        </div> -->
      <div class="table-title-right" @click="exportExcel">
        <DownloadOutlined class="icon-export" />导出excel</div
      >
    </div>
    <div>
      <a-table
        class="ant-table-striped"
        :scroll="{ x: 1000, y: `calc(100vh - 400px)` }"
        :dataSource="dataCenter.dataSource"
        :columns="dataCenter.columns"
        bordered
        size="middle"
        :pagination="false"
      >
        <template #footer>
          <div v-if="dataCenter.pageData.statistics" class="footer-table">
            <div> 月统计 </div>
            <ul>
              <li>
                <div>上旬累计：{{ dataCenter.pageData.statistics.early_add }}</div>
                <div>中旬累计：{{ dataCenter.pageData.statistics.middle_add }}</div>
                <div>下旬累计：{{ dataCenter.pageData.statistics.late_add }}</div>
                <div>月累计：{{ dataCenter.pageData.statistics.month_add }}</div>
                <div>月降雨天数：{{ dataCenter.pageData.statistics.month_rain }}</div>
              </li>
              <li>
                <div>最大一天：{{ dataCenter.pageData.statistics['1max'] }}</div>
                <div>发生时间：{{ dataCenter.pageData.statistics['1maxt'] }}</div>
                <div>最大三天：{{ dataCenter.pageData.statistics['3max'] }}</div>
                <div>开始时间：{{ dataCenter.pageData.statistics['3maxt'] }}</div>
                <div>最大五天：{{ dataCenter.pageData.statistics['5maxe'] }}</div>
                <div>开始时间：{{ dataCenter.pageData.statistics['5maxt'] }}</div>
              </li>
              <li>
                <div>最大七天：{{ dataCenter.pageData.statistics['7max'] }}</div>
                <div>开始时间：{{ dataCenter.pageData.statistics['7maxt'] }}</div>
              </li>
            </ul>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
  import { postMonitoringStation, stStatistics } from '/@/api/swHome/index';
  import moment, { Moment } from 'moment';
  import { DownloadOutlined } from '@ant-design/icons-vue';
  import { ImpExcel, ExcelData, jsonToSheetXlsx } from '/@/components/Excel';
  import { getMonth } from '/@/utils/fnUtils.ts';
  let dataCenter = reactive({
    type: 1,
    st_options: [],
    pageData: {},
    columns: [],
    columns2: [],
    dataSource: [],
    dataSource2: [],
    formData: {
      station: [],
      time: getMonth(1),
      sensor_type: 'H_rain',
    },
    activeS: {},
  });
  function resetting() {
    dataCenter.formData = {
      station: [],
      time: getMonth(1),
      sensor_type: 'H_rain',
    };
    getDataData();
  }
  function exportExcel() {
    let name = null;
    let header = {};
    let data = [];

    name = `${dataCenter.formData.time}-逐时降雨量统计表.xlsx`;
    dataCenter.columns.forEach((element) => {
      header[element.key] = element.title ? element.title : 'time';
    });
    data = dataCenter.dataSource;
    console.log(data);
    data[data.length] = [['月统计', '月统计2']];
    jsonToSheetXlsx({
      data,
      header: header,
      filename: name,
    });
  }
  function selectChange(e, option) {
    dataCenter.activeS = option;
    dataCenter.formData.station = [e];
  }
  function getRowClassname(record, index) {
    let name = null;
    // if (index % 2 === 1) {
    //   name = 'table-striped';
    // }
    if (index == dataCenter.dataSource.length - 1) {
      if (name) {
        name += ' table-bottom';
      } else {
        name = 'table-bottom';
      }
    }
    if (index == dataCenter.dataSource.length - 2) {
      if (name) {
        name += ' table-bottom2';
      } else {
        name = 'table-bottom2';
      }
    }
    if (index == dataCenter.dataSource.length - 3) {
      if (name) {
        name += ' table-bottom1';
      } else {
        name = 'table-bottom1';
      }
    }
    return name;
  }
  async function getDataData() {
    // await getRiverTree().then((res) => {
    //   let arr = [];
    //   for (const key in res.data.data_value.station) {
    //     if (Object.prototype.hasOwnProperty.call(res.data.data_value.station, key)) {
    //       const element = res.data.data_value.station[key];
    //       element.forEach((element) => {
    //         arr.push({
    //           label: element.st_name,
    //           value: element.stcd,
    //         });
    //       });
    //     }
    //   }
    //   dataCenter.st_options = arr;
    //   dataCenter.activeS = dataCenter.st_options[0];
    //   dataCenter.formData.station = [dataCenter.st_options[0].value];
    //   queryData();
    // });
    await postMonitoringStation({sensor_type:'H_rain'}).then((res) => {
      let arr = [];
      res.data.forEach(element => {
        arr.push({
          label: element.name,
          value: element.stcd
        });
      });
        dataCenter.st_options = arr;
      dataCenter.activeS = dataCenter.st_options[0];
      dataCenter.formData.station = [dataCenter.st_options[0].value];
      queryData();
    })
  }
  function newDate() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) {
      month = '0' + month;
    }
    if (day < 10) {
      day = '0' + day;
    }
    return year + '-' + month + '-' + day;
  }
  function queryData() {
    stStatistics(dataCenter.formData).then((res) => {
      dataCenter.pageData = res.data;
      processingData(res.data);
    });
  }
  function processingData(pageData) {
    // 处理头部数据
    let columns = [
      {
        title: '日期',
        dataIndex: 'time',
        key: 'time',
        width: 100,
        align: 'center',
      },
    ];
    let dataSource = [];
    // 处理头部
    pageData.thead.forEach((element) => {
      let data = {
        title: element,
        dataIndex: element,
        key: element,
        width: 100,
      };
      columns.push(data);
    });
    // 处理数据列
    pageData.time.forEach((item, index) => {
      let obj = {};
      obj.time = item;
      for (const key in pageData.tbody[index]) {
        if (Object.prototype.hasOwnProperty.call(pageData.tbody[index], key)) {
          const element = pageData.tbody[index][key];
          obj[key] = element;
        }
      }
      dataSource.push(obj);
    });

    dataCenter.columns = columns;
    dataCenter.dataSource = dataSource;
  }
  onMounted(() => {
    getDataData();
  });
</script>

<style scoped lang="less">
  .main {
    // margin: 10px;
    // height: calc(100% - 20px);
    // background-color: #fff;
  }
  .top-form {
    background-color: #fff;
    padding: 12px 10px 12px 10px;
  }
  .btn-list {
    text-align: right;
  }
  .cha {
    margin-left: 10px;
  }
  .form-box {
    display: flex;
    & > div:nth-child(1) {
      width: 90px;
      text-align: right;
      line-height: 32px;
    }
    & > div:nth-child(2) {
      flex: 1;
    }
  }
  ::v-deep .top-form .ant-select {
    width: 100%;
  }
  ::v-deep .top-form .ant-radio-group {
    line-height: 32px;
  }
  .title-name {
    text-align: center;
    font-size: 18px;
    line-height: 40px;
  }
  .box-content {
    display: flex;
    height: calc(100% - 236px);
    & > div {
      width: 100%;
    }
  }
  .right-box {
    width: 400px;
    height: 100%;
    overflow: auto;
    margin-left: 20px;
    position: relative;
    ul {
      // position: relative;
      li {
        display: flex;
        line-height: 45px;
        & > div {
          // flex: 1;
          text-align: center;
        }
        & > div:nth-child(1) {
          min-width: 180px;
        }
        & > div:nth-child(2) {
          flex: 1;
        }
        & > div:nth-child(3) {
          flex: 1;
        }
      }
      li:nth-child(1) {
        position: absolute;
        width: 100%;
      }
      li:nth-child(2) {
        padding-top: 45px;
      }
    }
  }
  .form-box {
    margin-bottom: 10px;
  }
  .content-box {
    text-align: center;
    font-size: 18px;
    border-top: 1px solid #dedede;
    position: relative;
    padding-top: 10px;
    .sub-title {
      padding-left: 10px;
      border-left: 4px solid #2d74e7;
      text-align: left;
      font-size: 10px;
      position: absolute;
      left: 0px;
      top: 15px;
      span {
        margin-left: 10px;
        font-size: 18px;
        position: relative;
        top: 2px;
        cursor: pointer;
      }
      .active-icon {
        color: #377dff !important;
      }
    }
  }
  .sitemore {
    width: 100%;
  }
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
  .table-title {
    margin-top: 10px;
    text-align: center;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
    position: relative;
  }
  .table-bottom {
    background-color: #000 !important;
  }
  .ant-table-striped :deep(.table-bottom) td {
    background-color: rgba(45, 116, 231, 0.06);
  }
  .ant-table-striped :deep(.table-bottom1) td {
    background-color: rgba(15, 177, 94, 0.06);
  }
  .ant-table-striped :deep(.table-bottom2) td {
    background-color: rgba(255, 52, 52, 0.06);
  }
  .table-title-right {
    position: absolute;
    right: 10px;
    top: 0px;
    font-weight: initial;
    font-size: 14px;
    cursor: pointer;
  }
  .table-title-left {
    position: absolute;
    left: 10px;
    top: 0px;
    font-weight: initial;
    font-size: 14px;
    cursor: pointer;
  }
  .icon-export {
    color: rgba(6, 113, 221, 1);
    margin-right: 5px;
  }
  .footer-table {
    display: flex;
    // text-align: center;
    & > div {
      line-height: 90px;
      width: calc(100% / 7);
    }
    ul {
      width: 100%;
      li {
        line-height: 30px;
        display: flex;
        width: 100%;
        div {
          // width: calc(100% - 100px / 6);
          width: calc(100% / 6);
        }
      }
    }
  }
</style>
