<template>
  <h-view id="np-bank-card">
    <h-content>
      <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>
          </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="showModalInfo(item)"
                  >
                    <div class="card-info">
                      <span class="name">{{ item.bank_full_name }}</span>
                      <span class="card-type">{{ selectType(item.bank_card_type) }}</span>
                      <span class="number">卡号</span>
                      <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
                    </div>
                  </div>
                </item-option>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </h-content>
    <h-modal ref="modal" v-model="showModalValue" position="bottom">
      <h-view>
        <div class="modal-content">
          <div class="modal-content-add-top">
            <span>银行卡信息</span>
            <img src="@/assets/userBind/close.png" @click="hideModal" >
          </div>
          <list-item :item-height="44" class="card-Info">
            <item>
              <div slot="name">银行卡卡号</div>
              <input
                slot="content"
                v-model="bank.bank_account_num"
                readonly
                placeholder=""
              >
            </item>
            <item>
              <div slot="name">账户姓名</div>
              <input slot="content" v-model="bank.bank_account_name" readonly placeholder="" >
            </item>
            <item>
              <div slot="name">银行名称</div>
              <input slot="content" v-model="bank.bank_full_name" readonly placeholder="" >
            </item>
            <item>
              <div slot="name">支行名称</div>
              <input slot="content" v-model="bank.bank_branch_name" readonly placeholder="" >
            </item>
          </list-item>
        </div>
      </h-view>
    </h-modal>
  </h-view>
</template>
<script>
import backImg1 from '@/assets/userBind/nong.png'
import backImg2 from '@/assets/userBind/unNong.png'
export default {
  data () {
    return {
      backImg: null,
      showModalValue: false,
      bankList: [],
      isClear: false,
      certification_status: '',
      authUrl: '',
      bank: {
        bank_account_num: '',
        bank_account_name: '',
        bank_card_type: '',
        bank_full_name: '',
        bank_branch_name: '',
      },
      bankImg: '', // 银行卡图片
      getBankList: [],
    }
  },
  props: {
    document_id: String,
    document_name: String,
  },
  computed: {
    isApproved () {
      return window.localStorage.user_bp_status === 'APPROVED'
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getBankInfo()
      // vm.getNpCertificationUrl()
    })
  },
  created () {
    this.getBankInfo()
  },
  methods: {
    successCall () {
      this.hideModal()
      this.getBankInfo()
      this.bank.bank_account_num = ''
      this.bank.bank_account_name = ''
      this.bank.bank_full_name = ''
      this.bank.bank_branch_name = ''
    },
    hideModal () {
      this.showModalValue = false
      this.isClear = true
      this.bank.bank_account_num = ''
      this.bank.bank_account_name = window.localStorage.bp_name
      this.bank.bank_card_type = ''
      this.bank.bank_full_name = ''
      this.bank.bank_branch_name = ''
    },
    showModal () {
      this.showModalValue = true
      this.bankImg = ''
    },
    async checkElectonic () {
      let vm = this
      let id = vm.document_id
      let url = process.env.basePath + 'bp_elec_check'
      let param = {
        bp_id: id,
      }
      vm.hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      if (res.result === 'S') {
        vm.hlsPopup.hideLoading()
        vm.certification_status = res.info.certification_status
        return true
      } else {
        vm.hlsPopup.hideLoading()
        this.hlsPopup.showLongCenter(res.message)
      }
    },
    async putData () {
      let vm = this
      let bp_id = vm.document_id
      let isCheck = await vm.checkElectonic()
      let urlTemp = await vm.getNpCertificationUrl()
      if (urlTemp) {
        this.hlsPopup.showConfirm({
          title: '提示',
          content: '您确认提交吗？',
          onConfirm: data => {
            if (data) {
              let url = process.env.basePath + 'bp_bind_submit'
              let param = {
                master: {
                  bp_id: bp_id,
                  company_id: '2145',
                  bp_class: 'NP',
                  bp_type: window.localStorage.getItem('bp_type'),
                  business_num: window.localStorage.getItem('business_num'),
                },
              }
              vm.hlsPopup.showLoading('请稍候')
              if (isCheck) {
                vm.hlsHttp.post(url, param).then(function (res) {
                  vm.hlsPopup.hideLoading()
                  if (res.result === 'S') {
                    vm.hlsPopup.showSuccess('提交成功')
                    if (vm.certification_status === 'Y') {
                      vm.$router.push({
                        name: 'MyInfo',
                      })
                    } else if (vm.certification_status === 'N') {
                      // vm.$router.push({
                      //   name: 'Certification',
                      //   params: {
                      //     authUrl: vm.authUrl,
                      //   },
                      // })
                      const u = navigator.userAgent
                      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
                      if (isiOS) {
                        cordova.InAppBrowser.open(vm.authUrl, '_blank', 'location=yes')
                      } else {
                        vm.$router.push({
                          name: 'Certification',
                          params: {
                            authUrl: vm.authUrl,
                          },
                        })
                      }
                    } else {
                      vm.$router.push({
                        name: 'MyInfo',
                      })
                    }
                  } else if (res.result === 'P') {
                    vm.hlsPopup.showLongCenter(res.message)
                    vm.$router.push({
                      name: 'MyInfo',
                    })
                  } else {
                    vm.hlsPopup.showLongCenter(res.message)
                  }
                })
              }
            }
          },
        })
      } else {
        this.hlsPopup.showLongCenter('电子签认证出错')
      }
    },
    async getNpCertificationUrl () {
      let vm = this
      let url = $config.basePath + 'auth_user_sign'
      let param = {
        phone: window.localStorage.user_phone,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if ((res.info.code === 0) && (res.info.data.authUrl)) {
        vm.authUrl = res.info.data.authUrl
        return vm.authUrl
      } else if ((res.info.code === 0) && (res.info.data.openId)) {
        vm.authUrl = res.info.data.openId
        return vm.authUrl
      } else {
        hlsPopup.showError(res.info.msg)
        return ''
      }
    },
    selectType (e) {
      if (e === '0') {
        return '未知类型'
      } else if (e === '1') {
        return '借记卡'
      } else if (e === '2') {
        return '信用卡'
      }
    },
    showModalInfo (item) {
      Object.assign(this.bank, item)
      this.showModalValue = true
    },
    getBankInfo () {
      let vm = this
      let id = vm.document_id
      let url = process.env.basePath + 'bp_bank_query'
      let param = {
        bp_id: id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp
        .post(url, param)
        .then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.getBankList = res.lists
          }
        })
        .catch(() => {
          this.hlsPopup.showLongCenter('传入参数异常')
        })
    },
    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)
    },
  },
}
</script>
<style lang="less">
  #np-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;
      }
    .save {
    color: #fdb62f;
    border-radius: 4px;
    border: 1px solid #fdb62f;
    background-color: #fafafa;
  }
  .modal-content {
    width: 100%;
    height: 75%;
    position: absolute;
    top: 25%;
    background-color: #fff;
    overflow-y: scroll;
    .modal-content-add-top {
      width: 320px;
      height: 34px;
      line-height: 34px;
      padding-top: 10px;
      background-color: #fff;
      padding-bottom: 40px;
      position: fixed;
      left: 28px;
      span {
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: @headerColor;
        letter-spacing: 0.47px;
      }
      img {
        width: 34px;
        height: 34px;
        float: right;
      }
    }
    .addBack {
      display: block;
      width: 320px;
      margin: 0 auto;
      margin-top: 50px;
      border-radius: 6px;
      margin-bottom: 17px;
    }
    .card-Info {
      margin-bottom: 220px;
      padding-top: 80px;
    }
  }
  .add-card {
    width: 358px;
    height: 40px;
    background: @headerColor;
    border-radius: 4px;
    color: #fff;
  }
    }
    .modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>
