<template>
  <div class="cardNum">
    <label class="label">银行卡号</label>
    <div class="label-value select" @click="onSelectCardVisible = !onSelectCardVisible">
      {{cardNum?cardNum:'请选择银行卡'}}
    </div>
    <mt-popup class="label-value" style="width: 100%;" v-model="onSelectCardVisible" position="bottom">
      <mt-picker value-key="sysid" :slots="cardNums" @change="onSelectCards"></mt-picker>
      <button type="button" @click="onSelectCardVisible = !onSelectCardVisible">确定</button>
    </mt-popup>
  </div>
</template>
<script>
  import base from '../../lib/base'
  export default {
    name: 'cardNum2',//用于贷记卡列表查询
    props:['default'],
    data () {
      return {
        onSelectCardVisible:false,
        //卡号
        cardNums:[{
          values: [],
          className: 'slotItem',
        }],
        cardNum:'',
        hasGetBanks:false,
        cardList:[]
      }
    },
    methods: {
      //从后台拉取卡号列表
      queryCardList(cb){
        //ajax请求,返回的数据 cardList，模拟ajax请求延时
        console.info('调用了 从后台拉取卡号列表 的ajax');
        base.$.http({
          app:'querylimi',
          func:'getlimitData'
        },data=>{
          data=JSON.parse(data);
          console.info(data);
          if(data.error){
            base.msg.alert(data.error);
//            naviga();
            return;
          }
          if(data.length==0){
            base.msg.alert("您没有绑定任何账户！");
//            naviga();
            return;
          }
           var cardList = data;
          cb && cb(cardList);
          this.hasGetBanks = true;
        });
      },
      //银行卡选择
      onSelectCards(picker,values){
        //hasGetBanks记录ajax状态，默认false，未发送ajax
        if (!this.hasGetBanks){
          this.queryCardList(cardList=>{
            picker.setSlotValues(0,cardList)
            if (this.default){
              picker.setSlotValue(0,this.types[this.default])
            }
            this.cardNum = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).sysid:''
            this.$emit('bank',this.cardNum)
          })
          return
        }
        this.cardNum = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).sysid:''
        this.$emit('bank',this.cardNum)
      }
    }
  }
</script>
<style scoped>
  button{
    display: inline-block;
    font-size: 14px;
    padding: 0 12px;
    height: 33px;
    color: #656b79;
    background-color: #f6f8fa;
    -webkit-box-shadow: 0 0 1px #b8bbbf;
    box-shadow: 0 0 1px #b8bbbf;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
