<template>
  <div class="custom">
    <label v-if="label" class="label" :style="'color:'+lc+'!important;letter-spacing:'+space">{{label}}</label>
    <div class="label-value">
      <div v-if="!transparent" class="label-value" @click="clickV">
        <i :style="'color:'+lc+'!important'" class="iconfont arrow-right fr"></i>
        {{tips?tips:'请选择'}}
      </div>
      <div v-if="transparent" class="flex flex_ac" @click="clickV">
        {{tips}}
        <i style="margin-left: .2rem;color: white !important;" class="iconfont arrow-right fr"></i>
      </div>
      <mt-popup style="width: 100%;" v-model="selectVisible" position="bottom">
        <mt-picker value-key="text" :slots="arrs" @change="onSelect"></mt-picker>
        <button type="button" class="confirm-btn" @click="selectVisible = !selectVisible">确定</button>
      </mt-popup>
    </div>
  </div>
</template>
<script>
  import base from '../../lib/base'
  import url from '../../lib/url'
  export default {
    name: 'custom',
    props:['label','value','list','default','app','func','transparent','lc','vc'],
    data () {
      return {
        space:0,
        selectVisible:false,
        arrs:[{
          values: [],
          className: 'slotItem',
        }],
        clear:'',
        tips:'',
        hasGet:false,
      }
    },
    created(){
      base.justify.deal(this.label,this)
    },
    methods: {
      clickV(){
        this.selectVisible = !this.selectVisible
        this.clear = true
      },
      queryList(cb){
        base.$.http({
          app:this.app?this.app:'CommonService',
          func:this.func?this.func:'getAccNameList',
        },data=>{
          data=JSON.parse(data);
          if(data.error){
            base.msg.alert(data.error);
            return;
          }
          var arrs = []
          var cusname;
          for(var i=0;i<data.length;i++){
            var obj = {}
            if(data[i].cusname!=null){
              cusname = "*"+data[i].cusname.substring(data[i].cusname.length-1)
            }
            obj.sysid = data[i].sysid
            obj.text = cusname
            arrs.push(obj)
          }
          cb && cb(arrs);
          this.hasGet = true;
        });
      },
      //银行卡选择
      onSelect(picker,values){
        //hasGet记录ajax状态，默认false，未发送ajax
        if (!this.hasGet){
          this.queryList(list=>{
            //picker.setSlotValues(0,list)
            this.$set(this.arrs,0,{
              values:list
            })
            if (this.default){
              picker.setSlotValue(0,this.types[this.default])
            }
            this.text = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).text:''
            this.sysid = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).sysid:''
            this.tips = this.text
            if (!this.sysid){
              return
            }
            this.$emit('custom',{
              text:this.text,
              sysid:this.sysid
            })
          })
          return
        }
        this.text = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).text:''
        this.sysid = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).sysid:''
        this.tips = this.text
        if (!this.sysid){
          return
        }
        this.$emit('custom',{
          text:this.text,
          sysid:this.sysid
        })
      }
    }
  }
</script>
<style scoped>
  @import "../../css/style.css";
</style>
