<template>
    <div class="regiBox">
        <crumbs title="注册中心">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="注册时间：">
                    <el-date-picker v-model="filter.time"
                                    size="mini"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                </el-form-item>
				<el-form-item label="认证状态：">
					<el-select size="mini" v-model="filter.status" placeholder="认证状态" clearable>
						<el-option v-for="item in status" :label="item.name" :value="item.key"></el-option>
					</el-select>
				</el-form-item>
                <el-form-item label="手机号：">
                    <el-input size="mini" v-model="filter.username" clearable placeholder="手机号" @keyup.enter.native="searchUserInfo"></el-input>
                    </el-select>
                </el-form-item>
                
                <el-form-item>
                    <el-button size="mini" @click="searchUserInfo">确认</el-button>
                    <el-button size="mini" type="primary" @click="exportAdminLines()">导出</el-button>
                </el-form-item>
            </el-form>
        </crumbs>
        <div class="contents">
            <el-table :data="list"
                      border
                      style="width: 100%">
                <el-table-column
                        type="index"
                        :index="indexMethod"
                        label="编号"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="userGmtCreate"
                        label="注册时间"
                        :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="linkman"
                        label="联系人">
                </el-table-column>
                <el-table-column
                        prop="authStatusStr"
                        label="状态"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="手机号"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        fixed="right"
												prop="orgName"
                        label="注册机构"
                        width="130">
                </el-table-column>
            </el-table>
            <el-pagination v-if="total>pageSize"
                           :current-page.sync="currentPage"
                           @current-change="currentChange"
                           background
                           :page-size="pageSize"
                           layout="total,prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import api from '@api/admin.js';
	import userApi from '@api/user.js';
	import utils from '@api/utils.js';

  
  export default {
    name: 'register-admin',
    data () {
      return {
        list: [],
        status: [],
        cacheData: {},
        currentPage: 1,
        pageSize: 10,
        total: 0,
        filter: {
          orderNum: '',
          username:'',
          status: '',
          time:'',
        }
      }
    },
    created() {
      this.queryUserInfo();
      const enumsList = JSON.parse(localStorage.getItem('enumsData'));
      const status = enumsList.authStatusEnum;
      for (var i = 0; i < status.length; i++) {
        this.status.push(status[i])
      }
    },
    methods: {
      queryUserInfo(){
        const time = this.filter.time;
        const startTime = time&&time[0]||undefined;
        const endTime = time&&time[1]||undefined;
        const params = {
				'userName' : this.filter.username.trim(),       //用户名
				'authStatus' : this.filter.status,  // 认证状态
				'current' : this.currentPage,      //分页
				'size': this.pageSize,   //条数
				'startTime':startTime,
				'endTime':endTime
			}
			api.queryUserInfo(params).then((res) => {
				if (res.data.code == '0') {
					const data = res.data.data;
					this.list = data.records;
					this.total = data.total;
				}
			}).catch((error) => {
				console.log(error);
			});
		},
      indexMethod(index) {
        return ((this.currentPage - 1) * this.pageSize) + index + 1;
      },
      currentChange(next) {
        this.currentPage = next;
        if (this.cacheData[next]) {       //如果已请求过该页数据，则使用缓存不重复请求
          this.list = this.cacheData[next];
        } else {
          this.queryUserInfo();
        }
      },
      searchUserInfo(){//搜索
        this.currentPage = 1;
        this.queryUserInfo();
      },
      exportAdminLines() {
        const time = this.filter.time;
        const canExport = utils.exportCondition(time);
        if(typeof canExport == 'string'){
          this.$message({
            showClose: true,
            message:canExport,
            type:'warning'
          });
          return;
        }
        const startTime = time && time[0] || undefined;
        const endTime = time && time[1] || undefined;
        const params = {
          'userName': this.filter.username.trim(),       //用户名
          'authStatus': this.filter.status,  // 认证状态
          'startTime': startTime,
          'endTime': endTime
        };
        api.exportUserInfo(params).then((res) => {
          if (res.data.code = '0') {
            utils.downloadExportedData(res.data, '注册用户信息.xls');
            this.$message({showClose: true,message: "导出成功", type: 'success'});
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch((error) => {
          this.$message({
            showClose: true,
            message: "服务器正忙...",
            type: 'warning'
          });
        });
      }
    }
  }
</script>

<style lang="less">
    @import "../../less/admin.less";
</style>