<template>
  <h-view id="approval" class="public-style" title="进件审批">
    <h-header :proportion="[5,1,1]" class="header">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/intoApproval/arrow.png" >
        <span>进件审批</span>
      </div>
    </h-header>
    <Tab @getTabNum="getTabNum" />
    <h-content class="content">
      <div v-show="tabNum==0">
        <list-item :item-height="44">
          <item>
            <div slot="name">业务经办</div>
            <input slot="content" v-model="baseInfo.bp_name_sp" readonly >
          </item>
          <item>
            <div slot="name">经销商</div>
            <input slot="content" v-model="baseInfo.spouse_phone" >
          </item>
        </list-item>
        <div class="userInfo">承租人信息</div>
        <list-item :item-height="44">
          <item>
            <div slot="name">姓名</div>
            <input slot="content" v-model="baseInfo.bp_name_sp" readonly >
          </item>
          <item>
            <div slot="name">证件号</div>
            <input slot="content" v-model="baseInfo.spouse_phone" readonly >
          </item>
          <item>
            <div slot="name">电话号码</div>
            <input slot="content" v-model="baseInfo.working_place_sp" readonly >
          </item>
          <item>
            <div slot="name">居住地址</div>
            <input slot="content" v-model="baseInfo.address_sp" readonly >
          </item>
          <item>
            <div slot="name">户籍地址</div>
            <input slot="content" v-model="baseInfo.working_place_sp" readonly >
          </item>
          <item>
            <div slot="name">学历</div>
            <input slot="content" v-model="baseInfo.address_sp" readonly >
          </item>
          <item>
            <div slot="name">婚姻状况</div>
            <input slot="content" v-model="baseInfo.address_sp" readonly >
          </item>
        </list-item>
        <div class="userInfo">配偶信息</div>
        <list-item :item-height="44">
          <item>
            <div slot="name">姓名</div>
            <input slot="content" v-model="baseInfo.bp_name_sp" readonly >
          </item>
          <item>
            <div slot="name">电话号码</div>
            <input slot="content" v-model="baseInfo.working_place_sp" readonly >
          </item>
          <item>
            <div slot="name">工作单位</div>
            <input slot="content" v-model="baseInfo.address_sp" readonly >
          </item>
          <item>
            <div slot="name">居住地址</div>
            <input slot="content" v-model="baseInfo.working_place_sp" readonly >
          </item>
        </list-item>
        <div class="userInfo">担保人信息</div>
        <list-item :item-height="76">
          <item>
            <div slot="name">
              <span class="name-box">1</span>
              <span class="name">担保人1姓名</span>
              <span class="card-num">证件号</span>
            </div>
            <div slot="content" class="right">
              <img src="@/assets/intoApproval/introduce.png" >
              <span>张天</span>
              <br >
              <span>42112029870928097</span>
            </div>
          </item>
          <item>
            <div slot="name">
              <span class="name-box">1</span>
              <span class="name">担保人1姓名</span>
              <span class="card-num">证件号</span>
            </div>
            <div slot="content" class="right">
              <img src="@/assets/intoApproval/introduce.png" >
              <span>张天</span>
              <br >
              <span>42112029870928097</span>
            </div>
          </item>
        </list-item>
        <div class="alert">
          <div class="alert-content">
            <div class="title">
              <img src="@/assets/intoApproval/info.png" >
              <span class="info-word">温馨提示</span>
            </div>
            <p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
            <div class="top-word">
              <p>本人保证所提供信息的真实性、完整性及准确性。</p>
              <p>本人在此授权徐工融资租赁有限公司通过中国人民银行个人信用信息基础数据库及其他征信机构、金融机构查询本人的个人信息、信用记录和工作情况。</p>
              <p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
            </div>
          </div>
        </div>
      </div>
      <RentInfo v-show="tabNum==1" />
      <AccessoryInfo v-show="tabNum==2"/>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="approve">
        <img src="@/assets/intoApproval/approve.png" >审批
      </tab-button>
    </bottom-tab>
  </h-view>
</template>
<script>
import Tab from '@/pages/intoApproval/intoApproval/tab'
import RentInfo from '@/pages/intoApproval/intoApproval/rentInfo'
import AccessoryInfo from '@/pages/intoApproval/intoApproval/accessory'
export default {
  components: {
    Tab,
    RentInfo,
    AccessoryInfo,
  },
  data () {
    return {
      tabNum: 0,
      baseInfo: {},
    }
  },
  methods: {
    getTabNum (i) {
      this.tabNum = i
    },
  },
}
</script>
<style lang="less" scoped type="text/less">
#approval {
  font-family: PingFangSC-Regular;
  input::placeholder {
    color: #b4b4b5;
  }
  .header {
    background-color: #00469c;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
      }
    }
  }
  .content {
    .userInfo {
      height: 45px;
      line-height: 45px;
      color: #00469c;
      margin-top: -10px;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 12px;
    }
    .name-box {
      display: inline-block;
      text-align: center;
      line-height: 16px;
      color: #00469c;
      width: 16px;
      height: 16px;
      background: #cddbec;
      border-radius: 4px;
    }
    .name {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      margin-left: 10px;
    }
    .card-num {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #383f45;
      letter-spacing: 0;
      display: block;
      margin-left: 31px;
      margin-top: 7px;
    }
    .right {
      position: relative;
    }
    .right span {
      float: right;
      margin-right: 48px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(56, 63, 69, 0.6);
      letter-spacing: 0;
      line-height: 18px;
    }
    .right span:last-child {
      margin-top: 7px;
    }
    .right img {
      position: absolute;
      top: 30%;
      left: 80%;
      width: 14px;
      height: 16px;
    }
    .alert {
      height: 219px;
      width: 100%;
      background: rgba(252, 200, 0, 0.16);
    }
    .alert-content {
      width: 334px;
      margin: 0 auto;
      padding-top: 16px;
    }
    .info-word {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #fcc800;
      letter-spacing: 0.5px;
      margin-left: 8px;
    }
    .title {
      display: flex;
      align-items: center;
    }
    .top-info {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #656464;
      letter-spacing: 0.37px;
      margin-top: 7px;
      line-height: 15px;
    }
    .top-word {
      p {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #656464;
        letter-spacing: 0.37px;
        margin-top: 7px;
        line-height: 15px;
        text-indent: 16px;
        position: relative;
      }
      p::before {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        left: 0px;
        width: 4px;
        height: 4px;
        border-radius: 20px;
        background-color: #fcc800;
      }
    }
    .alert img {
      width: 18px;
      height: 18px;
    }
  }
  .footer-button {
    padding-top: 10px;
    padding-bottom: 41px;
    height: 88px;
    .approve {
      width: 358.6px;
      height: 44px;
      background: #00469c;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      line-height: 20px;
      letter-spacing: 10px;
      img {
        width: 16.8px;
        height: 16.8px;
      }
    }
  }
}
</style>
