<template>
    <template v-if="mode === 'DESIGN'">
      <el-select class="max-fill" v-if="!expanding" size="medium" multiple v-model="_value" disabled :placeholder="placeholder" filterable clearable/>
      <el-checkbox-group v-else v-model="_value">
        <el-checkbox disabled v-for="(op, index) in options" :key="index" :label="op">{{op}}</el-checkbox>
      </el-checkbox-group>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-select class="max-fill" v-if="!expanding" v-model="_value" multiple size="medium" clearable :placeholder="placeholder" filterable>
          <el-option v-for="(op, index) in options" :key="index" :value="op" :label="op"></el-option>
        </el-select>
        <el-checkbox-group v-else v-model="_value">
          <el-checkbox v-for="(op, index) in options" :key="index" :label="op">{{op}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <template v-else-if="perm === 'R'">
        <div v-for="(item,index) in _value" :key="index" >
          <span style="float:left;padding-right: 9px">{{item}}</span>
        </div>
      </template>
    </template>
</template>

<script setup>
import {defineProps,defineEmits} from 'vue'
const emit = defineEmits()

const props = defineProps({
  mode:{
    type: String,
    default: 'DESIGN'
  },
  required:{
    type: Boolean,
    default: false
  },
  placeholder:{
    type: String,
    default: '请选择选项'
  },
  value:{
    type: Array,
    default: () => {
      return []
    }
  },
  perm: {
    type: String,
    default: 'E'
  },
  expanding:{
    type: Boolean,
    default: false
  },
  options:{
    type: Array,
    default: () => {
      return []
    }
  },
})

const _value = computed({
  get() {
    return props.value;
  },
  set(value) {
    emit('update:value', value)
  }
})
watch(()=>props.value,(value)=>{
  _value.value = value
})

</script>

<style scoped>

</style>
