<template>
  <el-select
    v-model="value"
    multiple
    collapse-tags
    @change="onChange"
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class PermissionSelect extends VueViews {
  value:Array<any>=[]
  options:Array<any>=[{
    label:'新增模板',
    value:'add'
  },{
    label:'编辑模板',
    value:'edit'
  },{
    label:'删除模板',
    value:'del'
  },{
    label:'打印模板',
    value:'print'
  }]
  
  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }

  setValue(v:any){
    this.value = v ? v.split(',') : [];
  }
  getValue(){
    let n:string='';
    if(this.value && this.value.length > 0){
      for(const item of this.value){
        if(n){
          n = n + ','+item;
        }else{
          n=item;
        }
      }
    }
    return n;
  }
  onChange(){
    this.$emit('onChange',this.getValue());
  }
}
</script>
<style lang="scss" scoped>

</style>