<template>
  <h-view id="home" class="public-style" title="合同签署">
    <!--    <h-header>
      <div slot="left" class="h-header-btn" @click="$hlsExit()">
        <i class="ion-ios-arrow-back"/>
      </div>
      <div slot="center">合同列表</div>
    </h-header>-->
    <h-content>
      <list-item v-for="(item,index) in conList" :item-height="90" :key="index">
        <item :has-border="false" :show-arrow="true" :proportion="[0,9]" @click.native="goPerson(index)">
          <div slot="left-icon" class="left"/>
          <section slot="content" class="content">
            <section class="line">
              <section class="name">经销商</section>
              <section class="value">\{{ item.bpAgent }}</section>
            </section>
            <section class="line">
              <section class="name">合同号</section>
              <section class="value">\{{ item.conNum }}</section>
            </section>
            <section class="line">
              <section class="name">车架号</section>
              <section class="value">\{{ item.vin }}</section>
            </section>
          </section>
        </item>
        <item :proportion="[3,1]" :item-height="40" style="padding: 0 0 0 .3rem">
          <section slot="name">\{{ item.bpName }}+\{{ item.bpAgent }}</section>
          <section slot="content" style="color: #5D98F6" @click="previewPdf()">合同预览</section>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>

/**
   * 金格电子签章 演示使用，不进行实际接口调用
   * 此演示做了大致流程，
   * 1.实名认证（银行卡四要素验证/人脸验证）此处使用银行卡
   * 2.个人开户
   * 3.签章
   */
export default {
  data () {
    return {
      conList: [{
        bpAgent: '雷厉风行租赁有限公司',
        conNum: 'CON2019000070001',
        vin: 'ER45GTF8HU86RDLPIN',
        bpName: '李达',
      }, {
        bpAgent: '盛州汽车销售有限公司',
        conNum: 'CON2019000070012',
        vin: 'GHTY67R4DF2EG5RY7',
        bpName: '李锂',
      }, {
        bpAgent: '上海汉得融资租赁有限公司',
        conNum: 'CON2019000060024',
        vin: 'SDFVY453ER4325TRKLUK',
        bpName: '张裕',
      }, {
        bpAgent: '智慧租赁有限公司',
        conNum: 'CON2018000050013',
        vin: 'AS785TGHFR43ED5RW',
        bpName: '张弛',
      }, {
        bpAgent: '品德百盛汽车贸易公司',
        conNum: 'CON2019000100047',
        vin: 'WIN6TF4RDE5W3FLM9',
        bpName: '李亮',
      }],
    }
  },
  activated: function () {
    // 海马汇桥接获取个人信息
    hmapLogin('local').then(res => {

    })
  },
  updated: function () {

  },
  methods: {
    previewPdf () {
      window.open('http://hlsapp.hand-china.com/file/jinge/RZZLCON.pdf', '_system')
    },
    goPerson (index) {
      let vm = this
      this.$router.push({
        name: 'BankVerified',
        params: {
          item: vm.conList[index],
        },
      })
    },
  },
}
</script>
<style lang="less" type="text/less">
  @import "../../../styles/vue-1px.less";

  #home {
    .content {
      .hls-list-item {
        .hls-item {
          padding: 0;

          .content {
            background-color: #fff;

            &:after {
              .setBottomLine()
            }
          }
        }

        .left {
          width: .1rem;
          height: 0.6rem;
          background-color: #596F9D;
          margin-right: .2rem;
        }

        .line {
          display: flex;
          width: 100%;
          height: 30px;
          font-size: 14px;
          line-height: 30px;

          .name {
            color: #666;
            margin-right: 15px;
          }

          .value {
            color: #555B70;
          }
        }
      }
    }
  }

  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #home {
      }
    }
  }

  // iPhoneX Max适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      .platform-ios {
        #home {
        }
      }
    }
  }
</style>
