<template>
  <div id="root">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span><el-radio v-model="formInline.remark" label="不认识的人的手机号">不认识的人的手机号</el-radio>
              <el-radio v-model="formInline.remark" label="其他原因需要沟通">其他原因需要沟通</el-radio>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAudit()">确 定</el-button>
        </span>
      </el-dialog>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="手机号"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formInline.userName" placeholder="姓名"/>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="formInline.idCard" placeholder="身份证"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="clear">清空</el-button>
        <el-button type="primary" @click="queryList">查询</el-button>
      </el-form-item>
    </el-form>
    <span style="color: #99a9bf; font-size: 13px; margin-left: 20px;">注意，审核后无法修改审核结果，请仔细确认</span>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        align="center"
        type="selection"
        width="55"/>
      <el-table-column
        align="center"
        prop="userName"
        label="姓名"/>
      <el-table-column
        align="center"
        prop="phone"
        label="手机号"/>
      <el-table-column
        align="center"
        prop="idCard"
        label="身份证"/>
      <el-table-column
        align="center"
        prop="gender"
        label="性别">
        <template slot-scope="scope">{{ scope.row.gender === '1' ? '男' : '女' }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="房产">
        <template slot-scope="scope">{{ scope.row.phaseName + scope.row.buildingName + scope.row.unitName + scope.row.levelName + scope.row.roomNoName }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="userRole"
        label="角色">
        <template slot-scope="scope">{{ showRoleName(scope.row.roleId) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="createDate"
        label="提交时间">
        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="userVerifyAudit(scope.row.id,true,1)">通过</el-button>
          <el-button type="danger" @click="passTheAudit(scope.row.id,false)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="footer-page">
      <el-pagination
        :current-page="formInline.pageNum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="formInline.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Audit',
  data() {
    return {
      formInline: {
        remark: '',
        phone: '',
        userVerifyId: '',
        verifyStatus: true,
        userName: '',
        idCard: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 总数
      tableData: [], // 数据体
      dialogVisible: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    clear() { // 清空
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.formInline.userName = ''
      this.formInline.phone = ''
      this.formInline.idCard = ''
      this.getData()
    },
    queryList() { // 查询
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.getData()
    },
    handleSelectionChange(val) { // 选择
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    getData() {
      this.$store.dispatch('UserVerifyAll', this.formInline).then((res) => {
        const resCode = res.code
        if (resCode === '0') {
          const resData = res.data
          this.tableData = resData.records
          this.formInline.pageNum = resData.pageNum
          this.formInline.pageSize = resData.pageSize
          this.total = resData.total
        }
      }).catch(() => {
        console.log('UserVerifyAll error')
      })
    },
    // 展示弹框
    passTheAudit(verifyId, vstatus){
      this.formInline.userVerifyId = verifyId
      this.formInline.verifyStatus = vstatus
      this.dialogVisible = true
    },
    // 提交
    submitAudit(){    
      this.userVerifyAudit()
    },

    userVerifyAudit(verifyId, vstatus,isA) {
      if(isA=='1'){
      this.formInline.userVerifyId = verifyId
      this.formInline.verifyStatus = vstatus
      }
      this.$store.dispatch('UserVerifyAudit', this.formInline).then((res) => {
        const resCode = res.code
        if (resCode === '0') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.dialogVisible = false
          this.getData()
          return
        }
        this.$message.error(res.message)
      }).catch(() => {
        console.log('UserVerifyAudit error')
      })
    },
    showRoleName(roleId) {
      let str = ''
      switch (roleId) {
        case 1:
          str = '户主'
          break
        case 2:
          str = '租客'
          break
        case 3:
          str = '家属'
          break
      }

      return str
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    }
  }
}
</script>

<style scoped>
.demo-form-inline {
  margin-top: 20px;
  margin-left: 20px;
}
.footer-page {
  display: flex;
  justify-content: flex-end;
}
</style>
