<template>
    <div class="app-container">
      <!-- 筛选 -->
      <el-row>
        <div class="select-box">
            <div class="search-title">
              <i class="el-icon-search"></i>
              <span>  筛选搜查</span>
              <div class="search-button">
                <el-button  @click="resetQuery">重置</el-button>
                <el-button  type="primary"  @click="handleQuery">查询搜索</el-button>
              </div>
            </div>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px" class="search-form">
              <el-form-item label="编号：" prop="userId">
                <el-input
                  v-model="queryParams.userId"
                  placeholder="请输入用户编号"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="手机号码：" prop="phonenumber">
                <el-input
                  v-model="queryParams.phonenumber"
                  placeholder="请输入手机号码"
                  clearable
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="用户状态"
                  clearable
                  style="width: 240px"
                >
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="注册时间：">
                <el-date-picker
                  v-model="dateRange"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
      </el-row>
      <!-- 标题 -->
      <el-row>
        <div class="list-title">
          <div class="title">
            <span class="el-icon-tickets"></span>
            <span class="title-font">用户列表</span>
          </div>
        </div>
      </el-row>
  
      <el-row>
        <!--用户数据-->
        <el-table v-loading="loading" :data="userList"  border>
          <el-table-column label="编号" align="center"  prop="userId" />
          <el-table-column label="账号" align="center"  prop="userName"  :show-overflow-tooltip="true" />
          <el-table-column label="真实姓名" align="center"  prop="nickName"  :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center"  prop="phonenumber" width="120" />
          <el-table-column label="详细地址" align="center"  prop=""  width="160" :show-overflow-tooltip="true" />
          <el-table-column label="状态" align="center" prop="status" >
            <template slot-scope="scope">
              <span>{{ scope.row.status == "0" ? "未认证" : "已认证"  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" align="center" prop="createTime"  width="160">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实名时间" align="center" prop=""  width="160">
            <!-- <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template> -->
          </el-table-column>
        </el-table>
  
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-row>
    </div>
  </template>
  
  <script>
  import { listUser} from "@/api/system/user";
  
  export default {
    name: "User",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: null,
        // 日期范围
        dateRange:[],
        // 表单参数
        form: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
        },
        // 下拉框参数
        options:[
          {
            value:"0",
            label:"未认证"
          },
          {
            value:"1",
            label:"已认证"
          }
        ]
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
            this.userList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.queryParams.userId=undefined;
        this.queryParams.phonenumber=undefined;
        this.queryParams.status=undefined;
        this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .select-box{
    border: 1px solid rgb(0, 0, 0,0.1);
    border-radius: 5px;
    padding: 20px;
  }
  .search-form{
    margin-top: 20px;
    padding: 0 20px;
  }
  .search-title{
    overflow: hidden;
  }
  .search-button{
    float: right;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .list-title {
    height: 50px;
    width: 100%;
    border: solid 1px #DCDFE6;
    border-radius: 5px;
  
    .title {
      margin: 14px;
      float: left;
    }
  
    .title-font {
      margin-left: 5px;
    }
  }
  </style>