<!--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>
        <el-tag type="primary" size="mini" v-if="!isEmpty(tagName)">负责工序：{{tagName}}</el-tag>
        <i class="el-icon-arrow-right"/>
      </template>
    </el-input>

    <process-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 { listProdProcess, listProdProcessByIds } from '@/api/bst/prodProcess'
import ProcessDialog from '@/components/Business/Process/ProcessDialog.vue'
import { isEmpty } from '@/utils'

export default {
  name: 'ProcessInput',
  mixins: [$businessInput],
  components: { ProcessDialog},
  props: {
    listApi: {
      type: Function,
      default: listProdProcess,
    },
    loadApi: {
      type: Function,
      default: listProdProcessByIds
    },
    prop: {
      type: String,
      default: "id"
    },
    // 展示值的属性
    showProp: {
      type: String,
      default: 'deptName'
    },
  },
  computed: {
    tagName() {
      if (isEmpty(this.selected)) {
        return null;
      }
      return this.selected[0].deptProcess;
    }
  },
  methods: { isEmpty },
}
</script>
