<template>
  <h-view id="np-bank-card">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>银行信息</span>
      </div>
    </h-header>
    <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>
            <img src="@/assets/userBind/add.png" class="icon-right" @click="showModal" >
          </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>
                  <div slot="buttons" class="button">
                    <option-button text @click.native="deleteFun(item.bank_account_num)" />
                  </div>
                </item-option>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="save" @click.native="putData">提交</tab-button>
    </bottom-tab>
    <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>
          <img
            v-if="!bankImg && !isApproved"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="bankImg"
            :src="bankImg"
            class="addBack"
            style="height: 38%;"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="isClear && isApproved && !bankImg"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="!bankImg && isApproved && !isClear"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <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" placeholder="请输入支行名称" >
            </item>
          </list-item>
        </div>
      </h-view>
      <bottom-tab class="add-box">
        <!-- v-if="!isApproved || (isClear && isApproved)"-->
        <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button>
      </bottom-tab>
    </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: [],
    }
  },
  computed: {
    isApproved () {
      return window.localStorage.user_bp_status === 'APPROVED'
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getBankInfo()
      // vm.getNpCertificationUrl()
    })
  },
  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 = window.localStorage.getItem('bp_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 = window.localStorage.getItem('bp_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',
                },
              }
              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,
                        },
                      })
                    } else {
                      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 ''
      }
    },
    addBankInfo () {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认添加吗？',
        onConfirm: data => {
          if (data === 1) {
            let bpName = window.localStorage.getItem('bp_name')
            if (
              this.bank.bank_account_num === '' ||
              this.bank.bank_account_name === '' ||
              this.bank.bank_full_name === ''
            ) {
              this.hlsPopup.showLongCenter('请输入完整字段')
            } else if (this.hlsUtil.isBankAccount(this.bank.bank_account_num)) {
              this.hlsPopup.showLongCenter('银行卡号有误')
            } else if (this.bank.bank_account_name !== bpName) {
              this.hlsPopup.showLongCenter('请输入本人银行卡')
            } else {
              let list = JSON.parse(JSON.stringify(this.bank))
              this.bankList.push(list)
              let vm = this
              let url = process.env.basePath + 'bp_bank_save'
              let param = {
                master: {
                  bp_id: window.localStorage.getItem('bp_id'),
                  bank_lists: this.bankList,
                },
              }
              vm.hlsPopup.showLoading('请稍候')
              vm.hlsHttp.post(url, param).then(function (res) {
                vm.hlsPopup.hideLoading()
                if (res.result === 'S') {
                  vm.successCall()
                  vm.hlsPopup.showLongCenter('保存成功')
                  setTimeout(vm.successCall, 2000)
                }
              })
            }
          }
        },
      })
    },
    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 = window.localStorage.getItem('bp_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)
    },
    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': 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)
              }
            })
          }
        },
      })
    },
    ocrShow (ocrType, type) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera(ocrType, type)
          } else {
            vm.takePicture(ocrType, type)
          }
        },
      })
    },
    openCamera (ocrType, type) {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          if (ocrType === 'idCard') {
            type === 'front'
              ? ((vm.idCardFront = imgdata),
              vm.idCardIdentify(imgdata, 'idCard'),
              (vm.idCardFrontEditFlag = true))
              : ((vm.idCardBack = imgdata),
              vm.idCardBackIdentify(imgdata, 'idCard'),
              (vm.idCardBackEditFlag = true))
          } else if (ocrType === 'idCardSp') {
            // 配偶身份证识别
            type === 'front'
              ? ((vm.idCardFrontSp = imgdata),
              vm.idCardIdentify(imgdata, 'idCardSp'),
              (vm.idCardFrontSpEditFlag = true))
              : ((vm.idCardBackSp = imgdata),
              vm.idCardBackIdentify(imgdata, 'idCardSp'),
              (vm.idCardBackSpEditFlag = true))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = imgdata
            vm.bankCardIdentify(imgdata)
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture (ocrType, type) {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          if (ocrType === 'idCard') {
            type === 'front'
              ? ((vm.idCardFront = imgUrl[0]),
              vm.idCardIdentify(imgUrl[0], 'idCard'),
              (vm.idCardFrontEditFlag = true))
              : ((vm.idCardBack = imgUrl[0]),
              vm.idCardBackIdentify(imgUrl[0], 'idCard'),
              (vm.idCardBackEditFlag = true))
          } else if (ocrType === 'idCardSp') {
            // 配偶身份证识别
            type === 'front'
              ? ((vm.idCardFrontSp = imgUrl[0]),
              vm.idCardIdentify(imgUrl[0], 'idCardSp'),
              (vm.idCardFrontSpEditFlag = true))
              : ((vm.idCardBackSp = imgUrl[0]),
              vm.idCardBackIdentify(imgUrl[0], 'idCardSp'),
              (vm.idCardBackSpEditFlag = true))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = imgUrl[0]
            vm.bankCardIdentify(imgUrl[0])
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 银行卡识别
    bankCardIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/bankCard'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.result
        vm.bank.bank_account_num = result.bank_card_number.replace(/\s*/g, '')
        vm.bank.bank_full_name = result.bank_name
        vm.bank.bank_card_type = result.bank_card_type
      })
    },
  },
}
</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;
    }

  }
     .add-card {
    width: 358px;
    height: 40px;
    background: @headerColor;
    border-radius: 4px;
    color: #fff;
  }
    }
    .modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>
