<template>
  <h-view id="pay-entry" class="public-style">
    <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="entry-content">
      <div class="amount">
        <p>交易金额</p>
        <div>￥{{ money |currency }}</div>
      </div>
      <list-item :item-height="56" class="pay-way">
        <item :proportion="[7,1,1]" @click.native="isSelect('one')">
          <div slot="name"> <img src="@/assets/payment/alipay.png" alt="" class="icon1"> 支付宝</div>
          <section slot="content">
            <img v-show="select === 'one'" src="@/assets/payment/select.png" alt="">
            <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt="">
          </section>
        </item>
        <item :proportion="[7,1,1]" @click.native="isSelect('two')">
          <div slot="name"> <img src="@/assets/payment/wx.png" alt="" class="icon2"> 微信</div>
          <section slot="content">
            <img v-show="select === 'two'" src="@/assets/payment/select.png" alt="">
            <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt="">
          </section>
        </item>
        <item v-for="(item,index) in lists" :proportion="[7,1,1]" :key="index" @click.native="isSelect(`three${index}`)">
          <div slot="name" style="flex=3"> <img src="@/assets/payment/ly.png" alt="" class="icon"> {{ item.bank_full_name }}({{ selectLast(item) }})</div>
          <section slot="content">
            <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt="">
            <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt="">
          </section>
        </item>
        <!-- <item :proportion="[7,1,1]" @click.native="isSelect('four')">
          <div slot="name"> <img src="@/assets/payment/js.png" alt="" class="icon"> 中国建设银行</div>
          <section slot="content">
            <img v-show="select === 'four'" src="@/assets/payment/select.png" alt="">
            <img v-show="select !== 'four'" src="@/assets/payment/unselect.png" alt="">
          </section>
        </item> -->

      </list-item>
    </h-content>

    <bottom-tab>
      <tab-button class="footer" @click.native="pay">
        立即付款
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>

export default {
  name: 'PayEntry',
  components: {
  },
  data () {
    return {
      money: '',
      select: 'one',
      name: '',
      lists: [],
    }
  },
  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.name = from.name
      vm.getType()
    })
  },
  activated () {
    this.money = this.$route.params.money
  },
  methods: {
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    isSelect (way) {
      this.select = way
    },
    pay () {
      let vm = this
      setTimeout(() => {
        vm.hlsPopup.showSuccess('支付成功！')
      }, 1000)
    },
    getType () {
      let vm = this
      let url = process.env.basePath + 'payment_method_query'
      let param = {
        bp_id: window.sessionStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.lists = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang='less' >
#pay-entry {
  .h-header {
    background-color: #00469C;
    .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.61px;
        line-height: 24px;
      }
    }
  }
  .entry-content {
    .amount {
      height: 166px;
      background-color: #fff;
      padding-top: 55px;
      text-align: center;
      border-bottom: 1px solid #D9DBDF;

      p {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0;
      }

      div {
        font-family: PingFangSC-Semibold;
        font-size: 24px;
        color: #383F45;
        letter-spacing: 0.86px;
        font-weight: 700;
        margin-top: 10px;
      }
    }

    .pay-way {
      .hls-item {
        padding-left: 12px;
        .add-name {
          flex: 3;
          line-height: 56px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #656464;

          .icon1 {
            width: 34px;
            height: 34px;
            display: block;
            float: left;
            margin-top: 10px;
            margin-right: 5px;
          }
          .icon2 {
            width: 32px;
            display: block;
            float: left;
            margin-top: 12px;
            margin-right: 8px;
          }
          .icon {
            width: 30px;
            display: block;
            float: left;
            margin: 12px 8px 0 3px;
          }
        }

        .add-content {
          img{
            width: 21px;
          }
        }
      }

    }
  }

  .bottom-tab-button{
    background: #00469C;
    border-radius: 4px;
    color:white;
    height: 40px;
    margin: 4px 2% 0 2%;
  }
}
</style>