<template>
  <h-view id="pay-entry-margin" class="public-style">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <p>提示</p>
          <span>您好，当前余额不足，请重新支付！</span>
          <button @click="downNum=false">确定</button>
        </div>
      </div>
    </transition>
    <transition name="trans">
      <div v-show="show" class="modal-show-bank">
        <div class="down">
          <div class="top">
            <img src="@/assets/payment/back.png" @click="show=false" >
            <span>支付方式</span>
          </div>
          <scroll>
            <list-item :item-height="56" class="pay-way">
              <item
                v-for="(item,index) in nongBank"
                :proportion="[7,1,1]"
                :key="item.bank_account_num"
                @click.native="isSelect(`nong${index}`);ischeck(item)"
              >
                <div slot="name" style="flex=3">
                  <img :src="selectImg(item)" alt class="icon" >
                  {{ item.bank_full_name }}({{ selectLast(item) }})
                  <img
                    v-show="item.recommand"
                    class="push"
                    src="@/assets/payment/push.png"
                  >
                </div>
                <section slot="content">
                  <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt >
                  <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt >
                </section>
              </item>
              <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('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');ischeck('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 newList"
                :proportion="[7,1,1]"
                :key="index"
                @click.native="isSelect(`three${index}`);ischeck(item)"
              >
                <div slot="name" style="flex=3">
                  <img :src="selectImg(item)" alt class="icon" >
                  {{ item.bank_full_name }}({{ selectLast(item) }})
                  <img
                    v-show="item.recommand"
                    class="push"
                    src="@/assets/payment/push.png"
                  >
                </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>
            </list-item>
          </scroll>
        </div>
      </div>
    </transition>
    <transition name="trans">
      <div v-show="confirm" class="modal-show-confirm">
        <div class="down">
          <div class="top">
            <img src="@/assets/payment/back.png" @click="confirm=false" >
            <span>确认付款</span>
          </div>
          <div class="info">
            <div class="info-item">
              <span>还款金额</span>
              <span>¥{{ money |currency }}</span>
            </div>
            <div class="interest">
              <span>本次交易收取{{ rate }}%手续费</span>
            </div>
            <div class="info-item">
              <span>手续费</span>
              <span>+¥{{ serviceCharge |currency }}</span>
            </div>
            <div class="info-item" @click="show=true">
              <span>付款方式</span>
              <span>
                <img :src="checkType.img" >
                <span>{{ checkType.bank_full_name }}</span>
                <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
                <img class="arrow" src="@/assets/payment/go.png" >
              </span>
            </div>
          </div>
          <bottom-tab>
            <tab-button class="foot" @click.native="pay">立即支付</tab-button>
          </bottom-tab>
        </div>
      </div>
    </transition>
    <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>{{ userName }}</p>
        <div>￥{{ sumMoney |currency }}</div>
      </div>
      <div class="info">
        <div class="info-item">
          <span>还款金额</span>
          <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span>
        </div>
        <div class="interest">
          <span>本次交易收取{{ rate }}%手续费</span>
        </div>
        <div class="info-item">
          <span>手续费</span>
          <span>+¥{{ serviceCharge }}</span>
        </div>
        <div class="info-item" @click="show=true">
          <span>付款方式</span>
          <span>
            <img :src="checkType.img" >
            <span>{{ checkType.bank_full_name }}</span>
            <span v-if="sectctNong">({{ selectLast(checkType) }})</span>
            <img class="arrow" src="@/assets/payment/go.png" >
          </span>
        </div>
      </div>
    </h-content>
    <bottom-tab>
      <tab-button class="foot" @click.native="affirm">确认支付</tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import js from '@/assets/payment/js.png'
import ny from '@/assets/payment/ly.png'
import pf from '@/assets/payment/pf.png'
import gd from '@/assets/payment/gd.png'
import gf from '@/assets/payment/gf.png'
import jt from '@/assets/payment/jt.png'
import gs from '@/assets/payment/gs.png'
import ms from '@/assets/payment/ms.png'
import pa from '@/assets/payment/pa.png'
import xy from '@/assets/payment/xy.png'
import yzcx from '@/assets/payment/yzcx.png'
import zg from '@/assets/payment/zg.png'
import zs from '@/assets/payment/zs.png'
import zx from '@/assets/payment/zx.png'
import bank from '@/assets/payment/bank.png'
export default {
  name: 'PayEntry',
  components: {},
  data () {
    return {
      money: '',
      select: 'three0',
      name: '',
      downNum: false,
      recommand: false,
      flag: false, // 用于判断是否有农业银行卡
      lists: [],
      nongBank: [], // 存农行卡
    }
  },
  computed: {
    newList () {
      let vm = this
      vm.nongBank = []
      vm.lists.forEach((item, i) => {
        if (item.bank_full_name.indexOf('农业') !== -1) {
          vm.nongBank.push(vm.lists[i])
          vm.flag = true
        }
      })
      let notNong = vm.lists.filter(i => {
        return (i.bank_full_name.indexOf('农业') === -1)
      })
      if (vm.flag) {
        vm.select = 'nong0'
      } else {
        vm.select = 'one'
      }
      return notNong
    },
  },
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.name = from.name
      vm.getType()
      vm.nongBank = []
    })
  },

  activated () {
    this.money = this.$route.params.money
  },
  methods: {
    selectImg (e) {
      if (e.bank_full_name.indexOf('建设') !== -1) {
        return js
      } else if (e.bank_full_name.indexOf('农业') !== -1) {
        e.recommand = true
        return ny
      } else if (e.bank_full_name.indexOf('光大') !== -1) {
        return gd
      } else if (e.bank_full_name.indexOf('广发') !== -1) {
        return gf
      } else if (e.bank_full_name.indexOf('浦') !== -1) {
        return pf
      } else if (e.bank_full_name.indexOf('工商') !== -1) {
        return gs
      } else if (e.bank_full_name.indexOf('交通') !== -1) {
        return jt
      } else if (e.bank_full_name.indexOf('民生') !== -1) {
        return ms
      } else if (e.bank_full_name.indexOf('平安') !== -1) {
        return pa
      } else if (e.bank_full_name.indexOf('兴业') !== -1) {
        return xy
      } else if (e.bank_full_name.indexOf('邮') !== -1) {
        return yzcx
      } else if (e.bank_full_name.indexOf('中国') !== -1) {
        return zg
      } else if (e.bank_full_name.indexOf('招商') !== -1) {
        return zs
      } else if (e.bank_full_name.indexOf('中信') !== -1) {
        return zx
      } else {
        return bank
      }
    },
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    isSelect (way) {
      this.select = way
    },
    pay () {
      let vm = this
      hlsPopup.showLoading('请稍候')
      setTimeout(() => {
        vm.hlsPopup.hideLoading()
        if (vm.money === 0) {
          vm.downNum = true
        } else {
          vm.changePage()
        }
      }, 2000)
    },
    changePage () {
      this.$router.push({
        name: 'Success',
        params: {
          userName: this.userName,
          money: this.$route.params.money,
        },
      })
    },

    getType () {
      let vm = this
      let url = process.env.basePath + 'payment_method_query'
      let param = {
        bp_id: window.localStorage.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-margin {
 .vue-better-scroll__wrapper{
    padding: 0;
  }
  .trans-enter-active,
  .trans-leave-active {
    transition: opacity 0.5s;
  }
  .trans-enter,
  .trans-leave-active {
    opacity: 0;
  }
  .modal-show-confirm {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      height: 466px;
      width: 100%;
     position: relative;
      top:18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        width: 330px;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: #fff;
        img {
          width: 20px;
        }
        span {
          margin-left: 38%;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #656464;
          letter-spacing: 0.49px;
          text-align: center;
        }
      }
      .info {
        //margin-top: 60px;
      }
    }
  }
  .modal-show-bank {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 910;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      height: 466px;
      width: 100%;
     position: relative;
      top:18%;
      background: #fff;
      border-radius: 12px 12px 0 0;
      overflow: scroll;
      display: flex;
      align-items: center;
      flex-direction: column;
      .top {
        left: 24px;
        width: 330px;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: #fff;
        img {
          width: 20px;
        }
        span {
          margin-left: 38%;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #656464;
          letter-spacing: 0.49px;
          text-align: center;
        }
      }
      .pay-way {
        //width: 350px;
        //margin: 0 auto;
        width: 100%;
       padding: 0 4% 0 4%;
        background: #fff;
        .hls-item {
          padding-left: 12px;
          .add-name {
            flex: 3;
            line-height: 56px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #656464;
            div{
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .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;
              position: relative;*/
              margin: 0 8px 0 3px;
            }
          }

          .add-content {
            img {
              width: 21px;
            }
          }
        }
      }
    }
  }
  .info {
    width: 100%;
    height: 226px;
    background-color: #fff;
    .info-item {
      height: 46px;
      width: 335px;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .arrow {
        margin-right: -10px;
      }
      img {
        width: 17px;
        margin-right: 10px;
      }
      span:first-child {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0;
        line-height: 18px;
      }
      span:last-child {
        font-family: Verdana;
        font-size: 14px;
        color: #383f45;
        letter-spacing: 0;
        line-height: 18px;
        display: flex;
        align-items: center;
      }
    }
    .info-item:nth-of-type(1)::after {
      content: "";
      display: block;
      position: absolute;
      right: 20px;
      top: 25px;
      border: 10px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: rgba(75, 74, 75, 0.1);
    }
    .info-item:nth-of-type(1) {
      border-top: 1px solid #d9dbdf;
    }
    .interest {
      width: 100%;
      height: 37px;
      line-height: 37px;
      font-family: PingFangSC-Medium;
      font-size: 11px;
      color: #4b4a4b;
      letter-spacing: 0;
      text-indent: 215px;
      background-color: rgba(75, 74, 75, 0.1);
    }
  }
  .push {
   /* position: absolute;
    top: 10px;
    margin-left: 10px;*/
    width: 35px;
  }
  .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .down {
      position: relative;
      width: 301px;
      height: 162px;
      display: flex;
      justify-content: center;
      flex-flow: column wrap;
      align-items: center;
      background-size: 301px 24.7px;
      background-color: #fff;
      border-radius: 8px;
      p {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #1d3fff;
        margin-top: 16px;
        flex: 2;
      }
      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        flex: 3;
        letter-spacing: 0;
        margin-top: 16px;
      }
      button {
        width: 159px;
        flex: 2;
        margin-bottom: 16px;
        height: 40px;
        background-color: @headerColor;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #fafafa;
        line-height: 20px;
      }
    }
  }
  .entry-content {
    .amount {
      height: 166px;
      background-color: #fff;
      padding-top: 55px;
      text-align: center;
      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;
          }
        }

        .add-content {
          img {
            width: 21px;
          }
        }
      }
    }
  }
  .foot {
    color: #fff;
    background-color: @headerColor;
  }
}
</style>
