<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="关键字" prop="nickname">
        <el-input v-model="queryParams.searchKey" placeholder="搜索昵称、姓名、手机、Email" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="成交" prop="mobile">
        <el-select v-model="queryParams.isDeal">
          <el-option v-for="item in [{label:'全部',value:''},{label:'是',value:true},{label:'否',value:false}]" :value="item.value" :label="item.label" :key="item.value" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="认证" prop="password">
        <el-select v-model="queryParams.authType">
          <el-option v-for="item in [{label: '全部',value: ''},{label:'营业执照认证',value:1},{label:'身份证认证',value:2},{label:'双认证',value:3}]" :key="item.value"  :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button :loading="exportLoading" type="primary" @click="exportFn">导 出</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="公司名称" align="center" prop="enterpriseName" />
      <el-table-column label="用户昵称" align="center" prop="nickname" />
      <el-table-column label="真实姓名" align="center" prop="identityName" />
      <el-table-column label="区号">
        <template v-slot:default = 'scope'>
          {{scope.row.areaCode ? `${scope.row.areaCode}`:''}}
        </template>
      </el-table-column>
      <el-table-column label="手机号" show-overflow-tooltip align="center" prop="mobile" >
      </el-table-column>
      <el-table-column label="成交" align="center" prop="" show-overflow-tooltip />
      <el-table-column label="认证" align="center" :formatter="authentication" />
      <el-table-column label="状态" align="center" prop="status" >
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="身份证审核状态" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.identityAuditStatus">未提交</div>
          <dict-tag v-else :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.identityAuditStatus" ></dict-tag>
          <el-tooltip  v-if="scope.row.identityAuditStatus === 3" class="item" effect="dark" :content="scope.row.identityAuditRemark" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="营业执照审核状态" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <div v-if="!scope.row.enterpriseAuditStatus">未提交</div>
          <dict-tag v-else :type="DICT_TYPE.AUDIT_STATUS" :value="scope.row.enterpriseAuditStatus" ></dict-tag>
          <el-tooltip  v-if="scope.row.enterpriseAuditStatus === 3" class="item" effect="dark" :content="scope.row.rowenterpriseAuditRemark" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope" >
          <el-button v-if="scope.row.identityAuditStatus !== 0 && scope.row.identityAuditStatus !== undefined" size="mini" type="text"  @click="identityFn(scope.row , '1')">身份证审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                @pagination="getList"/>
    <el-dialog
      title="认证"
      :visible.sync="attestationShow"
      width="80%">
      <div class="details">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="身份证" name="1">
            <div style="padding:0 40px;box-sizing: border-box;">
              <el-form ref="formId" label-position="left" label-width="100px" :rules="rulesId"  :model="IdDetails" >
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="IdDetails.name"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="cardType">
                  <dict-selector v-model="IdDetails.cardType"  :type="DICT_TYPE.CERTIFICATE_TYPE" ></dict-selector>
                </el-form-item>
                <el-form-item label="证件号码" prop="cardNumber">
                  <el-input v-model="IdDetails.cardNumber"></el-input>
                </el-form-item>
                <el-form-item label="证件正面照" prop="img1">
                  <div>
                    <el-input  readonly style="margin-bottom: 20px" v-model="IdDetails.img1"></el-input>
                    <ImageUpload :isShowTip="false" v-model="IdDetails.img1" :limit="1"></ImageUpload>
                  </div>
                </el-form-item>
                <el-form-item label="证件背面照" prop="img2">
                  <div>
                    <el-input readonly style="margin-bottom: 20px" v-model="IdDetails.img2"></el-input>
                    <ImageUpload :isShowTip="false" :limit="1" v-model="IdDetails.img2"></ImageUpload>
                  </div>
                </el-form-item>
                <el-form-item label="审核状态">
                  {{getDictDatas(DICT_TYPE.AUDIT_STATUS)[IdDetails.status].label}}
                </el-form-item>
                <el-form-item label="审核时间" v-if="IdDetails.status === 2 || IdDetails.status === 3">
                  {{parseTime(IdDetails.auditTime)}}
                </el-form-item>
                <el-form-item v-if="IdDetails.status === 1 || IdDetails.status === 3" label="审核备注">
                  <el-input v-model="IdDetails.auditRemark" :disabled="IdDetails.status === 3" type="textarea"></el-input>
                </el-form-item>
              </el-form>
              <div v-if="IdDetails.status === 1" style="text-align: center;margin-top: 20px;">
                <el-button type="primary" @click="idCardAuditFn(2)">审核通过</el-button>
                <el-button type="primary" @click="idCardAuditFn(3)">审核不通过</el-button>
                <el-button @click="attestationShow = false">取 消</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createUser,
  updateUser,
  deleteUser,
  getUserPage,
  exportUserExcel,
  operationLogApi,
  seTupdateBackletter,
  memberGetAuthIdcardInfo,
  memberGetAuthEnterpriseInfo,
  memberUserAuditIdCard,
  memberUserUpdateIdCard,
  memberUserUpdateEnterprise, setUserUpdateStatus, userCreateAuditEnterprise
} from "@/api/member/user";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import FileUpload  from "@/components/FileUpload"
import ImageUpload from "@/components/ImageUpload";
import uploadImage from "@/components/UploadImage";
import {CommonStatusEnum} from "@/utils/constants";
import {changeUserStatus, listServiceUser, listSimpleUsers} from "@/api/system/user";

let stateId = {
  0:'审核中',
  1:'审核通过',
  2:'审核不通过',
  3:'已过期'
}
export default {
  name: "underReview",
  components: {
    FileUpload,
    ImageUpload,uploadImage
  },
  data() {
    return {
      totalLog:0,
      stateId,
      IdDetails:{},
      enterpriseFrom:{},
      guaranteeUrl:undefined,
      DICT_TYPE,
      getDictDatas,
      // audit_status
      activeName:"1",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRangeLoginDate: [],
      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        isDeal:undefined,//	是否成交
        searchKey:undefined,//关键字
        auditStatus:1,//审核状态
        authType:undefined,//关键字
      },
      // 表单参数
      form: {},
      // 表单校验
      rulesId: {
        name: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
        cardType: [{ required: true, message: "证件类型不能为空", trigger: "blur" }],
        cardNumber: [{ required: true, message: "证件号码不能为空", trigger: "blur" }],
        img1: [{ required: true, message: "身份正面照不能为空", trigger: ['blur','change'] }],
        img2: [{ required: true, message: "身份正面照不能为空", trigger: ['blur','change'] }],
      },
      publicObj:undefined,
      operationLogShow:false,
      guaranteeShow:false,
      operationLogFrom:{
        page:1,
        row:10,
        userId:undefined
      },
      operationLogList:[],
      attestationShow:false
    };
  },
  created() {
    this.resetId();
    this.resetEnterprise()
    this.getList();
  },
  methods: {
    deleteFn(row){
      console.log(row)
      this.$modal.confirm(`是否要删除昵称为${row.nickname}的会员`).then(function (){
        return deleteUser(row.id)
      }).then( res => {
        if(res.code === 0) this.getList(); this.$message.success('删除成功')
      }).catch(() =>{
          this.$message.success('删除失败')
        }

      )
    },
    //导出
    exportFn(){
      this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
        this.exportLoading = true;
        return exportUserExcel(this.queryParams);
      }).then(response => {
        this.$download.excel(response, '${table.classComment}.xls');
        this.exportLoading = false;
      }).catch(() => {});
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.nickname + '"用户吗?').then(function() {
        return setUserUpdateStatus({id:row.id,status:row.status})
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
          : CommonStatusEnum.ENABLE;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams};
      this.addBeginAndEndTime(params, this.dateRangeLoginDate, 'loginDate');
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      // 执行查询
      getUserPage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 表单重置 */
    resetId(){
      this.IdDetails = {
        auditRemark: undefined,
        auditTime: undefined,
        cardNumber: undefined,
        cardType: 0,
        createTime: undefined,
        id: 0,
        img1: undefined,
        img2: undefined,
        name: '',
        status: 0,
        userId: 0
      }
    },//清空身份证
    resetEnterprise(){
      this.enterpriseFrom = {
        auditRemark: undefined,
        auditTime: undefined,
        cardNumber: undefined,
        createTime: undefined,
        id: undefined,
        img1: undefined,
        img2: undefined,
        legalName: undefined,
        name: undefined,
        status: 0,
        userId: undefined
      }
    },//清空企业
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeLoginDate = [];
      this.dateRangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    getOperationLogList(){
      operationLogApi(this.operationLogFrom).then(r=>{
        if(r.code === 0){
          this.operationLogList = r.data.list
          this.totalLog = r.data.total
        }
      })
    },
    setGuarantee(){
      seTupdateBackletter({userId:this.publicObj.id,backLetter:this.guaranteeUrl}).then(r=>{
        if(r.code === 0){
          this.publicObj.backLetterImg = this.guaranteeUrl;
          this.guaranteeShow = false;
          this.$message.success('保存成功');
        }
      })
    },
    identityFn(row,val){
      this.attestationShow = true;
      this.activeName = val;
      this.publicObj = row;
      this.getIdentityDetails();
    },
    getIdentityDetails(){
      this.resetId();
      memberGetAuthIdcardInfo({userId:this.publicObj.id}).then(r=>{
        if(r.code === 0 && !!r.data){
          this.IdDetails  = r.data
        }
      })
    },
    getEnterpriseFn(){
      this.resetEnterprise();
      memberGetAuthEnterpriseInfo({userId:this.publicObj.id}).then(r => {
        if(r.code === 0 && !!r.data){
          this.enterpriseFrom = r.data
        }
      })
    },
    //身份证审核
    idCardAuditFn(val){
      let p = {
        auditStatus:val,
        userCardAuthId:this.IdDetails.id,
        auditRemark:this.IdDetails.auditRemark
      }
      if(val === 2){
        p.auditRemark = undefined
      }
      memberUserAuditIdCard(p).then(r => {
        if(r.code === 0){
          this.$message.success('修改成功');
          this.getList()
          this.attestationShow = false;

        }
      })
    },
    authentication(row){
      if(!row.identityAuditStatus && !row.enterpriseAuditRemark){
        return '否'
      }else if(row.identityAuditStatus >= 0 && row.enterpriseAuditRemark >= 0){
        return '双认证'
      } else if(row.identityAuditStatus >= 0){
        return '身份'
      }else if(row.enterpriseAuditRemark >= 0){
        return '营业'
      }
    },
    submit(){
      let p = {
        cardNumber:this.enterpriseFrom.cardNumber,
        img1:this.enterpriseFrom.img1,
        img2:this.enterpriseFrom.img2,
        legalName:this.enterpriseFrom.legalName,
        name:this.enterpriseFrom.name,
        userEnterpriseAuthId:this.enterpriseFrom.id,
        userId:this.publicObj.id
      }
      userCreateAuditEnterprise(p).then(r => {
        console.log(r);
        if(r.code === 0){
          this.$message.success('添加成功!');
          this.enterpriseFrom.status = 2
          this.enterpriseFrom.auditTime = new Date().getTime()
          this.getEnterpriseFn();
        }
      })
    }
  },
  watch:{
    attestationShow(newVal){
      if(!newVal){
        this.resetId();
        this.resetEnterprise()
        this.publicObj = undefined;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.details{
  .el-input {
    width: 300px;
  }
  .el-textarea{
    width: 300px;
  }
}
</style>