<template>
  <div>
    <a-input-group :style="{ display: inlineFlexStyle ? 'inline-flex' : '' }">
      <a-input
        v-model="userNames"
        :placeholder="placeholder"
        :read-only="true"
        :disabled="isView"
        @click="_cli"
        style="text-align: left"
      />
      <a-button v-if="isShowClear" @click="inputEmpty" :disabled="disabled" style="width: 100px">清空</a-button>
    </a-input-group>
    <j-select-user-by-dep-modal
      ref="selectModal"
      :modal-width="modalWidth"
      :multi="multi"
      @ok="selectOK"
      :user-ids="userIds"
      :condition="condition"
      @initComp="initComp"
    />
  </div>
</template>

<script>
import JSelectUserByDepModal from './JSelectUserByDepModal'

export default {
  name: 'JSelectUserByDep',
  components: { JSelectUserByDepModal },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    modalWidth: {
      type: Number,
      default: 1250,
      required: false
    },
    value: {
      type: String,
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    multi: {
      type: Boolean,
      default: true,
      required: false
    },
    readOnly: {
      type: Boolean,
      required: false,
      default: false
    },
    isShowClear: {
      type: Boolean,
      required: false,
      default: false
    },
    isDisabled: {
      type: Boolean,
      required: false,
      default: false
    },
    condition: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    },
    sign: {
      type: String,
      required: false,
      default: ''
    },
    inlineFlexStyle: {
      type: Boolean,
      required: false,
      default: true
    },
    allDepart: {
      type: Boolean,
      required: false,
      default: false
    },
    //负责人或工作班成员id 去重
    repeatId: {
      type: String,
      required: false,
      default: ''
    },
    selectMaxNum: {
      type: Number,
      default: 999,
      required: false
    },
    isView: {
      type: Boolean,
      required: false,
      default: false
    },
    placeholder: {
      type: String,
      required: false,
      default: '点击选择用户'
    }
  },
  data() {
    return {
      userIds: '',
      userNames: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.userIds = val
      }
    }
  },
  mounted() {
    this.userIds = this.value
  },
  methods: {
    _cli() {
      this.$refs.selectModal.showModal(this.allDepart)
    },
    initComp(userNames) {
      this.userNames = userNames
    },
    onSearchDepUser() {
      this.$refs.selectModal.showModal()
    },
    selectOK(rows) {
      if (rows.length === 0) {
        this.userNames = ''
        this.userIds = ''
      } else {
        let tempName = ''
        let tempId = ''

        for (let item of rows) {
          //判断是否是负责人
          if (this.repeatId) {
            if (this.repeatId.indexOf(item.id) !== -1) {
              continue
            }
          }
          tempName += ',' + item.realname
          tempId += ',' + item.id
        }
        this.userNames = tempName.substring(1)
        this.userIds = tempId.substring(1)
        //如果去掉负责人后为空给予提示
        if (this.repeatId && !this.userNames) {
          this.$message.warn('负责人和人员之间不能重复选择！')
        }
        // this.userIds = idstr
      }
      let obj = {
        userIds: this.userIds,
        userNames: this.userNames,
        rows: this.rows
      }
      this.$emit('selChange', obj)
      this.$emit('change', this.userIds, this.userNames, rows)
      this.$emit('selectUser', rows)
      const parsms = {
        userIds: this.userIds,
        userNames: this.userNames,
        rows
      }
      this.$emit('customChange', parsms)
    },
    inputEmpty() {
      if (!this.sign) {
        this.userNames = undefined
        this.userIds = undefined
      }
      this.$emit(this.sign)
    },
    clearForm() {
      this.$refs.selectModal.clearForm()
    }
  }
}
</script>
