<!--version: 4, 经营场所选择器-->
<!--版本更新内容：添加prop属性，修复多选-->

<template>
  <div>
    <template v-if="multiple">
      <el-tag
        v-for="(item,index) of selected"
        :key="item.userId"
        size="small"
        style="margin-right: 4px"
        disable-transitions
        :closable="!disabled"
        @close="onCloseSelected(index)"
      >{{item[showProp]}}</el-tag>
      <el-tag style="cursor: not-allowed" size="small" type="info" v-if="disabled">+</el-tag>
      <el-tag style="cursor: pointer" size="small" @click="openDialog" type="success" v-else>+</el-tag>
    </template>
    <el-input
      v-else
      :value="inputBindValue"
      @focus="openDialog"
      :size="size"
      :disabled="disabled"
      readonly
      :placeholder="placeholder">
      <template #suffix><i class="el-icon-arrow-right"/></template>
    </el-input>

    <dept-dialog
      v-if="openType === 'dialog'"
      :show.sync="dialogShow"
      :query="query"
      :multiple="multiple"
      :init-select="selected"
      @select="onSubmit"
      :prop="prop"
      :title="title"
      :list-api="listApi"
    />
  </div>
</template>

<script>
import { $businessInput } from '@/components/Business/mixins'
import DeptDialog from '@/components/Business/Dept/DeptDialog.vue'
import { listDept, listDeptByIds } from '@/api/system/dept'

export default {
  name: 'DeptInput',
  mixins: [$businessInput],
  components: { DeptDialog},
  props: {
    listApi: {
      type: Function,
      default: listDept,
    },
    loadApi: {
      type: Function,
      default: listDeptByIds
    },
    prop: {
      type: String,
      default: "deptId"
    },
    // 展示值的属性
    showProp: {
      type: String,
      default: 'deptName'
    },
    // 打开的类型
    openType: {
      type: String,
      default: 'dialog',
    },
  },
  watch: {
    value: {
      handler(newVal) {
        console.log('接收到新的value值:', newVal);
      }
    }
  },
}
</script>
