<template>
	<view class="main-content">
    <!--顶部内容-->
    <view class="top">
      <image class="top-image" :src="contract_bg" mode="widthFix"></image>
      <view class="top-title">线上签约合同</view>
    </view>
    <!--主要内容-->
    <view class="contract-content">
      <image class="tips-icon" :src="Number(info.binding_status) === 1 ? contract_yes : contract_no" mode="widthFix"></image>
      <view class="tips">温馨提示</view>
      <view class="sub-tips">
        <text v-if="Number(info.binding_status) === 0">您还未授权，请先授权！</text>
        <text v-else-if="Number(info.sign_status) === 0">您还未签署电子合同,请尽快前往签约！</text>
        <text v-else-if="Number(info.binding_status) === 1 && Number(info.sign_status) === 1">您已签署电子合同，可点击下载合同！</text>
        <text v-else-if="Number(info.sign_status) === 2">您已拒绝签署合同！</text>
      </view>
      <view class="operation-btn" v-if="Number(info.binding_status) === 0" @click="goToAuth">去授权</view>
      <view class="operation-btn" v-else-if="Number(info.sign_status) === 0" @click="getSignInfo">去签约</view>
      <view class="operation-btn" v-else-if="Number(info.binding_status) === 1 && Number(info.sign_status) === 1" @click="getSignInfo">查看合同</view>
      <view class="operation-btn" v-else-if="Number(info.sign_status) === 2" @click="againSign">重新签约</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 { HTTP_REQUEST_URL } from '@/config/app';
import { contractAuthInfo,contractSignInfo,contractAgainSign } from "@/api/agent";

export default {
  name: 'business',
  components: {
    authorize
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 图标
      contract_bg: '',
      contract_no: '',
      contract_yes: '',
      // 签约信息
      role_id: '',
      role_type: '',
      info: {},
    }
  },
  onReady() {
    this.contract_bg = `${HTTP_REQUEST_URL}/static/images/icon/contract_bg.png`;
    this.contract_no = `${HTTP_REQUEST_URL}/static/images/icon/contract_no.png`;
    this.contract_yes = `${HTTP_REQUEST_URL}/static/images/icon/contract_yes.png`;
  },
  onLoad(options) {
    this.role_id = options.role_id || 0;
    this.role_type = options.role_type || 0;
    console.log("接收的所有参数", options)
    // 判断：是否登录
    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 () {
      this.getAuthInfo();
    },
    // 授权流程 - 获取授权信息
    getAuthInfo(){
      let _this = this;
      let params = {
        role_type: _this.role_type,
        role_id: _this.role_id
      };
      contractAuthInfo(params).then(res => {
        if(Number(res.status) === 200){
          let data = res.data || {};
          _this.info = data || {};
        }else{
          _this.$util.Tips({title: res.msg});
        }
      }).catch(err => {
        _this.$util.Tips({title: err});
      });
    },
    // 授权流程 - 去授权
    goToAuth(){
      // 存在个人授权链接  跳转并且进行签约
      let authUrl = this.info.authUrl || '';
      if(authUrl){
        uni.navigateTo({
          url: '/pages/webview/webview?url=' + encodeURIComponent(authUrl)
        })
      }
    },
    // 签署流程 - 获取签署信息
    getSignInfo(){
      let _this = this;
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      contractSignInfo({ id: _this.info.id }).then(res => {
        uni.hideLoading();
        if(Number(res.status) === 200){
          let data = res.data || {};
          if(data.actorSignTaskEmbedUrl){
            uni.navigateTo({
              url: '/pages/webview/webview?url=' + encodeURIComponent(data.actorSignTaskEmbedUrl)
            })
          }
        }else{
          _this.$util.Tips({title: res.msg});
        }
      }).catch(err => {
        uni.hideLoading();
        _this.$util.Tips({title: err});
      });
    },
    // 重新签约
    againSign(){
      let _this = this;
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      contractAgainSign({ id: _this.info.id }).then(res => {
        uni.hideLoading();
        if(Number(res.status) === 200){
          let data = res.data || {};
          if(data.actorSignTaskEmbedUrl){
            uni.navigateTo({
              url: '/pages/webview/webview?url=' + encodeURIComponent(data.actorSignTaskEmbedUrl)
            })
          }
        }else{
          _this.$util.Tips({title: res.msg});
        }
      }).catch(err => {
        uni.hideLoading();
        _this.$util.Tips({title: err});
      });
    }


  }
}
</script>

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

  .top{
    width: 100vw;
    position: relative;

    .top-image{
      width: 100vw!important;
    }
    .top-title{
      position: absolute;
      top: 0;
      left: 0;
      height: 230rpx;
      line-height: 230rpx;
      padding-left: 50rpx;
      font-size: 41rpx;
      font-weight: bold;
      color: #eb0000;
    }
  }

  .contract-content{
    width: 100vw;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 230rpx;
    z-index: 10;
    background: #ffffff;
    padding-top: 50rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;

    .tips-icon{
      width: 50rpx!important;
    }
    .tips{
      height: 70rpx;
      line-height: 70rpx;
      font-size: 32rpx;
      font-weight: bold;
    }
    .sub-tips{
      height: 50rpx;
      line-height: 50rpx;
      font-size: 28rpx;
      color: #6a6a6a;
    }
    .operation-btn{
      margin-top: 50rpx;
      width: 80%;
      border-radius: 100rpx;
      text-align: center;
      height: 90rpx;
      line-height: 90rpx;
      background-color: #d60000;
      color: #ffffff;
    }
  }
}
</style>
