<!--用户选择组件-->
<template>
  <div class="ace-select-user">
    <el-tooltip effect="dark" placement="bottom-start">
      <div slot="content" style="max-width: 600px"><span style="color: rgb(189, 189, 189)">已选人员：</span>{{ selectedUserName }}</div>
      <el-input :value="selectedUserName" :size="size" @focus="handleSelectUser" readonly>
        <template slot="prepend">已选{{ this.value.length }}人</template>

        <el-button slot="append" @click="handleSelectUser">点击选择人员</el-button>
      </el-input>
    </el-tooltip>
    <component
      :is="currentType"
      ref="selectUserForAll"
      :height="600"
      :title="title"
      :isDataFromApi="type !== 'own'"
      @submit="handelSubmit"
      :importData="[...value]"
      :sourceData="data"
      :isSingle="isSingle"
    ></component>
  </div>
</template>
<script>
import SelectUserForAll from "./components/SelectUserForAll";
import SelectUserForRole from "./components/SelectUserForDepOrRole";
import SelectUserForApp from "./components/SelectUserForApp";
import SelectUserForGroup from "./components/SelectUserForGroup";
import SelectUserForSecretLevel from "./components/SelectUserForSecretLevel";

//类型对应的组件名称
const components = [
  //用户数据是由自己传入
  {
    name: "SelectUserForAll",
    type: "own",
    title: "自定义数据",
  },
  //根据组织选择用户
  {
    name: "SelectUserForAll",
    type: "org",
    title: "根据组织选择用户",
  },
  //根据部门或者角色选择用户
  {
    name: "SelectUserForRole",
    type: "depOrRole",
    title: "根据部门或者角色选择用户",
  },
  //暂时不使用。
  {
    name: "SelectUserForApp",
    type: "app",
    title: "根据应用选择用户（暂时不使用。）",
  },
  //根据集团选择用户
  {
    name: "SelectUserForGroup",
    type: "group",
    title: "根据集团选择用户",
  },
  //根据密级选择用户
  {
    name: "SelectUserForSecretLevel",
    type: "secretLevel",
    title: "根据当前用户的密级选择用户",
  },
];
export default {
  name: "AceSelectUser",
  model: {
    prop: "value",
    event: "submit",
  },
  components: {
    SelectUserForAll,
    SelectUserForRole,
    SelectUserForApp,
    SelectUserForGroup,
    SelectUserForSecretLevel,
  },
  computed: {
    selectedUserName() {
      return this.value.map((user) => user.name).join("，");
    },
    currentType() {
      return components.filter((component) => component.type === this.type)[0].name;
    },
  },
  props: {
    value: {
      type: Array,
      required: true,
    },
    size: {
      type: String,
      default: "small",
    },
    isSingle: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "选择用户",
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    type: {
      type: String,
      default: "org",
      validator: (value) => {
        let hasType = !components.every((item) => item.type !== value);
        if (!hasType) console.error(`【Ace-error】您传入了错误的选人类型"${value}"，请在${JSON.stringify(components)}之中选择一个。`);
        return hasType;
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    handleSelectUser() {
      this.$refs.selectUserForAll.init();
    },
    handelSubmit(data) {
      this.$emit("submit", [...data]);
    },
  },
};
</script>
