<template>
  <div class="validDate">
    <label class="label" :style="'letter-spacing:'+space">{{label}}</label>
    <div class="label-value" @click="onSelectVisible = !onSelectVisible">
      {{date?date:'请选择有效期'}}
      <i class="iconfont arrow-right fr"></i>
    </div>
    <mt-popup style="width: 100%;" v-model="onSelectVisible" position="bottom">
      <mt-picker value-key="text" :slots="dates" @change="onSelect"></mt-picker>
      <button type="button" class="confirm-btn" @click="onSelectVisible = !onSelectVisible">确定</button>
    </mt-popup>
  </div>
</template>
<script>
  import url from '../../lib/url'
  import base from '../../lib/base'
  export default {
    name: 'validDate',
    props:['default'],
    data () {
      return {
        spacing:0,
        label:'有效期',
        onSelectVisible:false,
        dates:[{
          values: [
            {
              'text':'永久取消',
              'code':'0'
            },{
              'text':'30天内取消',
              'code':'1'
            },{
              'text':'暂不取消',
              'code':'2'
            }
          ],
          className: 'slotItem',
        }],
        date:'',
        activeIndex:'2',
        hasGet:false,
      }
    },
    created(){
      base.justify.deal(this.label,this)
    },
    methods: {
      queryList(cb){
        base.$.http({
          app:'setup',
          func:'getList',
        },data=>{
          data=JSON.parse(data);
          if(data.error){
            base.msg.alert(data.error);
            return;
          }
          if("N"==data.cardCredit){
              this.activeIndex="2";
          }else{
            for(var i=0;i<this.dates[0].values.length;i++){
              if(this.dates[0].values[i].code==data.cardCredit){
                 this.activeIndex=i+"";
                 break;
              }
            }
          }
          cb && cb(this.activeIndex);
          this.hasGet = true;
        });
      },
      onSelect(picker,values){
        //hasGetBanks记录ajax状态，默认false，未发送ajax
        if (!this.hasGet){
          this.queryList(index=>{
            // picker.setSlotValues(0,list)
            // if (this.default){
              picker.setSlotValue(0,this.dates[0].values[index])
            // }
            this.text = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).text:''
            this.code = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).code:''
            this.date=this.text
            this.$emit('validDate',{
              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:''
        this.date=this.text
        this.$emit('validDate',{
          text:this.text,
          code:this.code
        })
      }
    }
  }
</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>
