<template>
  <div>
    <div class="page-search">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">

        <el-form-item label="手机号">
          <el-input v-model="searchInfo.clientCell"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-select clearable v-model="searchInfo.appName">
            <el-option v-for="item in this.$enumUtils.toValue('AppNameType')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-show="isShow">

      <el-collapse v-model="activeNames">

        <el-collapse-item title="用户基本信息" name="1">
          <br/>
          <div v-if="this.clientInfo.ucUserDO !=null">
            <el-row :gutter="24" :data="clientInfo.ucUserDO" style="margin-left:50px">
              <el-col :span="16">
                <div class="grid-content bg-purple">客户编号：{{clientInfo.ucUserDO.clientNo}}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">姓名：{{clientInfo.ucUserDO.realName}}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">注册时间：{{clientInfo.ucUserDO.gmtFirstLogin | dateFilter}}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">末次登陆：{{clientInfo.ucUserDO.gmtLastLogin | dateFilter}}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  用户状态：{{ clientFormat(clientInfo.ucUserDO.state)}}
                  <el-button style="margin-left: 30px" type="danger" size="small" v-if="this.clientInfo.ucUserDO.state != 4" @click="cancelUser(clientInfo.ucUserDO)">销户</el-button>
                </div>
              </el-col>
              <br/>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="实名认证" name="2">
          <div v-if="this.clientInfo.clientRealAuthDO !=null">
            <el-row :gutter="20" :data="clientInfo.clientRealAuthDO" style="margin-left:50px">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  实名认证状态：{{realAuthFormat(clientInfo.clientRealAuthDO.state)}}
                  <el-button type="primary" size="small" v-if="this.clientInfo.userFaceRecognitionDO == null || this.clientInfo.userFaceRecognitionDO.state != 1" @click="resetRealAuth(clientInfo.clientRealAuthDO.clientNo)">重置实名</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <br/>
          <div v-if="this.clientInfo.clientRealAuthDO !=null">
            <el-row :gutter="24" :data="clientInfo.clientRealAuthDO" style="margin-left:50px">
              <el-col :span="12">
                <img :src="clientInfo.clientRealAuthDO.idPhotoFrontUrl" alt="" style="width: 60%;height: 60%" />
              </el-col>
              <el-col :span="12">
                <img :src="clientInfo.clientRealAuthDO.idPhotoConUrl" alt="" style="width: 60%;height: 60%" />
              </el-col>
              <br/>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="活体认证" name="3">
          <div v-if="this.clientInfo.userFaceRecognitionDO !=null">
            <el-row :gutter="24" :data="clientInfo.userFaceRecognitionDO" style="margin-left:50px">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  活体认证状态：{{faceFormat(clientInfo.userFaceRecognitionDO.state)}}
                  <el-button style="margin-left: 30px" type="primary" size="small" v-if="clientInfo.userFaceRecognitionDO.state != 1" @click="manuallyCheck(clientInfo.userFaceRecognitionDO.userId)">人工通过</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  认证次数：{{clientInfo.userFaceRecognitionDO.verifyTimes}}
                  <el-button style="margin-left: 30px" type="primary" size="small" v-if="clientInfo.userFaceRecognitionDO.state != 1" @click="resetNumber(clientInfo.userFaceRecognitionDO.userId)">重置次数</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="grid-content bg-purple">认证结果：{{clientInfo.userFaceRecognitionDO.faceResult }}</div>
              </el-col>
            </el-row>

            <el-row :gutter="24" :data="clientInfo.userFaceRecognitionDO" style="margin-left:50px;margin-top: 20px">
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  人脸照片<br/><img :src="clientInfo.userFaceRecognitionDO.faceBestImgPath" alt="" style="width: 50%;height: 50%" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="基本信息" name="4">
          <br/>
          <div v-if="this.clientInfo.clientRiskFileDO !=null">
            <el-row :gutter="24" :data="clientInfo.clientRiskFileDO" style="margin-left:50px">
              <el-col :span="16">
                <div class="grid-content bg-purple">通讯录权限：{{fileTypeFormat(clientInfo.clientRiskFileDO.fileType)}}</div>
              </el-col>
              <br/>
            </el-row>
          </div>
          <div v-else>
            <el-row :gutter="24" style="margin-left:50px">
              <el-col :span="16">
                <div class="grid-content bg-purple">通讯录权限：通讯录未获取</div>
              </el-col>
              <br/>
            </el-row>
          </div>
          <div>
            <el-row :gutter="24" :data="clientInfo.clientRiskFileDO" style="margin-left:50px;margin-top: 30px">
              <el-col :span="16">
                <div class="grid-content bg-purple">盈火老用户数据清理(谨慎操作)：
                  <el-button style="margin-left: 10px" type="danger" size="small" @click="removeUserInfo">清除</el-button>
                </div>
              </el-col>
              <br/>
            </el-row>
          </div>
        </el-collapse-item>

      </el-collapse>


    </div>


  </div>
</template>

<script>
  import * as moment from "moment";

  export default {
    name: "ClientManagerment",
    data(){
      return{
        isShow: false,
        activeNames: ['1','2','3','4'],
        searchInfo: {
          clientCell: '',
          appName: '',
        },
        clientInfo:{
          ucUserDO:{},
          clientRealAuthDO:{},
          userFaceRecognitionDO:{},
          clientRiskFileDO:{},
        },
      }
    },
    filters: {
      dateFilter: function (row) {
        var exp = row
        if (!exp || typeof(exp) === undefined || typeof(exp) === null) {
          return ''
        }
        return moment(exp).format("YYYY-MM-DD HH:mm:ss")
      },

      userStatusFilter: function (row) {

      },

    },

    created() {
      //Vue的方法给原生调用，则需要把方法挂在Window下面
      window.clientData = this.clientData;
    },

    methods:{
      /*搜索条件*/
      onSubmit(){
        if(this.searchInfo.clientCell == '' ||  this.searchInfo.appName ==''){
          this.$message({message: '手机号或产品名称不能为空', type: 'error'});
          return;
        }
        this.clientData(this.searchInfo.clientCell,this.searchInfo.appName);
      },

      clientData(record,value){
        //查询客户数据
        this.$$get('/client/getClientInfo?cell='+ record +'&appName='+ value).then(res => {
          if (res.data.code != 200) {
            this.isShow = false;
            this.$message.error(res.data.message);
            return
          }
          this.isShow = true;
          this.clientInfo = res.data.result;

        }).catch(error => {
          this.$Message.error(error || '系统异常');
        });
      },

      //客户注册状态
      clientFormat(value){
        var userStatus = value;
        if(userStatus == null || userStatus == '' || userStatus == undefined){
          return ''
        }
        return this.$enumUtils.toMsg('ClientStatusEnum', userStatus);
      },

      //实名状态
      realAuthFormat(value){
        var realAuthStatus = value;
        if(realAuthStatus == null || realAuthStatus == '' || realAuthStatus == undefined){
          return ''
        }
        return this.$enumUtils.toMsg('RealAuthStatusEnum', realAuthStatus);
      },

      //活体状态
      faceFormat(value){
        var faceStatus = value;
        if(faceStatus == null || faceStatus == '' || faceStatus == undefined){
          return ''
        }
        return this.$enumUtils.toMsg('FaceStatusEnum', faceStatus);
      },

      //通讯录上传状态
      fileTypeFormat(value){
        var fileTypeStatus = value;
        if(fileTypeStatus == null || fileTypeStatus == '' || fileTypeStatus == undefined){
          return ''
        }
        if(fileTypeStatus == 1){
          return '已获取';
        }else {
          return '无法获取获取';
        }
      },

      //重置实名
      resetRealAuth(value){
        var clientCell = this.searchInfo.clientCell;
        var appName = this.searchInfo.appName;
        this.$confirm('正在重置实名认证, 是否继续?', '重置实名', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$$get('/client/resetAuthen?clientNo=' + value)
                .then(res => {
                  if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    return
                  }
                  this.$message({message: '实名重置成功', type: 'success'});
                  done();
                  this.clientData(clientCell,appName);
                }).catch(err => {
                this.$Message.error(error || '系统异常');
              });
            } else {
              done();
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消重置'
          });
        });
      },


      //销户
      cancelUser(record){
        var clientCell = this.searchInfo.clientCell;
        var appName = this.searchInfo.appName;
        this.$confirm('正在进行销户操作, 是否继续?', '销户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$$get('/client/accountCancellation?userId=' + record.userId + '&clientCell='+ record.cell + '&appName='+ this.searchInfo.appName)
                .then(res => {
                  if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    return
                  }
                  this.$message({message: '销户成功', type: 'success'});
                  done();
                  this.clientData(clientCell,appName);
                }).catch(err => {
                this.$Message.error(error || '系统异常');
              });
            } else {
              done();
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消销户'
          });
        });
      },

      //活体人工通过接口
      manuallyCheck(record){
        var clientCell = this.searchInfo.clientCell;
        var appName = this.searchInfo.appName;
        this.$$get('/client/manuallyCheck?userId='+ record ).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
          this.$message({message: '人工通过成功', type: 'success'});
          this.clientData(clientCell,appName);
        }).catch(error => {
          this.$Message.error(error || '系统异常');
        });
      },

      //重置用户认证次数
      resetNumber(record){
        var clientCell = this.searchInfo.clientCell;
        var appName = this.searchInfo.appName;
        this.$$get('/client/resetNumber?userId='+ record ).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
          this.$message({message: '重置用户认证次数成功', type: 'success'});
          this.clientData(clientCell,appName);
        }).catch(error => {
          this.$Message.error(error || '系统异常');
        });
      },

      //清除用户数据
      removeUserInfo(){

        var clientCell = this.searchInfo.clientCell;
        var appName = this.searchInfo.appName;
        this.$confirm('正在进行用户数据清除操作, 是否继续?', '清除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$$get('/client/removeUserInfo?cell='+ clientCell +'&appName='+ appName)
                .then(res => {
                  if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    return
                  }
                  this.$message({message: '清除用户数据成功', type: 'success'});
                  done();
                  this.clientData(clientCell,appName);
                }).catch(err => {
                this.$Message.error(error || '系统异常');
              });
            } else {
              done();
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消清除'
          });
        });
      },

    }
  }
</script>

<style scoped>

</style>