<template>
  <div class="body">
    <template v-if="check_status==-1 || check_status==1">
      <p class="title">第三方服务机构开户信息完善</p>
      <p class="title_info">第三方服务机构开户用于服务平台中资产托管时的资产价格评估或资产价值评估，需有相关资质机构方能注册成功。</p>
      <div class="subject">
        <span>账户主体：</span>
        <el-radio-group v-model="ruleForm.account_type" :disabled="disabled" @change="changeRadio">
          <el-radio  :label="1">机构</el-radio>
        </el-radio-group>
      </div>
      <div class="table">
        <div class="table_left">
          <p class="table_title">请如实上传以下资料：</p>
          <div class="table_content">
            <div class="table_content_item" v-for="(item,index) in upList" :key="index">
              <span>{{item.name}}</span>
              <div class="table_content_item_upload">
                <el-upload
                  class="upload-demo"
                  :action="action"
                  :on-change="fileChange"
                  :show-file-list="false"
                  :on-error="handleAvatarError"
                  list-type="picture"
                  :on-success="(res,file)=>{handleAvatarSuccess(res,file,index,item.key)}"
                  >
                  <span class="upload_span">上传</span>
                </el-upload>
                <span class="el-icon-success" v-if="item.type==1"></span>
              </div>
            </div>
          </div>

          <p class="table_title">请确认并完善以下信息：</p>
          <div class="table_content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="200px" class="ruleForm"  label-position="left">
              <template v-if="ruleForm.account_type==1">
                <el-form-item label="机构名称" prop="firm_name" >
                  <el-input v-model="ruleForm.firm_name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="credit_code" >
                  <el-input v-model="ruleForm.credit_code" placeholder="请输入" type="number" maxlength="15"></el-input>
                </el-form-item>
                <!-- <el-form-item label="主体类型" prop="main_type" >
                  <el-input v-model="ruleForm.main_type" placeholder="请输入"></el-input>
                </el-form-item> -->
                <el-form-item label="注册资本" prop="reg_money" >
                  <el-input v-model="ruleForm.reg_money" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人" prop="legal_name" >
                  <el-input v-model="ruleForm.legal_name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="住所" prop="domicile" >
                  <el-input v-model="ruleForm.domicile" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="成立日期" prop="establish_time" >
                  <el-date-picker
                    v-model="ruleForm.establish_time"
                    type="date"
                    value-format="timestamp"
                    placeholder="选择成立日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="收货地址" prop="address" >
                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="收货联系人" prop="uname" >
                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="收货联系电话" prop="phone" maxlength="11">
                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item label="姓名" prop="username" >
                  <el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" prop="id_card" >
                  <el-input v-model="ruleForm.id_card" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="userphone" >
                  <el-input v-model.number="ruleForm.userphone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="开户行名称" prop="bank_name" >
                  <el-input v-model="ruleForm.bank_name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="id_bank" >
                  <el-input v-model.number="ruleForm.id_bank" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="收货地址" prop="address" >
                  <el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="收货联系人" prop="uname" >
                  <el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="收货联系电话" prop="phone" maxlength="11">
                  <el-input v-model.number="ruleForm.phone" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-form>
          </div>
        </div>

        <div class="table_right">
          <p class="table_title">已上传资料：</p>
          <div class="table_right_content">
            <div  v-for="(item,index) in upList" :key="index" >
              <template v-if="item.key=='else_file' && item.type==1">
                <div class="table_right_item" v-for="(item1,index1) in item.url" :key="index1" >
                  <span @click="onPreview([item.url[index1]])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span>
                  <i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
                </div>
              </template>
              <template v-else>
                <div class="table_right_item" v-if="item.type==1" >
                  <span @click="onPreview([item.url])">{{item.name}}</span>
                  <i class="el-icon-close" @click="deleteUrl(item,index)"></i>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="footer" v-if="check_status==-1">
        <button class="submit" @click="submit">提交资料</button>
        <div>
          <el-checkbox v-model="checked" :true-label=1 :false-label=2></el-checkbox>
          <span class="footer_span">已阅读并同意</span>
          <span class="footer_span1">《开户申请书与承诺书》</span>
        </div>
      </div>
    </template>
    <template v-else-if="check_status==0 || check_status==2">
      <p class="title">第三方服务机构开户信息完善</p>
      <p class="title_info">第三方服务机构开户用于服务平台中资产托管时的资产价格评估或资产价值评估，需有相关资质机构方能注册成功。</p>
      <div class="examine_content">
        <img src="../../../assets/img/examine_img.png" alt="" class="examine_img" v-if="check_status==0">
        <img src="../../../assets/img/examine_img1.png" alt="" class="examine_img" v-else-if="check_status==2">
        <p class="examine_tips">
          <template v-if="check_status==0">
            <span >资料已经提交，请耐心等待审核</span>
          </template>
          <template v-else-if="check_status==2">
            <span >审核失败！请重新提交资料</span>
            <span class="examine_tips_span" @click="checkStatus" >重新提交</span>
          </template>
        </p>
        <div class="error_msg" v-if="check_status==2 && ruleForm.check_message!=''">
          <p>失败原因：</p>
          <p v-html="ruleForm.check_message"></p>
        </div>
      </div>
    </template>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="img_url"
      :z-index="9999"
    />
  </div>
</template>
<script>
import {openAccount,getAccountInfo} from '../../../api/index';
export default {
  data(){
    return{
      subject:1,
      checked:1,
      check_status:-1,
      disabled:false,
      showViewer:false,
      host:'http://wenhua.xingtongworld.com',
      action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
      upList:[
        {name:'营业执照（复印件）',type:0,url:'',key:'business_license'},
        {name:'法人代表证明书',type:0,url:'',key:'legal_certificate'},
        {name:'法人身份证件（复印件）',type:0,url:'',key:'legal_card'},
        {name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
        {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate'},
        {name:'资产证明文件',type:0,url:'',key:'asset_certificate'},
        {name:'法人授权委托书',type:0,url:'',key:'legal_authorization'},
        {name:'经办人身份证（复印件）',type:0,url:'',key:'operator_card'},
        {name:'其他要求文件',type:0,url:[],key:'else_file'},
      ],
      ruleForm: {
        open_account_type:'third_party',
        account_type: 1,
        business_license: '',
        legal_certificate: '',
        legal_card: '',
        number_certificate: '',
        bank_account_certificate: '',
        legal_authorization: '',
        operator_card: '',
        else_file: [],
        user_card_front: '',
        user_card_backfacade: '',
        asset_certificate: '',
        asset_trusteeship: '',
        firm_name: '',
        credit_code: '',
        main_type: '',
        reg_money: '',
        legal_name: '',
        domicile: '',
        establish_time: '',
        username: '',
        id_card: '',
        userphone: '',
        bank_name: '',
        id_bank: '',
        address: '',
        uname: '',
        phone: '',
        check_message:''
      },
      rules: {
        firm_name: [
          { required: true, message: '请输入机构名称', trigger: 'blur' },
        ],
        credit_code: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        ],
        // main_type: [
        //   { required: true, message: '请输入主体类型', trigger: 'blur' },
        // ],
        reg_money: [
          { required: true, message: '请输入注册资本', trigger: 'blur' },
        ],
        legal_name: [
          { required: true, message: '请输入法定代表人', trigger: 'blur' },
        ],
        domicile: [
          { required: true, message: '请输入住所', trigger: 'blur' },
        ],
        establish_time: [
          { required: true, message: '请选择成立日期', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' },
        ],
        uname: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入收货人电话', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        id_card: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
        ],
        userphone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
        bank_name: [
          { required: true, message: '请输入开户行名称', trigger: 'blur' },
        ],
        id_bank: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
        ],
      }
    }
  },
  components: {
    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
  },
  created(){
    this.getAccountInfo()
  },
  methods:{
    checkStatus(){
      this.check_status=-1
    },
    //获取资料信息
    getAccountInfo(){
      let data={
        open_account_type:'third_party'
      }
      getAccountInfo(data).then(res => {
        console.info(res)
        if (res.code==100) {
          this.check_status=res.data.check_status
          if(res.data!=null){
            this.disabled=true
            // this.changeRadio(res.data.account_type)
            res.data.establish_time=res.data.establish_time*1000
            res.data.check_message = res.data.check_message.replace(/\n/gm, "<br/>")
            // res.data.else_file=JSON.parse(res.data.else_file)
            for(let key in res.data){
              for(let item in this.ruleForm){
                if(key==item){
                  this.ruleForm[item]=res.data[key]
                  continue;
                }
              }
              this.upList.forEach((v,i)=>{
                if(key==v.key){
                  v.type=1;
                  v.url=res.data[key]
                }
              })
            }
          }
        }
      });
    },
    //切换rado事件
    changeRadio(label){
      if(label==1){
        this.upList=[
          {name:'营业执照（复印件）',type:0,url:'',key:'business_license'},
          {name:'法人代表证明书',type:0,url:'',key:'legal_certificate'},
          {name:'法人身份证件（复印件）',type:0,url:'',key:'legal_card'},
          {name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
          {name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate'},
          {name:'资产证明文件',type:0,url:'',key:'asset_certificate'},
          {name:'法人授权委托书',type:0,url:'',key:'legal_authorization'},
          {name:'经办人身份证（复印件）',type:0,url:'',key:'operator_card'},
          {name:'其他要求文件',type:0,url:[],key:'else_file'},
        ]
      }else{
        this.upList=[
          {name:'身份证正面',type:0,url:'',key:'user_card_front'},
          {name:'身份证背面',type:0,url:'',key:'user_card_backfacade'},
          {name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
          {name:'资产证明文件',type:0,url:'',key:'asset_certificate'},
          {name:'其他要求文件',type:0,url:[],key:'else_file'},
        ]
      }
      this.ruleForm.else_file=[];
    },
    //删除图片
    deleteUrl(item,index){
      if(item.key=="else_file"){
        this.ruleForm.else_file.splice(index1,1)
        this.upList[index].url.splice(index1,1)
        if(this.ruleForm.else_file.length==0){
          this.upList[index].type=0;
          this.upList[index].url=[];
          this.ruleForm[item.key]=[]
        }
      }else{
        this.upList[index].type=0;
        this.upList[index].url='';
        this.ruleForm[item.key]=''
      }
    },
    submit(){
      console.info(this.ruleForm)

      this.$refs["ruleForm1"].validate((valid) => {
        if(valid){
          if(this.ruleForm.account_type==1){
            this.ruleForm.establish_time=this.ruleForm.establish_time/1000
          }
          openAccount(this.ruleForm).then(res => {
            console.info(res)
            if(res.code==101){
              this.$message.error(res.msg);
            }else{
              this.$message.success('上传资料成功！请等待审核~');
              this.disabled=true
            }
            this.ruleForm.establish_time=this.ruleForm.establish_time*1000
          });
        }
      })
    },
    handleAvatarError(){
      this.$message.error('文件上传失败！');
    },
    handleAvatarSuccess(res, file, index,key){
      if(res.code==1){
        if(key=="else_file"){
          this.upList[index].type=1;
          this.ruleForm.else_file.push(this.host+res.data.img_url)
          this.upList[index].url.push(this.host+res.data.img_url);
        }else{
          this.upList[index].type=1;
          this.upList[index].url=this.host+res.data.img_url;
          this.ruleForm[key]=this.host+res.data.img_url
        }
        this.$message.success('文件上传成功！');
      }
    },
    fileChange(file){
      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
          this.$message.error('只能是图片!');
          this.$refs.upload.clearFiles();
          return;
      }
      if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 3MB!');
          this.$refs.upload.clearFiles();
          // this.$set(this.query, 'goods_img', '');
          return;
      }
    },

  }
}
</script>
<style scoped>
  .body{
    margin-top: 20px;
  }
  .examine_tips_span{
    display: inline-block;
    color: #C94C4C;
    text-decoration: underline;
    margin-left: 10px;
    cursor: pointer;
  }
  .title{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .title_info{
    font-size: 12px;
    color: #AAAAAA;
  }
  .table_right{
    padding-left: 50px;
  }
  .table_right_content{
    margin-top: 20px;
  }
  .table_right_item{
    width: 300px;
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 14px;
    justify-content: space-between;
  }
  .table_right_item>span{
    cursor: pointer;
  }
  .table_right_item>span:hover{
    text-decoration: underline;
  }
  .table_right_item>i{
    cursor: pointer;
  }
  .subject{
    display: flex;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-top: 30px;
  }
  .subject >>>.el-radio, .el-radio__input{
    line-height: inherit;
    margin-left: 30px;
  }
  .table{
    display: flex;
    margin-top: 15px;
  }
  .table_left{
    width: 800px;
    border-right: 1px solid #EAB1B1;
  }
  .table_title{
    font-size: 14px;
    margin-bottom: 15px;
  }
  .table_content{
    padding-left: 30px;
    margin-bottom: 15px;
    padding-right: 50px;
  }
  .table_content_item{
    font-size: 14px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .table_content_item_upload{
    display: flex;
    align-items: center;
    color: #C94C4C;
  }
  .el-icon-success{
    font-size: 18px;
  }
  .upload-demo{
    margin-right: 20px;
  }
  .upload_span{
    color: #C94C4C;
    text-decoration: underline;
  }
  .ruleForm>>>.el-form-item__label{
    color: black;
  }
  .ruleForm>>>.el-input{
    width: 500px;
  }
  .footer{
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
  }
  .submit{
    width: 340px;
    height: 40px;
    background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
    background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
    background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
    background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
    background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
    font-size: 14px;
    color: #FFFFFF;
    border: none;
    margin-bottom: 10px;
  }
  .footer_span{
    color: rgb(127, 127, 127);
  }
  .footer_span1{
    color: rgb(201, 76, 76);
    text-decoration: underline;
  }
  .examine_content{
    width: 100%;
    text-align: center;
    padding-top: 40px;
    color: #C3CBD6;
    font-size: 14px;
    height: 700px;
    box-sizing: border-box;
  }
</style>
