<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="apply-upgrade">
    <!--顶部提示内容-->
    <view class="top-tips" v-if="parseInt(info.status) === 3">驳回原因：{{ info.reject_cause }}</view>
    <!--表单让你-->
    <view class="title">1.填写注册申请代理的信息</view>
    <view class="form-list">
      <view class="form-list-block">
        <view class="left">真实姓名</view>
        <view class="right">
          <input class="uni-input" v-model="info.username"  placeholder="请输入真实姓名" />
        </view>
      </view>
      <view class="form-list-block">
        <view class="left">联系电话</view>
        <view class="right">
          <input class="uni-input" v-model="info.phone" placeholder="请输入联系电话" />
        </view>
      </view>
      <view class="form-list-block">
        <view class="left">身份证号</view>
        <view class="right">
          <input class="uni-input" v-model="info.id_card" placeholder="请输入身份证号" />
        </view>
      </view>
    </view>
    <view class="title">2.请拍摄并上传你的有效身份证</view>
    <view class="id-card">
      <view class="id-card-content">
        <view class="id-card-block">
          <image :src="$util.img(info.id_card_front || default_card_front)" mode="widthFix"></image>
          <view class="upload-buttons" @click="uploadCard('id_card_front')">上传身份证正面</view>
        </view>
        <view class="id-card-block">
          <image :src="$util.img(info.id_card_reverse || default_card_reverse)" mode="widthFix"></image>
          <view class="upload-buttons" @click="uploadCard('id_card_reverse')">上传身份证反面</view>
        </view>
      </view>
      <view class="id-card-tips">
        <view class="id-card-tips-line">大陆公民持有的本人有效二代身份证</view>
        <view class="id-card-tips-line">
          上传时确保身份证<text class="tips-stress">边框完整，字体清晰，亮度均匀。</text>
        </view>
      </view>
    </view>
    <view class="title" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">3.请完成协议</view>
    <view class="agree" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">
      <textarea class="textarea-content" placeholder="请填写如下段落" auto-height v-model="info.upgrade_agree"></textarea>
      <view class="agree-text">
        <text class="agree-red">请输入这段话：</text>
        {{ baseInfo.upgrade_agree }}
        <text class="agree-red" @click="$util.copy(baseInfo.upgrade_agree)">[复制]</text>
      </view>
    </view>
    <button class="submit-button" @click="submitApply" v-if="parseInt(info.status) === 1" disabled>审核中</button>
    <button class="submit-button" @click="submitApply" v-if="parseInt(info.status) === 3 || parseInt(info.status) === 0">确定提交</button>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
export default {
  components: {},
	data() {
		return {
      baseInfo : {},
      default_card_front: 'public/static/img/fenxiao/id_card_front.png',
      default_card_reverse: 'public/static/img/fenxiao/id_card_reverse.png',
      info: {
        username: '',
        phone: '',
        id_card: '',
        id_card_front: '',
        id_card_reverse: '',
        upgrade_agree: '',
      },
		};
	},
	mixins: [],
	onLoad(option) {},
  onReady(){
    if (uni.getStorageSync('token')) {
      this.getBaseInfo();
    } else {
      this.$refs.login.open('/pages_promotion/fenxiao/apply_upgrade');
    }
  },
	onShow() {},
	methods: {
    // 获取基本信息
    getBaseInfo(){
      let _this = this;
      _this.$api.sendRequest({
        url: '/fenxiao/api/apply/upgradeBase',
        success: res => {
          if (res.code === 0) {
            _this.baseInfo = res.data;
            _this.info = res.data.info;

            if(parseInt(this.info.status) === 2){
              _this.$util.showToast({
                title: "审核已经通过",
                mask: true,
                duration: 1000,
                success: function () {
                  setTimeout(() => {
                    _this.$util.redirectTo('/pages_promotion/fenxiao/index', {}, 'redirectTo');
                  }, 1000);
                }
              });
            }

            if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
          }
          else{
            this.$util.showToast({
              title: res.message
            });
          }
        },
        fail: res => {
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
    // 身份证上传
    uploadCard(type) {
      let _this = this;
      this.$util.upload(1, {path: 'evaluateimg'}, res => {
        if(type === 'id_card_front') _this.info.id_card_front = res[0];
        else _this.info.id_card_reverse = res[0];

        this.$forceUpdate();
      });
    },
    // 提交内容
    submitApply(){
      let _this = this;
      let defaultRule = [
        {name: 'username', checkType: 'required', errorMsg: '请输入真实姓名'},
        {name: 'phone', checkType: 'required', errorMsg: '请输入联系电话'},
        {name: 'phone', checkType: 'phoneno', errorMsg: '请输入正确的手机号'},
        {name: 'id_card', checkType: 'required', errorMsg: '请输入身份证号'},
        {name: 'id_card_front', checkType: 'required', errorMsg: '请上传身份证正面'},
        {name: 'id_card_reverse', checkType: 'required', errorMsg: '请上传身份证反面'},
        {name: 'upgrade_agree', checkType: 'required', errorMsg: '请输入协议内容以代表同意当前协议'},
        {name: 'upgrade_agree', checkType: 'same', errorMsg: '协议不一致，请检查输入协议是否和下放协议内容一直', checkRule: this.baseInfo.upgrade_agree},
      ];
      _this.$util.verify(_this.info,defaultRule).then(res => {
        _this.$api.sendRequest({
          url: '/fenxiao/api/apply/upgradeApply',
          data: _this.info,
          success: res => {
            if (res.code === 0) {
              _this.$util.showToast({
                title: '申请成功',
                success: function () {
                  _this.getBaseInfo();
                  _this.$forceUpdate();
                }
              });
            }else{
              this.$util.showToast({
                title: res.message
              });
            }
          },
          fail: res => {
            if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
          }
        });
      }).catch((reject)=>{
        console.log(reject);
      });
    },

	},
	onBackPress(options) {
		if (options.from === 'navigateBack') return false;
		this.$util.redirectTo('/pages/member/index');
		return true;
	}
};
</script>

<style lang="scss" scoped>
.apply-upgrade{
  padding: 30rpx;

  .top-tips{
    color: #f56c6c;
    background-color: #fde2e2;
    position: relative;
    left: -15px;
    top: -15px;
    width: 100%;
    padding: 15px;
    line-height: 20px;
    font-size: 15px;
  }
  .title{
    width: 100%;
    font-size: 30rpx;
    color: #999999;
    margin-bottom: 20rpx;
  }
  .form-list{

    .form-list-block{
      width: 100%;
      color: #000000;
      height: 90rpx;
      line-height: 90rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: center;
      justify-content: space-between;
      .left{
        height: 70rpx;
        font-size: 30rpx;
        width: 240rpx;
      }
      .right{
        font-size: 30rpx;
        width: calc(100% - 240rpx);
        input{
          height: 70rpx;
          text-align: right;
          font-size: 30rpx;
          color: #898989;
        }
      }
    }
  }
  .id-card{
    .id-card-content{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: flex-start;
      justify-content: space-between;

      .id-card-block{
        width: calc(50% - 15rpx);
        position: relative;
        border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding-top: 20rpx;
        padding-bottom: 75rpx;

        /deep/ image{
          width: 90%;
          div{
            background-position: top center!important;
          }
        }

        .upload-buttons{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          font-size: 32rpx;
          text-align: center;
          background: #5581fe;
          color: #ecefff;
          height: 60rpx;
          line-height: 60rpx;
        }
      }
    }
    .id-card-tips{
      padding: 30rpx 0;

      .id-card-tips-line{
        .tips-stress{
          color: #e15c5c;
        }
      }
    }
  }
  .agree{
    .textarea-content{
      width: calc(100% - 40rpx);
      border: 2rpx solid #7796e9;
      border-radius: 20rpx;
      padding: 20rpx;
      min-height: 300rpx;
      font-size: 30rpx;
    }
    .agree-text{
      font-size: 26rpx;
      line-height: 40rpx;
      margin-top: 20rpx;

      .agree-red{
        font-size: 26rpx;
        line-height: 40rpx;
        color: #ee7877;
      }
    }
  }
  .submit-button{
    background: #5581fe;
    border-radius: 100rpx;
    color: #cbd9f7;
    font-size: 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    margin-top: 100rpx;
  }
}
</style>
