<template>
  <el-container>
    <el-main>

      <!--表格头部 -->
      <div v-if="isSearchVisible">
        <el-form ref="formData" :model="formData" label-width="auto">
          <div class="topBox">
            <el-form-item label="站长ID" prop="uid">
              <el-input v-model="formData.uid" placeholder="站长ID"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="name">
              <el-input v-model="formData.name" placeholder="真实姓名"></el-input>
            </el-form-item>
          </div>
          <div class="topBox">
            <el-form-item label="身份证号码" prop="idCard">
              <el-input v-model="formData.idCard" placeholder="身份证号码"></el-input>
            </el-form-item>
            <el-form-item label="提交时间" prop="isSubmitTime">
              <CustomChoiceDatePicker @handelChange="handleSubmitTime()"></CustomChoiceDatePicker>
            </el-form-item>
            <el-form-item label="审核时间" prop="isAuditTime">
              <CustomChoiceDatePicker @handelChange="handleAuditTime()"></CustomChoiceDatePicker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="_fetchDataList">提交</el-button>
              <el-button type="info" plain @click="resetForm">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 表格按钮 -->
      <div>
        <el-form label-width="auto">
          <div class="topBox">
            <div>
              <el-button type="primary" icon="el-icon-refresh-right" @click="refresh"></el-button>
              <el-button type="primary" icon="el-icon-document-copy" @click="openAudit()">批量手动审核</el-button>
            </div>
            <div>
              <el-button type="primary" icon="el-icon-search" @click="isSearchVisible = !isSearchVisible"></el-button>
            </div>
          </div>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <div>
        <el-table ref="tableData" :data="tableData" border style="width: 100%;margin-top: 16px">
          <el-table-column prop="uid" label="站长ID" align="center"></el-table-column>
          <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
          <el-table-column prop="name" label="真实姓名" align="center"></el-table-column>
          <el-table-column prop="idCard" label="身份证号码" align="center"></el-table-column>
          <el-table-column prop="idPicFront" label="身份证正面图" align="center">
            <template slot-scope="scope">
              <el-button type="success" plain :disabled="scope.row.idPicFront === undefined || scope.row.idPicFront.length === 0" @click="openFrontPic(scope.row)">
                <svg-icon icon-class="audit" />
                <span>查看图片</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="身份证反面图" align="center">
            <template slot-scope="scope">
              <el-button type="success" plain :disabled="scope.row.idPicBack === undefined || scope.row.idPicBack.length === 0" @click="openBackPic(scope.row)">
                <svg-icon icon-class="audit" />
                <span>查看图片</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span :style="{ color: scope.row.idVerified === '3'? '#FF494A':
                              scope.row.idVerified === '2' ? '#FFBB00' :
                              scope.row.idVerified === '1' ? '#0DB903' : '',
                              cursor: 'pointer'}" @click="openState(scope.row)">{{ scope.row.idVerifiedText }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idSubmitTime" label="提交时间" align="center"></el-table-column>
          <el-table-column prop="idAuditTime" label="审核时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <CustomButton tip-text="审核" is-svg icon="deduce" @onClick="openAudit(scope.row)" />
              <CustomButton tip-text="查看明细" is-svg icon="detail" @onClick="openCheckDetails(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 表格分页 -->
      <div class="tablePaging" style="margin-top: 30px">
        <el-pagination
          :current-page="formData.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="formData.currentLimit"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="formData.totalCount"
          @size-change="eachPage"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </el-main>
    <!-- 状态弹窗 -->
    <StateDialog :open-state-dialog="openStateDialog"
                 :real-name-auth-select-item="stateSelectItem"
                 @handle-close="closeDialog">
    </StateDialog>
    <!-- 查看明细弹窗 -->
    <DetailsDialog :show-dialog="openCheckDetailsDialog"
                        :select-item="detailSelectItem"
                        @handle-success="_fetchDataList"
                        @handle-close="closeDialog">
    </DetailsDialog>
    <!-- 审核弹窗 -->
    <AuditDialog :show-dialog="openAuditDialog"
                 :dialog-title="dialogTitle"
                 :audit-options="auditOptions"
                 :select-item="auditSelectItem"
                 @handle-success="_fetchDataList"
                 @handle-close="closeDialog">
    </AuditDialog>
  </el-container>
</template>

<script>
import CustomButton from '@/components/CustomButton'
import StateDialog from './components/state-dialog'
import DetailsDialog from './components/details-dialog'
import AuditDialog from './components/audit-dialog'
import { realNameAuthRequest } from '@/api/master-info-manage/real-name-authentication'
import CustomChoiceDatePicker from '@/components/CustomChoiceDatePicker/index'

export default {
  components: { CustomButton, StateDialog, DetailsDialog, AuditDialog, CustomChoiceDatePicker },
  data() {
    return {
      // 审核与批量审核弹窗标题
      dialogTitle: '',
      // 打开状态弹窗
      openStateDialog: false,
      stateSelectItem: {},
      // 打开查看明细弹窗
      openCheckDetailsDialog: false,
      detailSelectItem: {},
      // 打开审核弹窗
      openAuditDialog: false,
      auditSelectItem: {},
      // 表格数据
      tableData: [],
      isSearchVisible: false,
      formData: {
        // 站长ID
        uid: '',
        // 昵称
        nickname: '',
        // 手机号
        phone: '',
        // 真实姓名
        name: '',
        // 身份证号码
        idCard: '',
        // 提交时间
        isSubmitTime: '',
        // 审核时间
        isAuditTime: '',
        // 当前页数
        currentPage: 1,
        // 当前页的数据行数限制
        currentLimit: 20,
        // 数据行数总数
        totalCount: 0
      },
      // 下拉数据
      auditOptions: []
    }
  },
  created() {
    // 数据初始化
    this._fetchDataList()
  },
  methods: {
    // 刷新方法
    refresh() {
      this._fetchDataList(true)
    },
    // 分页页数变化
    pageChange(val) {
      this.formData.currentPage = val
      this._fetchDataList()
    },
    // 每一页的数据行数
    eachPage(val) {
      this.formData.currentLimit = val
      this._fetchDataList()
    },
    // 打开背面展示图片
    openBackPic(row) {
      this.$hevueImgPreview(row.idPicBack)
    },
    // 打开前面展示图片
    openFrontPic(row) {
      this.$hevueImgPreview(row.idPicFront)
    },
    // 重置表单
    resetForm() {
      // this.formData.isSubmitTime = ''
      // this.formData.isAuditTime = ''
      this.$refs.formData.resetFields()
      // this.formData.name = ''
      // this.formData.uid = ''
      // this.formData.nickname = ''
      // this.formData.phone = ''
      // this.formData.idCard = ''
    },
    handleSubmitTime(val) {
      this.formData.isSubmitTime = val[0] + ' - ' + val[1]
    },
    handleAuditTime(val) {
      this.formData.isAuditTime = val[0] + ' - ' + val[1]
    },
    // 关闭弹窗
    closeDialog() {
      this.openStateDialog = false
      this.openCheckDetailsDialog = false
      this.openAuditDialog = false
    },
    // 查看明细
    openCheckDetails(row) {
      this.openCheckDetailsDialog = true
      this.detailSelectItem = row
    },
    // 打开状态
    openState(row) {
      this.openStateDialog = true
      this.stateSelectItem = row
    },
    // 打开审核
    openAudit(row) {
      if (row === undefined) {
        return false
      }
      this.openAuditDialog = true
      this.auditSelectItem = row
      this.dialogTitle = '审核'
    },
    // 请求接口
    _fetchDataList(needToast = false) {
      // 1.組裝請求參數
      const params = {}
      params.uid = this.formData.uid
      params.nickname = this.formData.nickname
      params.name = this.formData.name
      params.phone = this.formData.phone
      params.idCard = this.formData.idCard
      params.submitTime = this.formData.isSubmitTime
      params.idAuditTime = this.formData.isAuditTime
      params.p = this.formData.currentPage
      params.limit = this.formData.currentLimit

      // 2.調用參數
      realNameAuthRequest(params).then(resp => {
        // 3.處理返回數據
        if (parseInt(resp.code) === 0) {
          if (needToast) this.$message.success('刷新成功～')
          this.tableData = resp.data.userList
          this.formData.totalCount = resp.data.total
          this.auditOptions = resp.data.audit
        } else {
          this.$message.error(resp.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
  .topBox {
    display: flex;
    justify-content: space-between;
  }
  .tablePaging {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
