<template>
  <div class="stat">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <!-- 标题区域 -->
      <div slot="header" class="clearfix">
        <div class="stat-title">统计报表</div>
      </div>

      <!-- 主体内容区域 -->
      <div class="stat-body">
        <!-- 筛选条件区域 -->
        <div class="state">
          <div class="left">
            <el-col :span="4" style="margin-right:10px">
              <!-- <el-button type="primary" @click="getData">查询</el-button> -->
              <span>筛选时间:</span>
            </el-col>
            <el-col :span="20">
              <el-date-picker
                v-model="searchValue"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                style="width: 350px"
                value-format="yyyy-MM"
                @change="getData"
              ></el-date-picker>
            </el-col>
          </div>
          <div class="right">
            <el-button type="primary" @click="handleExport">导出明细</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="stat-table">
          <el-table
            :data="tableData"
            style="width: 1550px"
            max-height="512"
            stripe
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column prop="time" align="center" label="时间"></el-table-column>

            <el-table-column prop="waterPayment" align="center" label="水费（元）"></el-table-column>

            <el-table-column prop="electricPayment" align="center" label="电费（元）"></el-table-column>

            <el-table-column prop="refundPayment" align="center" label="退预付款（元）"></el-table-column>

            <el-table-column prop="totalPayment" align="center" label="合计（元）"></el-table-column>
          </el-table>
          <div class="total">
            <ul>
              <li>合计/元</li>
              <li>{{totalNum.waterTotalPayment}}</li>
              <li>{{totalNum.electricTotalPayment}}</li>
              <li>{{totalNum.refundTotalPayment}}</li>
              <li>{{totalNum.tatolPayment}}</li>
            </ul>
          </div>
        </div>

        <!-- 分页器区域 -->
      </div>
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "stat",
  data() {
    return {
      totalNum: [],
      // 表格数据
      tableData: [],
      //  时间搜索框绑定数据
      searchValue: [],
      //   分页器当前页
      currentPage: 1,
      //   每页条数
      pageSize: 7,
      //   总条数
      total: 1
    };
  },
  mounted() {
    this.getData();
  },
  // watch: {
  //   searchValue(newVal, oldVal) {
  //     console.log(newVal);
  //     if (!newVal) {
  //       this.getData();
  //     }
  //   }
  // },
  methods: {
    async getData() {
      if (!this.searchValue) {
        this.searchValue = ["", ""];
      }
      let params = {
        curPage: this.currentPage,
        pageSize: this.pageSize,
        startTime: this.searchValue[0],
        endTime: this.searchValue[1]
      };

      let res = await this.API.stat.queryReport(params);
      // console.log(res);
      this.totalNum = res.data;
      if (res.success) {
        this.tableData = res.data.page.list;
        this.total = res.data.page.totalCount;
      } else {
        this.$message.error(res.message);
      }
    },
    // 时间搜索框数值改变触发回调
    // changeTime(val) {
    //   console.log(val);
    //   this.searchValue = val;
    // },
    // 导出明细按钮回调
    handleExport() {
      let params = {
        startTime: this.searchValue[0],
        endTime: this.searchValue[1]
      };
      this.API.stat.downLoadReport(params).then(res => {
        // console.log(res);
        let name = `统计报表数据`;
        var content = res;
        // var data = new Blob([content],{type:"application/octet-stream;charset=utf-8"});
        var data = new Blob([content], {
          type: "application/vnd.ms-excel;charset=utf-8"
        });
        var downloadUrl = window.URL.createObjectURL(data);
        var anchor = document.createElement("a");
        anchor.href = downloadUrl;
        anchor.download = name + ".xlsx";
        anchor.click();
        window.URL.revokeObjectURL(data);
        if (res) {
          this.$message.success("导出成功");
        } else {
          this.$message.error("导出失败");
        }
      });
      // this.$confirm("确定导出吗？", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // })
      //   .then(() => {
      //     let params = {
      //       curPage: this.currentPage,
      //       pageSize: this.pageSize,
      //       startTime: this.searchValue[0],
      //       endTime: this.searchValue[1]
      //     };
      //     this.API.stat.downLoadReport(params).then(res => {
      //       console.log(res);
      //       if (res) {
      //         this.$message.success("导出成功");
      //       }
      //     });
      //   })
      //   .catch(() => {
      //     this.$message.info("已取消");
      //   });
    },
    // 分页器换页回调
    handleCurrentChange(value) {
      // console.log(value);
      this.currentPage = value;
      this.getData();
    },
    // 表格样式设置回调
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
      // if (row.rowIndex == this.tableData.length - 1) {
      //   return { fontWeight: "bold" };
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.stat /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .stat-title {
      width: 96px;
      height: 36px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-left: 33px;
    }
  }
  .stat-body {
    height: 82%;
    .state {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 33px 29px 34px 33px;
      .left {
        display: flex;
        align-items: center;
        .el-button {
          margin-left: 10px;
          background-color: rgba(41, 109, 227, 1);
        }
      }
      .right {
        .el-button {
          background-color: rgba(41, 109, 227, 1);
        }
      }
    }
    .stat-table {
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
        }
        tr {
          height: 64px;
        }
        th {
          font-weight: 400;
        }
      }
      .total {
        width: 1550px;
        height: 64px;

        margin: 0 auto;
        ul {
          display: flex;
          // justify-content: center;
          list-style: none;
          // align-items: center;
          padding: 0;
          li {
            flex: 1;
            height: 64px;
            line-height: 64px;
            text-align: center;
            font-weight: bold;
          }
        }
      }
    }
  }
  .block {
    height: 36px;
    margin: 0 29px 0px 0;
    float: right;
    // position: absolute;
    // bottom: 60px;
    // right: 29px;
    .el-pagination {
      padding: 0;
      button {
        width: 36px;
        background: #fff;
        color: rgba(0, 0, 0, 1);
        height: 36px;
        font-size: 14px;
        border: 1px solid rgba(112, 112, 112, 1);
        border-radius: 8px;
      }
      ul {
        .active {
          background: #fff;
          color: rgba(0, 97, 255, 1);
          border: 1px solid rgba(0, 97, 255, 1);
          box-sizing: border-box;
        }
        .el-icon {
          border: none;
        }
        li {
          background: #fff;
          color: rgba(0, 0, 0, 1);
          width: 36px;
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
          line-height: 36px;
        }
      }
      .el-pagination__jump {
        color: rgba(0, 0, 0, 1);
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        height: 36px;
        .el-input {
          width: 65px;
          height: 36px;
          margin: 0 10px;
          input {
            width: 65px;
            height: 36px;
            border: 1px solid rgba(0, 0, 0, 1);
            border-radius: 8px;
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
    height: 100%;
  }
}
</style>