<template>
  <div>
    <h2>实名认证</h2>
    <el-divider></el-divider>
    <span style="color: #1482f0">！实名认证决定了账号属性。实名认证一经通过，后续付款方的银行开户名必须与聚合实名信息一致，否则不给予入账！且个人和企业认证不能互转。</span><br><br>
    <h4>选择认证类型：</h4>
    <center>
      <!--个人认证-->
      <div style="width: 70%;">
        <el-row style="border: 2px solid #e0e0e0;">
          <el-col :span="4"><div class="grid-content bg-purple"><center><h2>个人认证</h2></center></div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="color: #1482f0">认证方式</span> 支持个人身份证认证、人脸识别实时认证
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="color: #1482f0">使用限制</span> 个人基础认证不支持部分「企业专用」类接口
              </div></el-col>
            </el-row>
          </div></el-col>
          <el-col :span="4" style="margin-top: 20px;"><div class="grid-content bg-purple">
            <center> <el-button type="primary" @click="tocompanyauthentication(1)">立即认证</el-button></center>
          </div></el-col>
        </el-row>
      </div><br><br><br>
      <!--企业认证-->
      <div style="width: 70%;">
        <el-row style="border: 2px solid #e0e0e0;">
          <el-col :span="4"><div class="grid-content bg-purple"><center><h2>企业认证</h2></center></div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="color: #1482f0">适用群体</span> 企业、党政及国家机关、事业单位、民办非企业单位、社会团体、个体工商户等
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="color: #1482f0">基础认证</span> 上传企业营业执照快速认证，支持程序代码方式（api）调用接口
              </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="color: #1482f0">高级认证</span> 通过对公打款、法人手机验证等方式进行认证，支持API购买（余额支付、支付宝支付、微信支付）
              </div></el-col>
            </el-row>
          </div></el-col>
          <el-col :span="4" style="margin-top: 20px;"><div class="grid-content bg-purple">
            <center> <el-button type="primary" @click="tocompanyauthentication(2)">立即认证</el-button></center>
          </div></el-col>
        </el-row>
      </div>
    </center>

    <!--企业认证页面对话框-->
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <!--个人认证-->
      <div v-if="this.index==1">
        <h2>基本信息填写</h2><br>
        <el-form :model="personForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="实名认证附件上传：" prop="pass">
            <el-upload
              action="/dev-api/market/user/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess1"
              :limit="2">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisiblepicture">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <span>请上传清晰完整的营业执照副本照片</span>
          </el-form-item>
          <el-form-item label="公司名称：" prop="companyName">
            <el-input type="text" v-model="personForm.companyName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名：" prop="USCI">
            <el-input type="text" v-model="personForm.USCI" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="证件类型：" prop="companyLeader">
            <span>居民身份证</span>
          </el-form-item>
          <el-form-item label="证件号码：" prop="registrantName">
            <el-input type="text" v-model="personForm.registrantName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="registrantPhone">
            <el-input type="text" v-model="personForm.registrantPhone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <center>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="personyes()">提交审核</el-button>
        </center>

      </div>
      <!--企业认证-->
      <div v-if="this.index==2">
        <h2>基本信息填写</h2><br>
        <el-form :model="companyForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="企业营业执照副本：" prop="pass">
            <el-upload
              action="/dev-api/market/company/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :limit="1">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisiblepicture">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <span>请上传清晰完整的营业执照副本照片</span>
          </el-form-item>
          <el-form-item label="公司名称：" prop="companyName">
            <el-input type="text" v-model="companyForm.companyName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="社会统一编码：" prop="USCI">
            <el-input type="text" v-model="companyForm.usci" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="企业法人姓名：" prop="companyLeader">
            <el-input type="text" v-model="companyForm.companyLeader" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名：" prop="registrantName">
            <el-input type="text" v-model="companyForm.registrantName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话：" prop="registrantPhone">
            <el-input type="text" v-model="companyForm.registrantPhone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人职位：" prop="registrantPosition">
            <el-input type="text" v-model="companyForm.registrantPosition" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司地址：" prop="companyAddress">
            <el-input type="text" v-model="companyForm.companyAddress" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <center>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="companyyes(companyForm)">提交审核</el-button>
        </center>
      </div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {companyauthentication} from "@/api/authentication/authentication";

export default {
    name: "Authentication",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        dialogVisible:false,
        index:'',
        dialogtitle:'',
        companyForm:{},
        personForm:{
          personCardPicture:[]
        },
        dialogImageUrl: '',
        dialogVisiblepicture: false
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //去企业实名认证页面
      tocompanyauthentication(index){
        this.index=index
        if (this.index === 1) {
          this.dialogtitle= '个人认证';
        } else if (this.index === 2) {
          this.dialogtitle= '企业认证';
        }
        this.dialogVisible=true

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //个人认证上交
      personyes(){

        this.dialogVisible=false
      },
      //企业认证上交
      companyyes(companyForm){
        companyauthentication(companyForm).then(response=>{
          alert(response.msg)
          if (response.code==200){}
          this.dialogVisible=false
        })
      },
      //图片上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //单图片上传
      handleSuccess(response,file,fileList){
        this.companyForm.businessLicense=response.data
      },
      //多图片上传
      handleSuccess1(response,file,fileList){
        this.personForm.personCardPicture=[]
        for(const  i in fileList){
          this.personForm.personCardPicture.push(fileList[i]).response.data
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
