<template>
  <div id="bank-card">
    <div class="info">
      <div class="info-icon">
        <img src="@/assets/userBind/info.png" >
        <span>温馨提示</span>
      </div>
      <p>推荐使用农行卡,农行卡支付免收手续费!</p>
    </div>
    <div class="my-card">
      <div class="top">
        <div class="left">
          <img src="@/assets/userBind/bankIcon.png" class="icon" >
          <span class="top-word">
            我的卡
            <span class="sum">(共{{ getBankList.length }}张)</span>
          </span>
        </div>
        <img src="@/assets/userBind/add.png" class="icon-right" @click="sendFlag(true)" >
      </div>
      <div class="clear" />
      <div class="card-content">
        <ul>
          <li v-for="(item,index) in getBankList" :key="index" >
            <item-option class="slider">
              <div
                :style="'background-image: url('+ changeBgImg (item) +')'"
                class="my-bank-card"
                @click="sendList(item)"
              >
                <div class="card-info">
                  <span class="name">{{ item.bank_full_name }}</span>
                  <span class="card-type">{{ item.bank_card_type }}</span>
                  <span class="number">卡号</span>
                  <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
                </div>
              </div>
              <div slot="buttons" class="button">
                <option-button text @click.native="deleteFun(item.bank_account_num)" />
              </div>
            </item-option>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import backImg1 from '@/assets/userBind/nong.png'
import backImg2 from '@/assets/userBind/unNong.png'
export default {
  props: {
    'getBankList': {
      default: [],
      type: Array,
    },
    'from': {
      default: null,
      type: Boolean,
    },
  },
  data () {
    return {
      backImg: null,
      showModalValue: true,
    }
  },
  methods: {
    sendFlag (isClear) {
      this.showModalValue = true
      this.$emit('getInfo', this.showModalValue, isClear)
    },
    sendList (a) {
      this.$emit('getList', a)
      this.sendFlag(false)
    },
    changeBgImg (item) {
      if (item.bank_full_name.indexOf('农业银行') !== -1) {
        return backImg1
      } else {
        return backImg2
      }
    },
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    deleteFun (e) {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认删除吗?',
        onConfirm: data => {
          if (data === 1) {
            let index = this.getBankList.findIndex(item => {
              if (item.bank_account_num === e) {
                return true
              }
            })
            this.getBankList.splice(index, 1)
            let vm = this
            let url = process.env.basePath + 'bp_bank_delete'
            let param = {
              'master': {
                'bp_id': this.from ? this.$route.params.bp_id : window.localStorage.getItem('user_id'),
                'bank_account_num': e,
              },
            }
            vm.hlsPopup.showLoading('请稍候')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                vm.hlsPopup.showSuccess('删除成功')
              } else {
                vm.hlsPopup.showLongCenter(res.message)
              }
            })
          }
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
  #bank-card {
      .info {
        height: 70px;
        background-color: rgba(142, 195, 30, 0.1);
        .info-icon {
          height: 20px;
          padding-top: 20px;
          display: flex;
          align-items: center;
          img {
            width: 15.8px;
            height: 15.8px;
            margin-left: 17.1px;
          }
          span {
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            color: #8ec31e;
            margin-left: 9px;
            letter-spacing: 0.5px;
            line-height: 20px;
          }
        }
        p {
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #656464;
          width: 310px;
          margin-left: 42px;
          letter-spacing: 0.4px;
          line-height: 18px;
          margin-top: 8px;
        }
      }
      .my-card {
        .top {
          width: 320px;
          margin: 0 auto;
          margin-top: 13px;
          .left {
            height: 32px;
            display: flex;
            align-items: center;
            float: left;
            .icon {
              width: 18px;
              height: 20px;
              margin-right: 4px;
            }
            .top-word {
              font-family: PingFangSC-Semibold;
              font-size: 15px;
              color: @headerColor;
              letter-spacing: 0.46px;
              .sum {
                font-family: PingFangSC-Semibold;
                font-size: 15px;
                color: #4d5d6c;
                letter-spacing: 0.46px;
              }
            }
          }
          .icon-right {
            width: 34px;
            height: 34px;
            float: right;
          }
        }
        .clear {
          clear: both;
        }
        .card-content {
          width: 350px;
          padding-left: 28px;
          overflow: hidden;
          margin-top: 16px;
          li {
            margin-bottom: 10px;
            .slider {
              height: 100%;
              margin-left: -14px;
            }
          }
          .my-bank-card {
            width: 320px;
            height: 190px;
            box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
            border-radius: 6px;
            background-size: 370px 240px;
            background-position: -20px;
            .card-info {
              font-family: PingFangSC-Medium;
              color: #ffffff;
              margin-left: 18px;
              padding-top: 15px;
              .name,
              .card-type {
                font-size: 16px;
                letter-spacing: 5.5px;
                line-height: 24px;
              }
              .card-type {
                display: block;
                margin-top: 9px;
              }
              .number {
                font-size: 12px;
                letter-spacing: 0;
                line-height: 16px;
                margin-top: 33px;
                display: block;
                margin-top: 33px;
              }
              .card-number {
                display: block;
                font-family: Avenir-Heavy;
                font-size: 16px;
                color: #ffffff;
                letter-spacing: 6px;
                line-height: 24px;
              }
            }
          }
        }
      }
      .swipeout-list .item .function {
        left: 330px;
        border-radius: 6px;
        width: 54px;
        height: 190px;
        background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8
        no-repeat;
        background-size: 20px 20px;
      }
    }
</style>