<template>
	<view class="container" :style="{'background':mode?'#F2F4F3':'#fff'}">
		<Navbar :title="title" canBack></Navbar>
		<!-- 非居民 -->
		<view class="noResident" v-if="mode == '1'">
			<enterprise :optionsInfo="options" ref="noResidentInfo"></enterprise>
		</view>
		<!-- 居民 -->
		<view class="resident" v-else>
			<resident :optionsInfo="options" ref="residentInfo"></resident>
		</view>
		<view class="btnArea" v-if="showSubmitBtn">
			<view class="flex">
				<u-checkbox-group activeColor="#EA5504">
					<u-checkbox name="Y"></u-checkbox>
				</u-checkbox-group>
				<view class="flex">
					我已同意授权<view style="color: #EA5504;">相关协议</view>
				</view>
			</view>
			<view class="margin-tb">
				<u-button color="#EA5504" @click="handleSubmit">提交申请</u-button>
			</view>
		</view>
    <u-popup :show="popupShow" :customStyle="{width:'80%',borderRadius:'15px'}" round="15" mode="center" @close="popupClose" @open="popupOpen">
      <view class="popupSty">
        <u-image :src="submitSuccessImgUrl" width="300rpx"
                 height="300rpx"></u-image>
        <view class="titleOne">认证申请已提交</view>
        <view class="titleTwo">以实际审核为准</view>
        <u-button text="我知道了" @click="handSuccess" style="width: 80%; margin: 30px 0px 20px 0px;background-color: #ea5504;color: #ffffff;border-radius: 5px;"></u-button>
      </view>
    </u-popup>
	</view>
</template>

<script>
 import submitSuccessImg from '../../../../static/images/appList/realNameAuth/submitSucess.png'
	import resident from './components/resident.vue'
	import enterprise from './components/enterprise.vue'
	export default {
		components: {
			resident,
			enterprise
		},
		data() {
			return {
				mode: null,
				title: "",
        popupShow:false,
        submitSuccessImgUrl:submitSuccessImg,
        showSubmitBtn:true,
        options:{},
			};
		},
		onLoad(data) {
      console.log('打印date',data);
			if (data.mode) {
				this.mode = parseInt(data.mode);
				this.title = this.mode ? '非居民身份认证' : '居民身份认证'
			}
      if(data.option){
        let options = JSON.parse(data.option);
        this.options = options;
        if(options.fRzzt == '已认证'||options.fRzzt =='认证中'){
          this.showSubmitBtn = false;
        }
      }
		},
		methods: {
		  //提交成功后跳转到其他界面
      handSuccess(){
        this.popupShow = false;
        uni.switchTab({
          url: '/pages/mine/mine'
        })
      },
      async handleSubmit(){
        let userId = uni.getStorageSync('userId');
        console.log('打印this.modex',this.mode,);
        console.log('打印userId',userId);
        let params = {
          id:userId,
          fHylx:this.mode?'非居民':'居民',
          fSfzrxy:'',
          fSfzghy:'',
          fXm:'',
          fSjh:'',
          fXb:'',
          fNl:'',
          fSfzh:'',
          fSsczID:'',
          fSsczmc:'',
          fSfzhyxq:'',
          fYyzz:'',
          fKhxkz:'',
          fFrsfzrxy:'',
          fFrsfzghy:'',
          fSymc:'',
          fShtysbm:'',
        }
        let formParamsObj = this.mode==0?this.$refs.residentInfo.idCardObj:this.$refs.noResidentInfo.enterpriseObj;
        let pictureArrary = this.mode==0?this.$refs.residentInfo.picture:this.$refs.noResidentInfo.picture;
        let fSfzrphotoList = [];
        let fSfzghyphotoList = [];
        let fYyzzphotoList = [];
        let fKhxkzphotoList = [];
        let fFrsfzrxyphotoList = [];
        let fFrsfzghyphotoList =[];
        pictureArrary.map(item => {
          console.log('打印type',item);
          if(item.type == 'fSfzrxy'){
            fSfzrphotoList.push(JSON.parse(item.fileObj));
          }else if(item.type == 'fSfzghy'){
            fSfzghyphotoList.push(JSON.parse(item.fileObj));
          }else if(item.type == 'fYyzz'){
            fYyzzphotoList.push(JSON.parse(item.fileObj));
          }else if(item.type == 'fKhxkz'){
            fKhxkzphotoList.push(JSON.parse(item.fileObj));
          }else if(item.type == 'fFrsfzrxy'){
            fFrsfzrxyphotoList.push(JSON.parse(item.fileObj));
          }else if(item.type == 'fFrsfzghy'){
            fFrsfzghyphotoList.push(JSON.parse(item.fileObj));
          }
        });
        if(fSfzrphotoList.length<=0){
          uni.$u.toast('请上传身份证人像面');
          return false;
        }
        if(fSfzghyphotoList.length<=0){
          uni.$u.toast('请上传身份证国徽面');
          return false;
        }
        if(this.mode == 1 ){
          if(fYyzzphotoList.length<=0){
            uni.$u.toast('请上传营业执照');
            return false;
          }
          if(fKhxkzphotoList.length<=0){
            uni.$u.toast('请上传开户许可证');
            return false;
          }
          if(fFrsfzrxyphotoList.length<=0){
            uni.$u.toast('请上传法人身份证正面');
            return false;
          }
          if(fFrsfzghyphotoList.length<=0){
            uni.$u.toast('请上传法人身份证反面');
            return false;
          }
        }
        if(!formParamsObj.name ){
          uni.$u.toast(this.mode==0?'未输入姓名':'未输入经营者姓名');
          return false;
        }
        if(!formParamsObj.phone ){
          uni.$u.toast(this.mode==0?'未输入联系电话':'未输入经营者联系电话');
          return false;
        }
        if(!formParamsObj.sex ){
          uni.$u.toast(this.mode==0?'未选择性别':'未选择经营者性别');
          return false;
        }
        if(!formParamsObj.age ){
          uni.$u.toast(this.mode==0?'未输入年龄':'未输入经营者年龄');
          return false;
        }
        if(!formParamsObj.idcard ){
          uni.$u.toast(this.mode==0?'未输入身份证号':'未输入经营者身份证号');
          return false;
        }
        if(!formParamsObj.termOfValidity ){
          uni.$u.toast('未选择身份证号有效期');
          return false;
        }
        if(!formParamsObj.fSsczmc ){
          uni.$u.toast('未选择认证气站');
          return false;
        }
        console.log('打印fSfzrphotoList',fSfzrphotoList);
        params.fSfzrxy=JSON.stringify(fSfzrphotoList);
        params.fSfzghy=JSON.stringify(fSfzghyphotoList);
        params.fXm = formParamsObj.name;
        params.fSjh = formParamsObj.phone;
        params.fXb = formParamsObj.sex;
        params.fNl = formParamsObj.age;
        params.fSfzh = formParamsObj.idcard;
        params.fSfzhyxq =formParamsObj.termOfValidity + ' 00:00:00';//身份证号有效期
        params.fSsczID = formParamsObj.fSsczID ;//认证气站id;
        params.fSsczmc = formParamsObj.fSsczmc;//认证气站名称;
        switch (this.mode){
          case 0:
            break;
          case 1:
            if(!formParamsObj.industryAndCommerce ){
              uni.$u.toast('未输入工/商业名称');
              return false;
            }
            if(!formParamsObj.socialUnifiedCreditCode ){
              uni.$u.toast('未输入统一社会信用代码');
              return false;
            }
            //非居民
            params.fYyzz =JSON.stringify(fYyzzphotoList); //营业执照
            params.fKhxkz =JSON.stringify(fKhxkzphotoList); //开户许可证
            params.fFrsfzrxy = JSON.stringify(fFrsfzrxyphotoList);//法人身份证人像
            params.fFrsfzghy =JSON.stringify(fFrsfzghyphotoList);//法人身份证国徽像
            params.fSymc = formParamsObj.industryAndCommerce;
            params.fShtysbm = formParamsObj.socialUnifiedCreditCode;
            break;
        }
        const reseult= await this.$api.realNameAuthApi.submitRealNameAuth(params);
        if(reseult.code == 200 && reseult.state){
          this.popupShow = true;
          console.log('打印resulet',reseult);
        }else{
          uni.$u.toast(reseult.message);
        }

      },
      popupClose(){
        this.popupShow = false;
      },
      popupOpen(){

      },
		}
	}
</script>

<style lang="scss">
.popupSty{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  .titleOne{
    font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 26px;
    margin: 20px 0px;
  }
  .titleTwo{
    font-family: '苹方 中等', '苹方', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    letter-spacing: 2px;
    color: #666666;
  }
}
	.container {
		padding-bottom: 100px;
	}

	.idCardWarp {
		background: #F4F5F8;
		border-radius: 10rpx;
		padding: 0 24rpx;
	}

	.noCardWarp {
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		padding: 24rpx;
		margin: 24rpx;
	}

	.cardWarp {
		position: relative;
		width: 306rpx;
		height: 226rpx;
		display: flex;
		justify-content: center;
		background: #F0F3F7;
		border-radius: 14rpx;
	}

	.cardBar {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 56rpx;
		background: #DEE8F8;
		line-height: 56rpx;
		background-color: #dee8f8;
		border-radius: 0 0 14rpx 14rpx;
	}

	.cardBarText {
		text-align: center;
		color: #536CAA;
		font-weight: bold;
	}

	.btnArea {
		position: fixed;
		padding: 20rpx;
		bottom: 0;
		width: 100%;
		background: #fff;
		height: 188rpx;
	}
</style>