/**
* @Author think
* @Date 2019-06-12 16:35
*/

<template>
  <h-view class="public-style calculatEnter" title="融资试算">
    <!--<h-header :has-border="false" class="bar-custom">
      <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 :item-height="96">
        <item v-for="(list,index) in proList" :key="index" :has-border="false" @click.native="goNext(list)">
          <div class="finaning-contents">
            <div class="contents-info">
              <div class="contents-info-type">\{{ list.product_name_write }}</div>
              <div class="contents-info-description">\{{ list.special_note }}</div>
              <div class="contents-info-time">租期:\{{ list.times_from }}期</div>
            </div>
            <div class="next-icon">
              <div class="next-icon-img">
                <img src="@/assets/image/finaning/nextIcon@2x.png">
              </div>
            </div>
          </div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>

<script>
  import calService from './calculateService'

  export default {
    name: 'CalculationEnter',
    data () {
      return {
        proList: [],
      }
    },
    mounted: function () {
      calService.cleanCalc()
      this.initLoad()
    },
    methods: {
      initLoad () {
        let vm = this
        let url = $config.basePath + 'product_main' // 产品方案查询
        let param = {}
        vm.hlsPopup.showLoading('请稍候')
        vm.hlsHttp.post(url, param).then(function (res) {
          if (res.result === 'S') {
            vm.proList = res.product_main
            vm.hlsPopup.hideLoading()
          }
        })
      },

      goNext (list) {
        list.annual_pay_times_n = '月' // 还款频率
        list.annual_pay_times = 12 // 还款频率
        list.lease_charge = 0 // 手续费
        list.insurance_price = 0 // 保险费
        list.gps_amount = 0 // GPS费
        list.travel_tax = 0 // 车船税
        list.purchase_tax = 0 // 购置税
        calService.setCalc(list)
        this.$router.push({
          name: 'CalculationMain',
        })
      },
    },
  }
</script>

<style scoped lang="less">
  .calculatEnter {
    .content {
      background-color: rgb(247, 247, 247);
      .hls-list-item {
        background-color: rgb(247, 247, 248);
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .hls-item {
          margin-top: 10px;
          border-radius: 10px;
          width: 95%;
          padding: 0;
          height: 96px;
          border-bottom: 1px solid #ccc; /*no*/
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          &.activated {
            opacity: 0.9;
            -webkit-transform: scale(0.95);
            transform: scale(0.95)
          }
          .finaning-contents {
            height: 100%;
            width: 100%;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .contents-info {
              height: 100%;
              width: 90%;
              padding-top: 5px;
              padding-bottom: 5px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              .contents-info-type {
                color: rgb(85, 107, 120);
                font-size: 15px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .contents-info-description {
                width: 100%;
                line-height: 15px;
                color: rgb(153, 175, 198);
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .contents-info-time {
                color: rgb(153, 175, 198);
                font-size: 14px;
              }
            }
            .next-icon {
              padding-right: 5px;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              .next-icon-img {
                width: 28px;
                height: 28px;
                img {
                  width: 28px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
