<template>
  <div class="flex flex_ac rows">
    <label v-if="label" class="label" :style="'letter-spacing:'+space">{{label}}</label>
    <div class="label-value">
      <div v-if="!defaultTips" class="in" @click="clickV" :style='"text-indent:"+indent+";text-align:"+direction'>
        {{tips?tips:'请选择'}}
        <i class="iconfont arrow-right fr"></i>
      </div>
      <div v-if="defaultTips" class="in" @click="clickV" :style='"text-indent:"+indent+";text-align:"+direction'>
        {{defaultTips}}
        <i 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="select"></mt-picker>
        <button type="button" class="confirm-btn" @click="confirm">确定</button>
      </mt-popup>
    </div>
  </div>
</template>
<script>
  import base from '../../lib/base'
  export default {
    name: 'nselect',
    props:['label','value','list','default','indent','direction'],
    data () {
      return {
        space:0,
        selectVisible:false,
        arrs:[{
          values: [],
          className: 'slotItem',
        }],
        tips:'',
        defaultTips:"",
      }
    },
    created(){
      base.justify.deal(this.label,this)
    },
    watch:{
      list:function () {
        this.select(this.picker)
      },
      default:function () {
        this.defaultTips = this.list[this.default].text
        // this.active = this.default
        // console.log(this.active)
      }
    },
    methods: {
      confirm(){
        this.selectVisible = !this.selectVisible
        this.defaultTips = ""
      },
      clickV(){
        this.selectVisible = !this.selectVisible
        this.clear = true
      },
      select(picker,values){
          this.picker = picker
          if (!this.list||!this.list.length){
            return
          }
          this.$set(this.arrs,0,{
            values:this.list
          })
          if (this.default&&!this.clear){
              this.tips = this.list[this.default].text
              this.code = this.list[this.default].code
              this.$emit('change',{
                code: this.code,
                text: this.tips
              })
              return
          }
          this.tips = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).text:'请选择'
          this.code = picker.getSlotValue(0)!=undefined?picker.getSlotValue(0).code:''
          // if (!this.code){
          //   return
          // }
          this.$emit('change',{
            code:this.code,
            text:this.tips
          })
      },
    }
  }
</script>
<style scoped>
  @import "../../css/style.css";
  .arrow-right{
    margin-left: 5px;
    margin-top: .07rem;
    color: #999;
  }
</style>
