<template>
  <div class="wt flex flex_ac rows">
    <label class="label">开户银行</label>
    <div v-if="!defaultVal" class="label-value" @click="onSelectVisible = !onSelectVisible">
        {{text?text:'请选择开户银行'}}
      <i class="iconfont arrow-right fr"></i>
    </div>
    <div v-if="defaultVal" class="label-value" @click="onSelectVisible = !onSelectVisible">
      {{defaultVal}}
      <i class="iconfont arrow-right fr"></i>
    </div>
    <mt-popup style="width: 100%;" v-model="onSelectVisible" position="bottom">
      <mt-picker value-key="text" :slots="banks" @change="onSelect"></mt-picker>
      <button type="button" class="confirm-btn" @click="confirm">确定</button>
    </mt-popup>
  </div>
</template>
<script>
  import url from '../../lib/url'
  import base from '../../lib/base'
  export default {
    name: 'openBanks',
    props:['default','verfifyFunc','value'],
    data () {
      return {
        text:'',
        defaultVal:"",
        onSelectVisible:false,
        //开户银行
        banks:[{
          values: [],
          className: 'slotItem',
        }],
        bankName:'',
        hasGetBanks:false,
      }
    },
    watch:{
      default:function () {
        console.log(this.default)
      }
    },
    methods: {
      confirm(){
        this.onSelectVisible = !this.onSelectVisible
        this.defaultVal = ""
      },
      //查询加载开户行数据
      queryList(cb){
        base.$.http({
          app:'wxTransferAccoService',
          func:'InquiryOpenBranch',
        },data=>{
           data=JSON.parse(data);
          // console.info(data);
          if(data.error){
            base.msg.alert(data.error);
            return;
          }
          var banks = [{
            text:"请选择开户银行",
            code:"",
          }]
          for(var i=0;i<data.length;i++){
            var obj = {}
            obj.text = data[i].bankname
            obj.code = data[i].bankcode
            banks.push(obj)
          }
          cb && cb(banks);
          this.hasGetBanks = true;
        });
      },
      //银行卡选择
      onSelect(picker,values){
        //hasGetBanks记录ajax状态，默认false，未发送ajax
        if (!this.hasGetBanks){
          this.queryList(list=>{
            picker.setSlotValues(0,list)
            //根据开户行号设置默认值
            var that = this
            if (this.default){
              list.forEach((item,index)=>{
                if (item.code==this.default){
                  this.defaultVal = item.text
                  this.$emit('obank',{
                    text:item.text,
                    code:item.code,
                  })
                }
              })
            }
            this.text = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).text:''
            this.code = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).code:''
            if (!this.code){
              return
            }
            this.$emit('obank',{
              text:this.text,
              code:this.code,
            })
          })
          return
        }
        this.text = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).text:''
        this.code = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).code:''
        if (!this.code){
          return
        }
        this.$emit('obank',{
          text:this.text,
          code:this.code
        })
      }
    }
  }
</script>
<style scoped>
  @import "../../css/style.css";
  .arrow-right{
    margin-top: 2px;
  }
</style>
