<template>
  <div style="max-width: 350px">
    <template v-if="mode === 'DESIGN'">
      <el-button disabled icon="SetUp" type="primary" size="mini" round> 选择部门</el-button>
      <span class="placeholder"> {{ placeholder }}</span>
    </template>
    <template v-else>
      <template v-if="perm === 'E'">
        <el-button icon="SetUp" type="primary" size="mini" round @click="selectDept"> 选择部门</el-button>
        <org-picker type="dept" :multiple="multiple" ref="deptPicker" :v-model="deptList" @ok="selected"/>
        <span class="placeholder"> {{ placeholder }}</span>
        <div style="margin-top: 5px">
          <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in deptList" :key="i" @close="delDept(i)">
            {{ dept.label }}
          </el-tag>
        </div>
      </template>
      <template v-else-if="perm === 'R'">
        <el-tag size="mini" style="margin: 5px"  v-for="(dept, i) in deptList" :key="i" >
          {{ dept.label }}
        </el-tag>
      </template>
    </template>
  </div>
</template>

<script setup>
import OrgPicker from "../../process/common/DeptPicker.vue";
import {computed, defineProps} from "vue";

const showOrgSelect = ref(false)
const deptPicker = ref()
const deptList = ref([])
const props = defineProps({
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  perm: {
    type: String,
    default: 'E'
  },
  placeholder: {
    type: String,
    default: '请选择部门'
  },
  multiple: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'DESIGN'
  },
  required: {
    type: Boolean,
    default: false
  },
})
const emit = defineEmits(["input"])
const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
})

const selectDept = () => {
  //弹出部门选择器,选择部门
  deptPicker.value.showDeptPicker()
}
const selected = (select) => {
  let userInfoList = []
  for (let val of select) {
    let userInfo = {
      value: val.value,
      label: val.label
    }
    userInfoList.push(userInfo)
  }
  deptList.value = userInfoList
}
const delDept = (i) => {
  deptList.value.splice(i, 1)
}

</script>

<style scoped>
.placeholder {
  margin-left: 10px;
  color: #adabab;
  font-size: smaller;
}
</style>
