
<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item class="filter-item" label="手机号">
        <el-input v-model.trim="listQuery.ownerTel" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="手机号" />
      </el-form-item>
      <el-form-item class="filter-item" label="姓名" >
        <el-input v-model.trim="listQuery.ownerName" placeholder="姓名" />
      </el-form-item>
      <el-form-item label="认证状态">
        <el-select v-model="listQuery.verifyStatus" placeholder="请选择">
          <el-option label="选择状态" value="" />
          <el-option label="已认证通过" value="1"/>
          <el-option label="已停用" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" class="filter-item" @click="handleFilter">清空</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="userPassCertification"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
      <el-table-column prop="ownerName" label="姓名" align="center"/>
      <el-table-column prop="ownerTel" label="手机号" align="center" />
      <el-table-column prop="gender" label="性别" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.gender==1">{{ '男' }}</span>
          <span v-if="scope.row.gender==2">{{ '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" align="center" />
      <!-- <el-table-column prop="name" label="所在户" width="180" /> -->
      <el-table-column label="所在户" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.building!==null&&scope.row.unit!==null&&scope.row.level!==null&&scope.row.roomNo!==null&&scope.row.phase!==null">
            {{ scope.row.phase+scope.row.building + scope.row.unit + scope.row.level + scope.row.roomNo }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createDate" label="创建时间" width="540" align="center" /> -->
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.createDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="认证状态" align="center">
        <template slot-scope="scope">{{ scope.row.verifyStatus =='1' ? '已认证通过':'已停用' }}</template>
      </el-table-column>
      <!-- <el-table-column label="操作" width="250">
        <template slot-scope="scope"><a><span @click="open3(scope.row.ownerTel, scope.row.verifyStatus)" style="text-decoration: underline; color: blue ">{{ scope.row.verifyStatus === '1' ? '停用':'启用' }}</span></a></template>
      </el-table-column> -->
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        building: '',
        phase: '',
        unit: '',
        ownerTel: '',
        idCard: '',
        gender: '',
        level: '',
        roomNo: '',
        ownerName: '',
        createDate: '',
        verifyStatus: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 数据总数
      userPassCertification: [],
      buildingList: [],
      unitList: [],
      levelList: [],
      roomNoList: [],
      listLoading: true // 加载圈
    }
  },
  mounted() {
    // 获取数据
    this.dataQuery()
  },
  methods: {
    ...mapActions('buildingOwnerInfo', [
      'BserPassCertification'
    ]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageNum = 1
      this.listQuery.pageSize = val
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.dataQuery()
    },
    padDate(value) {
      value = value < 10 ? '0' + value : value
      return value
    },
    formatDate(val) {
      var value = new Date(val)
      var year = value.getFullYear()
      var month = this.padDate(value.getMonth() + 1)
      var day = this.padDate(value.getDate())
      var hour = this.padDate(value.getHours())
      var minutes = this.padDate(value.getMinutes())
      var seconds = this.padDate(value.getSeconds())
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
    },
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('UserPassCertification', this.listQuery).then((res) => {
        const resData = res.data
        this.userPassCertification = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = 10
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error BuildingInfoList')
      })
    },
    handleSelectionChange(data) {

    },
	  search() {
      this.listQuery.pageNum = 1
      this.dataQuery()
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.listQuery.ownerName = ''
      this.listQuery.ownerTel = ''
	    this.listQuery.verifyStatus = ''
      this.dataQuery()
    },
    open3(ownerTel, verifyStatus) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '启用成功!'
        })
        this.update(ownerTel, verifyStatus)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    update(ownerTel, verifyStatus) {
      this.listQuery.ownerTel = ownerTel
      this.listQuery.verifyStatus = verifyStatus

      console.log(this.listQuery.ownerTel, ' -- ', this.listQuery.verifyStatus)

      this.listLoading = true
      this.$store.dispatch('UpdataPassCertification', this.listQuery).then((res) => {
        const resData = res.data
        this.updataPassCertification = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error UpdataPassCertification')
      })
    }
  }
}
</script>

<style scoped>
.root{
  display: flex;
  flex-flow: column;
}
.form-listQuery{
  margin-top: 20px;
  margin-left: 30px;
}
.operation{
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.block{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>

