<!-- 水井信息 -->
<template>
  <div class="innerMargin">
    <el-card class="box-card">
		<div class="seaarchBox">
			<div>消费记录</div>
			<div>时间选择：
				<el-date-picker
					size="small"
					v-model="value1"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</div>
		</div>
       <template>
        <el-table :data="userList" stripe style="width: 100%">
          <el-table-column prop="date"   fixed label="日期"></el-table-column>
          <el-table-column prop="order" label="订单号"></el-table-column>
          <el-table-column prop="startTime"  label="支付完成时间"></el-table-column>
          <el-table-column prop="money" label="充值金额"></el-table-column>
        </el-table>
      </template>
      <el-pagination
        background
        :page-size="8"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="totalNum"
        @current-change="changePage"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
	  //这里存放数据
    return {
		value1:"",
      role: "",
      username: "",
      txtInner:"筛选测试用户",
      userList: [],
		userGroupList: [],
      roleList: [],
      page: 1,
      totalNum: 0,

    };
  },
  //监听属性 类似于data概念
  computed: {
    //获取用户类型
		userType: function () {
			return this.$store.state.myuser_type
		}
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRoleList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList();
  },
  //方法集合
  methods: {
    //获取用户列表
    getList() {
          this.userList = [
			{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},
			{
				date:'2021-3-19',
				order:'112544412577455',
				equipId:'845556987322545522',
				startTime:'2021-3-19 11:30:25',
				endTime:'2021-3-19 11:36:25',
				electricity:36,
				water:21,
				money:18
			},
			{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},
			{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			},{
				date:'2021-3-21',
				order:'112544412577455',
				equipId:'845521475322545522',
				startTime:'2021-3-21 12:30:25',
				endTime:'2021-3-21 12:36:25',
				electricity:44,
				water:38,
				money:28
			}
		];
          this.totalNum = 33;
    },

    changePage(value) {
		this.page = value
    },

    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.seaarchBox{
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
}
.search-box {
  text-align: right;
  .el-input {
    width: 200px;
    vertical-align: middle;
  }
  .el-select {
    vertical-align: middle;
  }
}
/deep/.el-table th, /deep/.el-table td{
    text-align: center;
}
/deep/.el-table th{
    background-color: #f6f6f6;
}
/deep/.el-table thead{
    color: #373737;
}
.greenState{
  color: green;
}
.redState{
  color: red;
}
// 分页为蓝色调
/deep/.el-pagination .el-pager li.active{
  background-color: #0295ff!important;  
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color: #0295ff;
}
/deep/.el-input__inner:focus{
  outline: none;
  border-color: #0295ff;
}
</style>