<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 }} -->
	<view style="white-space: normal;min-height: 54px;display: flex;align-items: center;justify-content: right;">
		<view style="line-height: 24px;">
			{{ display || displayPlaceholder }}
		</view>
	</view>
  </l-label>
  <!-- #endif -->
</template>

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

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

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

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

      const rootType = this.rootType || { user: 'department', department: 'company', company: 'company' }[this.type]
      const rootId = this.rootId
	  
	  let url_ = this.multiple?"select-organize-multiple":"select-organize"
	  this.SET_PARAM(this.value)
      const url = rootId
        ? `/pages/common/${url_}?type=${this.type}&rootId=${rootId}&rootType=${rootType}`
        : `/pages/common/${url_}?type=${this.type}`

      this.NAV_TO(url)
    }
  },

  computed: {
    display() {
      if (!this.value) {
        return this.placeholder
      }
	  
      const list = this.GET_GLOBAL(this.type)
	  let values = this.value instanceof Array?this.value:this.value.split(",")
	  if(values.length>1){
		  const orgItems = values.map(t=>list[t]?list[t].name:'').toString()
		  return orgItems
	  }
	  
	  const orgItem = list[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>
