<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="20">
              <el-date-picker
                v-model="searchValue"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 260px"
                value-format="yyyy-MM-dd"
                @change="changeTime"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">查询</el-button>
            </el-col>
          </div>
          <div class="right">
            <el-button type="primary" @click="handleExport">导出明细</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="stat-table">
          <el-table
            :data="tableData"
            max-height="576"
            height="576"
            style="width: 1550px"
            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="water" align="center" label="水费（元）">
            </el-table-column>

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

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

            <el-table-column prop="count" align="center" label="合计（元）">
            </el-table-column>
          </el-table>
        </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>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "stat",
  data() {
    return {
      // 表格数据
      tableData: [
        {
          time: "2022-07-20",
          water: "50.00",
          electricity: "50.00",
          refund: "50.00",
          count: "260.00",
        },
        {
          time: "2022-08-20",
          water: "60.00",
          electricity: "66.00",
          refund: "88.00",
          count: "666.00",
        },
        {
          time: "总计",
          water: "60.00",
          electricity: "66.00",
          refund: "88.00",
          count: "666.00",
        },
      ],
      //  时间搜索框绑定数据
      searchValue: "",
      //   分页器当前页
      currentPage: 1,
      //   每页条数
      pageSize: 8,
      //   总条数
      total: 50,
    };
  },
  methods: {
    // 时间搜索框数值改变触发回调
    changeTime(val) {
      console.log(val);
    },
    // 导出明细按钮回调
    handleExport() {
      this.$confirm("确定导出吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("导出成功");
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    // 分页器换页回调
    handleCurrentChange(value) {
      console.log(value);
      this.currentPage = value;
    },
    // 表格样式设置回调
    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 {
    .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;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .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;
  }
}
</style>