<template>
  <!-- #ifdef MP-DINGTALK -->
  <l-label :arrow="!readonly" :required="required" :title="title">
    <text @click="click">{{ display || displayPlaceholder }}</text>
  </l-label>
  <!-- #endif -->

  <!-- #ifndef MP-DINGTALK -->
  <l-label @click="click" :arrow="!readonly" :required="required" :title="title">
    {{ display || displayPlaceholder }}
  </l-label>
  <!-- #endif -->
</template>

<script>
export default {
  name: 'l-organize-picker',

  props: {
    value: { default: '' },
    type: {},
    title: {},
    required: {},
    placeholder: {},
    readonly: {},
    rootId: {},
    rootType: {}
  },

  methods: {
    click() {
      if (this.readonly) {
        return
      }

      this.ONCE('select-organize', data => {
        this.$emit('input', data.id)
        this.$emit('change', data.id)
      })

      const rootType = this.rootType || { user: 'department', department: 'company', company: 'company' }[this.type]
      const rootId = this.rootId

      const url = rootId
        ? `/pages/common/select-organize?type=${this.type}&rootId=${rootId}&rootType=${rootType}`
        : `/pages/common/select-organize?type=${this.type}`

      this.NAV_TO(url)
    }
  },

  computed: {
    display() {
      if (!this.value) {
        return this.placeholder
      }
      const orgItem = this.GET_GLOBAL(this.type)[this.value]

      return orgItem ? orgItem.name : this.placeholder
    },

    displayPlaceholder() {
      if (this.readonly) {
        return ''
      }

      if (this.placeholder) {
        return this.placeholder
      }

      return this.title ? `请选择${this.title}` : '请选择…'
    }
  }
}
</script>
