/**
* @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:#F7F7F8;
      .hls-list-item {
        background-color:#F7F7F8;
        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: 93%;
            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: #556B78;
                font-size: 15px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .contents-info-description{
                width: 100%;
                line-height: 15px;
                color: #99AFC6;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .contents-info-time{
                color: #99AFC6;
                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>
