<template>
	<view class="main-content" :style="viewColor">
    <!--申请表单-->
    <view class="form-content">
      <!--背景图片-->
      <image mode="widthFix" class="bg-img" src="@/static/images/supplier/supplier_apply_bg.jpg"  />
      <!--表单内容-->
      <view class='form-main'>
        <!--申请记录查看按钮-->
        <view class="apply-record" @click="applyRecord">
          申请记录 <text class="iconfont icon-xiangyou"></text>
        </view>
        <!--申请表单-->
        <view class="list">
          <view class="list-item list-input-item">
            <text class="item-name">邀请人</text>
            <view v-if="invite_agent_info.uid > 0" class="manage-info">
              <view class="left">
                <image class="left-image" :src="invite_agent_info.user.avatar" />
              </view>
              <view class="right">
                <view class="nickname">{{ invite_agent_info.user.nickname || invite_agent_info.user.real_name || invite_agent_info.user.uid }}</view>
                <view class="uid">UID：{{ invite_agent_info.user.uid }}</view>
              </view>
            </view>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">酒厂名称</text>
            <input class="item-input" type="text" placeholder="请输入酒厂名称" v-model="apply_info.winery_name"/>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">生产规模(年/吨)</text>
            <input class="item-input" type="text" placeholder="请输入每年产量多少吨" v-model="apply_info.scale"/>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">窖池大小(m³)</text>
            <input class="item-input" type="text" placeholder="请输入窖池大小为多少立方米" v-model="apply_info.cellar_size"/>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">法人姓名</text>
            <input class="item-input" type="text" placeholder="请输入法人姓名" v-model="apply_info.corporation_name"/>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">法人电话</text>
            <input class="item-input" type="text" placeholder="请输入法人电话" v-model="apply_info.corporation_phone"/>
          </view>
          <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-for="(item,index) in apply_info.corporation_id_card" :key="index" :data-index="index">
                <image :src='item'></image>
                <text class='iconfont icon-guanbi1' @click="delPic(index,'corporation_id_card')"></text>
              </view>
              <view class='pictrue acea-row row-center-wrapper row-column'
                    @click="uploadPic('corporation_id_card')"
                    v-if="Object.values(apply_info.corporation_id_card).length < 2">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">董事长姓名</text>
            <input class="item-input" type="text" placeholder="请输入董事长姓名" v-model="apply_info.chairman_name" />
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">董事长电话</text>
            <input class="item-input" type="text" placeholder="请输入董事长电话" v-model="apply_info.chairman_phone" />
          </view>
          <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-for="(item,index) in apply_info.chairman_id_card" :key="index" :data-index="index">
                <image :src='item'></image>
                <text class='iconfont icon-guanbi1' @click="delPic(index,'chairman_id_card')"></text>
              </view>
              <view class='pictrue acea-row row-center-wrapper row-column'
                    @click="uploadPic('chairman_id_card')"
                    v-if="Object.values(apply_info.chairman_id_card).length < 2">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">联系人姓名</text>
            <input class="item-input" type="text" placeholder="请输入联系人姓名" v-model="apply_info.contacts_name"/>
          </view>
          <view class="list-item list-input-item">
            <text class="item-name">联系人电话</text>
            <input class="item-input" type="text" placeholder="请输入联系人电话" v-model="apply_info.contacts_phone"/>
          </view>
          <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.business_license">
                <image :src='apply_info.business_license'></image>
                <text class='iconfont icon-guanbi1' @click="delPic('','business_license')"></text>
              </view>
              <view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('business_license')">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>
          <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.production_icense">
                <image :src='apply_info.production_icense'></image>
                <text class='iconfont icon-guanbi1' @click="delPic('','production_icense')"></text>
              </view>
              <view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('production_icense')">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>
          <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.circulative_license">
                <image :src='apply_info.circulative_license'></image>
                <text class='iconfont icon-guanbi1' @click="delPic('','circulative_license')"></text>
              </view>
              <view v-else class='pictrue acea-row row-center-wrapper row-column' @click="uploadPic('circulative_license')">
                <text class='iconfont icon-icon25201'></text>
                <view>上传图片</view>
              </view>
            </view>
          </view>
          <!--提交按钮-->
          <view class="submit-btn" @click="submitInfo">提交申请</view>
        </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 {getSingleAgentInfo} from "@/api/agent";
import {supplierApplyJoin, supplierApplyInfo} from "@/api/supplier";

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      apply_id: 0,
      apply_info:{
        invite_agent_id: 0,
        winery_name: '',
        scale: '',
        cellar_size: '',
        corporation_name: '',
        corporation_phone: '',
        corporation_id_card: {},
        chairman_name: '',
        chairman_phone: '',
        chairman_id_card: {},
        contacts_name: '',
        contacts_phone: '',
        business_license: '',
        production_icense: '',
        circulative_license: ''
      },
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 邀请信息
      invite_agent_info: {},
    }
  },
  onLoad(options) {
    let _this = this;
    if(options.scene){
      console.log('转换前参数：',options.scene)
      let scene = _this.$util.getUrlParams(decodeURIComponent(options.scene));
      // console.log("接收参数",scene)
      this.apply_info.invite_agent_id = scene.agent_id || 0;
    }
    // 申请信息ID
    this.apply_id = options.apply_id || 0;
    // 判断：是否存在邀请人
    if(Number(_this.apply_info.invite_agent_id) <= 0 && Number(this.apply_id) <= 0){
      _this.$util.Tips({
        title: '非法访问，无邀请人！',
      },{tab:1,url:'/pages/user/index'});
    }
    // 判断：是否登录
    if (!_this.isLogin) {
      // 未登录  授权登录
      _this.isAuto = true;
      _this.isShowAuth = true
    }else{
      // 已登录  获取信息
      _this.init();
    }
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      if(Number(this.apply_id) > 0) this.getApplyInfo();
      this.getInviteAgentInfo()
    },
    //  获取邀请人信息
    getInviteAgentInfo(){
      let _this = this;
      getSingleAgentInfo(_this.apply_info.invite_agent_id).then(res => {
        if (res.status == 200) {
          let data = res.data || {};
          if(Number(data.id) <= 0){
            _this.$util.Tips({
              title: '非法访问，无有效邀请人！'
            },{tab:1,url:'/pages/user/index'});
            return false;
          }else{
            _this.invite_agent_info = data || {};
          }
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 图片上传 - 点击上传图片
    uploadPic(field) {
      let _this = this;
      _this.$util.uploadImageOne('upload/image', function(res) {
        if(res.status == 200){
          let data = res.data || {};
          let pics = data.path || '';
          if(field === 'corporation_id_card' || field === 'chairman_id_card'){
            pics = Object.values(_this.apply_info[field]);
            pics[Object.values(pics).length] = 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;
      supplierApplyJoin(_this.apply_info).then(res => {
        if (res.status == 200) {
          _this.$util.Tips({
            title: '操作成功！',
          },{
            tab: 5,
            url: '/pages/supplier/apply/record'
          });
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 查看申请记录
    applyRecord(){
      uni.navigateTo({
        url: `/pages/supplier/apply/record`
      })
    },
    // 获取申请信息
    getApplyInfo(){
      let _this = this;
      supplierApplyInfo({ apply_id: _this.apply_id }).then(res => {
        if (res.status == 200) {
          let data = res.data || {};
          _this.apply_info = data || {};
          _this.getInviteAgentInfo();
        }
      }).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: 2800rpx !important;
    }
    .form-main{
      position: absolute;
      top: 270rpx;
      left: 0;
      width: 100vw;
      padding: 60rpx 30rpx 30rpx 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%;
            }
          }
        }
      }
    }
  }

}
</style>
