<template>
  <view class="main-content" :style="viewColor">
    <!--申请表单-->
    <view class="form-content">
      <!--背景图片-->
      <image mode="widthFix" class="bg-img" :src="formal_bg" />
      <image mode="heightFix" class="top-icon" :src="formal_icon" />
      <view class="top-title">提交转正申请</view>
      <!--表单内容-->
      <view class='form-main'>
        <!--申请表单-->
        <view class="list">
          <view class="list-item list-img-item">
            <view class="item-title">请上传申请凭证</view>
            <view class="item-desc">(图片格式支持JPG、PNG、JPEG)</view>
            <view class="upload">
              <view class='pictrue' v-if="apply_info.voucher_image">
                <image :src='apply_info.voucher_image'></image>
                <text class='iconfont icon-guanbi1' @click="delPic('','voucher_image')"></text>
              </view>
              <view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('voucher_image')">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>

          <!--提交按钮-->
          <template v-if="apply_info">
            <view v-if="apply_info.status == 0" class="submit-btn not-btn">审核中</view>
            <view v-else-if="apply_info.status == 1" class="submit-btn not-btn">已通过</view>
            <template v-else>
              <view v-if="apply_info.voucher_image" class="submit-btn" @click="submitInfo">提交申请</view>
              <view v-else class="submit-btn not-btn">提交申请</view>
            </template>
          </template>
          <template v-else>
            <view v-if="apply_info.voucher_image" class="submit-btn" @click="submitInfo">提交申请</view>
            <view v-else class="submit-btn not-btn">提交申请</view>
          </template>
        </view>
      </view>
    </view>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import {brokerageApplyFormalGet, brokerageApplyFormalPost} from "@/api/user";
import { HTTP_REQUEST_URL } from '@/config/app.js';

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      apply_id: 0,
      apply_info:{
        voucher_image: ''
      },
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      formal_bg: '',
      formal_icon: '',
    }
  },
  onLoad(options) {
    let _this = this;
    // 判断：是否登录
    if (!_this.isLogin) {
      // 未登录  授权登录
      _this.isAuto = true;
      _this.isShowAuth = true
    }else{
      // 已登录  获取信息
      _this.init();
    }
  },
  onReady() {
    this.formal_bg = `${HTTP_REQUEST_URL}/static/images/mer/formal_bg.png`;
    this.formal_icon = `${HTTP_REQUEST_URL}/static/images/mer/formal_icon.png`;
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      this.getApplyInfo();
    },
    // 图片上传 - 点击上传图片
    uploadPic(field) {
      let _this = this;
      _this.$util.uploadImageOne('upload/image', function(res) {
        if(res.status == 200){
          let data = res.data || {};
          let pics = data.path || '';

          _this.$set(_this.apply_info, field, pics);
        }
      });
    },
    // 图片生成 - 删除图片
    delPic(index, field){
      let _this = this;
      let pics = '';
      if(field === 'corporation_id_card' || field === 'chairman_id_card'){
        pics = Object.values(_this.apply_info[field]);
        pics.splice(index, 1);
      }

      _this.$set(_this.apply_info, field, pics);
    },
    // 提交信息
    submitInfo(){
      let _this = this;
      brokerageApplyFormalPost(_this.apply_info).then(res => {
        if (res.status == 200) {
          _this.$util.Tips({
            title: '提交成功！',
          },{
            tab: 5,
            url: '/pages/users/user_spread_user/index'
          });
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 获取申请信息
    getApplyInfo(){
      let _this = this;
      brokerageApplyFormalGet().then(res => {
        if (res.status == 200) {
          let data = res.data || {};
          _this.apply_info = data || {};
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    }
  }
}
</script>

<style scoped lang="scss">
.main-content{
  width: 100vw;
  min-height: 100vh!important;

  .form-content{
    position: relative;
    .bg-img{
      width: 100vw !important;
      height: 540rpx !important;
    }
    .top-icon{
      position: absolute;
      top: 60rpx;
      right: 60rpx;
      z-index: 10;
      height: 266rpx!important;
    }
    .top-title{
      position: absolute;
      top: 60rpx;
      left: 60rpx;
      z-index: 10;
      height: 266rpx!important;
      line-height: 266rpx!important;
      color: #ffffff;
      font-size: 50rpx;
      font-weight: bold;
    }
    .form-main{
      position: absolute;
      top: 300rpx;
      left: 0;
      width: 100vw;
      padding: 0rpx 30rpx;
      .apply-record{
        position: absolute;
        display: flex;
        align-items: center;
        top: 0;
        right: 0;
        color: #fff;
        font-size: 22rpx;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 8rpx 18rpx;
        border-radius: 20px 0px 0px 20px;
        .icon-xiangyou{
          font-size: 22rpx!important;
        }
      }
      .list{
        width: 100%;
        padding: 30rpx;
        background: #FFFFFF;
        border-top-right-radius: 30rpx;
        border-top-left-radius: 30rpx;

        .list-input-item{
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .item-name{
            width: 230rpx;
            height: 40rpx;
            line-height: 40rpx;
            text-align: left;
            font-size: 28rpx;
          }
          .item-input{
            width: calc(100% - 230rpx) !important;
            font-size: 30rpx;
          }
        }
        .list-img-item{
          width: 100%;
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: flex-start;
          justify-content: center;
          .item-title{
            color: #666666;
            font-size: 28rpx;
            display: block;
          }
          .item-desc{
            color: #B2B2B2;
            font-size: 22rpx;
            display: block;
            margin-top: 8rpx;
            line-height: 36rpx;
          }
          .upload{
            margin-top: 20rpx;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            .pictrue {
              width: 130rpx;
              height: 130rpx;
              position: relative;
              font-size: 11px;
              color: #bbb;
              margin-right: 15rpx;
              margin-bottom: 15rpx;
              &:nth-child(4n) {
                margin-right: 0;
              }
              &:nth-last-child(1) {
                border: 0.5px solid #ddd;
                box-sizing: border-box;
              }
              uni-image, image {
                width: 100%;
                height: 100%;
                border-radius: 1px;
                img {
                  -webkit-touch-callout: none;
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  display: block;
                  position: absolute;
                  top: 0;
                  left: 0;
                  opacity: 0;
                  width: 100%;
                  height: 100%;
                }
              }
              .icon-guanbi1 {
                font-size: 33rpx;
                position: absolute;
                top: -10px;
                right: -10px;
              }
            }
          }
        }
        .list-item{
          padding: 20rpx 0;
        }
        .list-item:not(:last-child){
          border-bottom: 1px solid #eee;
        }
        .submit-btn{
          width: 100%;
          margin: 50rpx auto auto auto;
          height: 90rpx;
          line-height: 90rpx;
          border-radius: 50rpx;
          text-align: center;
          font-size: 15px;
          color: #fff;
          background: #409eff;
        }
        .manage-info {
          width: calc(100% - 230rpx) !important;
          margin-top: 20rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .left {
            width: 100rpx;
            text-align: left;

            .left-image {
              width: 90rpx;
              height: 90rpx;
              border-radius: 50%;
            }
          }
          .right {
            width: calc(100% - 100rpx);

            .nickname {
              width: 100%;
              font-size: 30rpx;
              font-weight: bold;
            }

            .uid {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .not-btn{
    background-color: #909399!important;
    color: #fff!important;
  }
}
</style>
