<!--
 * @Author: your name
 * @Date: 2019-09-29 10:02:11
 * @LastEditTime : 2019-12-27 10:28:37
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 -->
<template>
  <h-view id="my-contract">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>我的合同</span>
      </div>
    </h-header>
    <h-content class="my-contractlist">
      <div v-if="['AGENT', 'OFFICE'].includes(user_bp_type)" class="contract-item" @click="goCreate()">
        <img src="@/assets/myInfo/contractCreate.png" >
        <span>融租方案创建</span>
      </div>
      <div v-if="user_bp_type !== 'MANAGER'" class="contract-item" @click="goSign()">
        <p v-if="signCount > 0" :class="{'content-wrap-class-width':signCount > 99, 'content-wrap-class':signCount < 99}">{{ signCount > 99 ? '99+' : signCount }}</p>
        <img src="@/assets/myInfo/unSign.png" >
        <span>融租方案确认</span>
      </div>
      <div v-if="['GUTA', 'TENANT', 'AGENT'].includes(user_bp_type)" class="contract-item" @click="goCarConfirm()">
        <p v-if="carCount > 0" :class="{'content-wrap-class-width':carCount > 99, 'content-wrap-class':carCount < 99}">{{ carCount > 99 ? '99+' : carCount }}</p>
        <img src="@/assets/myInfo/carConfirm.png" >
        <span>合同签订</span>
      </div>

      <div v-if="user_bp_type == 'GUTA'" class="contract-item" @click="changeContract('GUTA')">
        <img src="@/assets/myInfo/under.png" >
        <span>我担保的合同</span>
      </div>
      <div v-if="['AGENT', 'OFFICE', 'MANAGER'].includes(user_bp_type)" class="contract-item" @click="goContract()">
        <img src="@/assets/myInfo/agent.png" >
        <span>我办理的合同</span>
      </div>
    </h-content>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      currentVersion: process.env.currentVersion,
      multipleRole: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_type,
      bp_id: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id,
      user_bp_type: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_type ,
      signCount: '0',
      carNum: '0',
      faceSign: '0',
      prjSubmit: '0',
      confirmCount: '0',
      productCount: '0',
      carCount: '0',
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // vm.multipleRole = window.localStorage.getItem('multipleRole')
      // vm.bp_id = window.localStorage.getItem('bp_id')
      // vm.user_bp_type = window.localStorage.getItem('bp_type')
      vm.numQuery()
    })
    next()
  },
  methods: {
    numQuery () {
      let vm = this
      let url = $config.basePath + 'number_display_query'
      let param = {
        bp_id:  this.bp_id,
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          if ('info' in res) {
            vm.signCount = res.info.con_confirm_num || 0 // 待确认数量	数字	必输	待确认数量
            vm.productCount = res.info.collect_num || 0 //  产品收藏数量	数字	必输	产品收藏数量
            vm.carCount = res.info.car_confirm_num || 0 //  发车待确认数量	数字	必输	发车待确认数量
            vm.faceSign	= res.info.face_sign_num	 || 0 //  待面签数量	数字	必要	待面签数量
            vm.prjSubmit = res.info.prj_submit_num || 0 //  待提交合同数量	数字	必要
          }
        } else {
          this.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goSign () {
      if (this.bp_id) {
        // if (this.user_bp_type === 'AGENT') {
        //   this.$router.push({
        //     name: 'ContractList',
        //   })
        // } else {
        this.$router.push({
          name: 'ContractSigning',
          params: {
            user_bp_type: this.user_bp_type,
          },
        })
        // }
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 进入合同签订
    goCarConfirm () {
      if (this.bp_id) {
        this.$router.push({
          name: 'ConfirmList',
        })
      } else {
        hlsPopup.showLongCenter('请先进行用户绑定')
      }
    },
    // 融租申请创建
    goCreate () {
      this.$router.push({
        name: 'ContractCreateList',
        params: {
          user_bp_type: this.user_bp_type,
        },
      })
    },
    // 进入
    changeContract (e) {
      this.$router.push({
        name: 'ContractRecords',
        params: {
          bp_type: e,
        },
      })
    },
    goContract () {
      this.changeContract(this.user_bp_type)
    },
  },
}
</script>

<style lang="less" type="text/less">
#my-contract{
  .my-contractlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    background: #fafafa;
    width: 100vw;
    height: 100vh;
    padding-top: 20px;
    .contract-item {
      width: 46vw;
      margin: 2vw;
      height: 60px;
      padding: 10px;
      vertical-align: middle;
      background: white;
      border-radius: 10px;
      position: relative;
      img {
        vertical-align: middle;
        height: 40px;
        width: 40px;
      }
      span {
        text-indent: 20px;
        display: inline-block;
        font-family: PingFangSC-Regular;
        font-size: 14px;
      }
      .content-wrap-class {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 10px;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        background-color: red;
        color: #fff;
        border-radius: 50%;
      }
      .content-wrap-class-width {
        position: absolute;
        top: 5px;
        left: 5px;
        font-size: 10px;
        width: 24px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        background-color: red;
        color: #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
