<template>
  <div class="wt flex flex_ac rows">
    <label class="label" :style="'color:'+lc+'!important'">{{lable?lable:'银行卡号'}}</label>
    <div class="label-value flex flex_ac" :style="style" @click="onSelectCardVisible = !onSelectCardVisible">
      {{cardNum?cardNum:'请选择银行卡'}}
      <i :style="'color:'+lc+'!important'" class="iconfont arrow-right fr"></i>
    </div>
    <mt-popup style="width: 100%;" v-model="onSelectCardVisible" position="bottom">
      <mt-picker value-key="sysid" :slots="cardNums" @change="onSelectCards"> </mt-picker>
      <button type="button" class="confirm-btn" @click="onSelectCardVisible = !onSelectCardVisible">确定</button>
    </mt-popup>
  </div>
</template>
<script>
  import base from '../../lib/base'
  export default {
    name: 'cardNum',
    props:['default','whichcardtype','lc','vc','no','end','lable'],
    data () {
      return {
        style:{
           color: this.vc+'!important',
           justifyContent: this.end?'flex-end':'space-between',
        },
        onSelectCardVisible:false,
        //卡号
        cardNums:[{
          values: [],
          className: 'slotItem',
        }],
        cardNum:'',
        hasGetBanks:false,
        cardList:[]
      }
    },
    methods: {
      //从后台拉取卡号列表
      queryCardList(cb){
        // console.log('--34行-卡类型标示---'+this.whichcardtype)
        //ajax请求,返回的数据 cardList，模拟ajax请求延时
        // console.info('调用了 从后台拉取卡号列表 的ajax');
        base.$.http({
          app:'wxInquiryBalanceService',
          func:'InquiryAccno',
          whichcardtype:this.whichcardtype
        },data=>{
          data=JSON.parse(data);
          // console.info(data);
          if(data.error){
            base.msg.alert(data.error);
            location.href = base.config.naviUrl
            return;
          }
          if(data.length==0){
            // base.msg.alert("您没有绑定任何账户！");
            // location.href = base.config.naviUrl
            return;
          }
          var arr = [];
          for(var i=0;i<data.length;i++){
            var accno1=data[i].sysid;
            var cardtype=(data[i].cardtype=="2")?"贷记卡":"借记卡";
            var obj = {};
            obj.sysid = "["+cardtype+"] " +accno1.substring(0,4)+"******"+accno1.substring(accno1.length-4,accno1.length);
            obj.code = accno1;
            obj.cardtype = data[i].cardtype;
            obj.cusname = data[i].cusname;
            arr.push(obj);
          }
          cb && cb(arr);
          this.hasGetBanks = true;
        });
      },
      //银行卡选择
      onSelectCards(picker,values){
        //hasGetBanks记录ajax状态，默认false，未发送ajax
        if (!this.hasGetBanks){
          this.queryCardList(cardList=>{
            //picker.setSlotValues(0,cardList)
            this.$set(this.cardNums,0,{
              values:cardList
            })
            if (this.default){
              picker.setSlotValue(0,this.types[this.default])
            }
            this.cardNum = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).sysid:''
            this.code = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).code:''
            this.cardtype = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).cardtype:''
            this.cusname = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).cusname:''
            if (!this.cardNum){
              return
            }
            this.$emit('bank',{
              sysid:this.cardNum,
              code:this.code,
              cardtype:this.cardtype,
              cusname:this.cusname
            })
          })
          return
        }
        this.cardNum = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).sysid:''
        this.code = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).code:''
        this.cardtype = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).cardtype:''
        this.cusname = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).cusname:''
        if (!this.cardNum){
          return
        }
        this.$emit('bank',{
          sysid:this.cardNum,
          code:this.code,
          cardtype:this.cardtype,
          cusname:this.cusname
        })
      }
    }
  }
</script>
<style scoped>
  @import "../../css/style.css";
  .arrow-right{
    margin-top: 2px;
    margin-left: 4px;
  }
</style>
