<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"
              mode="multiple"
              v-model:value="dataCenter.formData.station"
              :options="dataCenter.st_options"
            />
          </div>
        </a-col>
        <a-col class="form-box" :span="6">
          <div> 年份： </div>
          <div>
            <!-- <a-date-picker
              valueFormat="YYYY"
              format="YYYY"
              class="custom-input sitemore"
              v-model:value="dataCenter.formData.time"
            /> -->
            <a-date-picker
              mode="year"
              :value="dataCenter.formData.time"
              @panelChange="yearPick"
              format="YYYY"
              @openChange="yearStatus"
              :open="dataCenter.isopen"
              placeholder="选择年份"
            />
          </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 }}多站逐月降雨量年统计表
      <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 v-show="dataCenter.type == 1">
      <a-table
        class="ant-table-striped"
        :scroll="{ x: 1000, y: `calc(100vh - 260px)` }"
        :dataSource="dataCenter.dataSource"
        :columns="dataCenter.columns"
        bordered
        size="middle"
        :pagination="false"
      />
    </div>
    <div v-show="dataCenter.type == 2">
      <a-table
        class="ant-table-striped"
        :scroll="{ x: 1000, y: `calc(100vh - 260px)` }"
        :dataSource="dataCenter.dataSource2"
        :columns="dataCenter.columns2"
        :rowClassName="getRowClassname"
        bordered
        size="middle"
        :pagination="false"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
  import { getRiverTree, stStatistics, postMonitoringStation } from '/@/api/swHome/index';
  import moment, { Moment } from 'moment';
  import { DownloadOutlined } from '@ant-design/icons-vue';
  import { ImpExcel, ExcelData, jsonToSheetXlsx } from '/@/components/Excel';
  import { getYearNo } from '/@/utils/fnUtils.ts';
  let dataCenter = reactive({
    isopen: false,
    type: 1,
    st_options: [],
    pageData: {},
    columns: [],
    columns2: [],
    dataSource: [],
    dataSource2: [],
    formData: {
      station: [],
      time: getYearNo(1),
      sensor_type: 'M_rain',
    },
  });
  function resetting() {
    dataCenter.formData = {
      station: [],
      time: getYearNo(1),
      sensor_type: 'M_rain',
    };
    getDataData();
  }
  function yearPick(e) {
    // 选择年
    dataCenter.formData.time = moment(e).format('YYYY');
    dataCenter.isopen = false;
  }
  function yearStatus(status) {
    // 选择年后，关闭弹窗
    if (status) {
      dataCenter.isopen = true;
    } else {
      dataCenter.isopen = false;
    }
  }
  function exportExcel() {
    let name = null;
    let header = {};
    let data = [];
    if (dataCenter.type == 1) {
      name = `${dataCenter.formData.time}-模式1-逐月降雨量统计表.xlsx`;
      dataCenter.columns.forEach((element) => {
        header[element.key] = element.title;
      });
      data = dataCenter.dataSource;
    } else {
      name = `${dataCenter.formData.time}-模式2-逐月降雨量统计表.xlsx`;
      dataCenter.columns2.forEach((element) => {
        header[element.key] = element.title;
      });
      data = dataCenter.dataSource2;
    }

    // dataCenter.chartsData.value.forEach((element) => {
    //   let obj = {
    //     water: element.z,
    //     flow: element.q,
    //   };
    //   data.push(obj);
    // });

    jsonToSheetXlsx({
      data,
      header: header,
      filename: name,
    });
  }
  function getRowClassname(record, index) {
    let name = null;
    if (name) {
      name += ' table-bottom' + (dataCenter.dataSource2.length - index);
    } else {
      name = 'table-bottom' + (dataCenter.dataSource2.length - index);
    }
    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.formData.station = [dataCenter.st_options[0].value];
    //   queryData();
    // });
    await postMonitoringStation({sensor_type:'M_rain'}).then((res) => {
      let arr = [];
      res.data.forEach(element => {
        arr.push({
          label: element.name,
          value: element.stcd
        });
      });
        dataCenter.st_options = arr;
      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: 'name',
        key: 'name',
        width: 100,
        align: 'center',
      },
    ];
    let dataSource = [];
    let columns2 = [
      {
        title: '时段',
        dataIndex: 'time',
        key: 'time',
        width: 100,
        align: 'center',
      },
    ];
    let dataSource2 = [];
    pageData.thead.forEach((element) => {
      let obj = {
        title: element,
        dataIndex: element,
        key: element,
        width: 100,
        align: 'center',
      };
      if (element == '年累计') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(15, 177, 94, 0.06)',
              },
            };
          }
        };
      }
      if (element == '最大值') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(255, 52, 52, 0.06)',
              },
            };
          }
        };
      }
      if (element == '出现月份') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(45, 116, 231, 0.06)',
              },
            };
          }
        };
      }
      if (element == '降雨天数') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(168, 10, 247, 0.06)',
              },
            };
          }
        };
      }
      if (element == '最大一天') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(243, 247, 5, 0.06)',
              },
            };
          }
        };
      }
      if (element == '最大一天发生时间') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(15, 177, 94, 0.06)',
              },
            };
          }
        };
        obj.width = 200
      }
      if (element == '最大三天') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(255, 52, 52, 0.06)',
              },
            };
          }
        };
      }
      if (element == '最大三天发生时间') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(45, 116, 231, 0.06)',
              },
            };
          }
        };
        obj.width = 200
      }
      if (element == '最大五天') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(168, 10, 247, 0.06)',
              },
            };
          }
        };
      }
      if (element == '最大五天发生时间') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(243, 247, 5, 0.06)',
              },
            };
          }
        };
        obj.width = 200
      }
      if (element == '最大七天') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(15, 177, 94, 0.06)',
              },
            };
          }
        };
      }
      if (element == '最大七天发生时间') {
        obj.customCell = (record) => {
          if (record) {
            return {
              style: {
                background: 'rgba(255, 52, 52, 0.06)',
              },
            };
          }
        };
        obj.width = 200
      }

      columns.push(obj);
      dataSource2.push({
        time: element,
      });
    });
    pageData.name.forEach((element) => {
      dataSource.push({
        name: element,
      });
      let Obj2 = {
        title: element,
        dataIndex: element,
        key: element,
        width: 100,
        align: 'center',
      };

      columns2.push(Obj2);
    });
    dataSource.forEach((element) => {
      for (const key in pageData.tbody) {
        if (Object.prototype.hasOwnProperty.call(pageData.tbody, key)) {
          const item = pageData.tbody[key];
          element[key] = item[element.name];
        }
      }
    });
    dataSource2.forEach((element, index) => {
      let item = pageData.tbody[element.time];
      dataSource2[index] = JSON.parse(JSON.stringify({ ...element, ...item }));
    });
    dataCenter.columns = columns;
    dataCenter.columns2 = columns2;
    dataCenter.dataSource = dataSource;
    dataCenter.dataSource2 = dataSource2;
  }
  onMounted(() => {
    // dataCenter.formData.time = getYearNo(1);
    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-bottom1) td {
    background-color: rgba(255, 52, 52, 0.06);
  }
  .ant-table-striped :deep(.table-bottom2) td {
    background-color: rgba(15, 177, 94, 0.06);
  }
  .ant-table-striped :deep(.table-bottom3) td {
    background-color: rgba(243, 247, 5, 0.06);
  }
  .ant-table-striped :deep(.table-bottom4) td {
    background-color: rgba(168, 10, 247, 0.06);
  }
  .ant-table-striped :deep(.table-bottom5) td {
    background-color: rgba(45, 116, 231, 0.06);
  }
  .ant-table-striped :deep(.table-bottom6) td {
    background-color: rgba(255, 52, 52, 0.06);
  }
  .ant-table-striped :deep(.table-bottom7) td {
    background-color: rgba(15, 177, 94, 0.06);
  }

  .ant-table-striped :deep(.table-bottom8) td {
    background-color: rgba(243, 247, 5, 0.06);
  }
  .ant-table-striped :deep(.table-bottom9) td {
    background-color: rgba(168, 10, 247, 0.06);
  }
  .ant-table-striped :deep(.table-bottom10) td {
    background-color: rgba(45, 116, 231, 0.06);
  }

  .ant-table-striped :deep(.table-bottom11) td {
    background-color: rgba(255, 52, 52, 0.06);
  }
  .ant-table-striped :deep(.table-bottom12) td {
    background-color: rgba(15, 177, 94, 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;
  }
</style>
