<template>
  <div :class="lookupclasses">
    <div class="input-label">
      <label>{{ label }}</label>
      <span class="is-required" v-if="required">*</span>
    </div>
    <div :style="styles" :class="inputWrapperClass" class="input-wrapper">
      <div class="rt-lookup" @click="goBuTreeLookup">
        <input :value="buNames" :placeholder="placeholder" readonly v-if="!this.customBu" />
        <input :value="customBuNames" :placeholder="placeholder" readonly v-if="this.customBu" />
        <span class="inner-icon">
          <rt-icon name="rt-base-arrow" color="#ccc" size="20"></rt-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import butreelookupfilter from '../../../mixins/butreelookupfilter';
import form from 'vue-xmobile/src/mixins/form.js';

export default {
  name: 'rtBuTreeLookup',
  mixins: [butreelookupfilter, form],
  props: {
    // Lookup及文本显示标题
    label: {
      type: String
    },
    // 文本默认内容
    placeholder: {
      type: String,
      default: '请选择部门'
    },
    // 是否必选
    required: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      required: true
    },
    advanceFilter: {
      type: Boolean,
      default: true
    },
    customBu: {
      type: Boolean,
      default: false
    },
    // 获取数据Api
    customApi: {
      type: String
    }
  },
  mounted() {
    let vm = this;
    this.$bus.$on('reset-bu-tree-look-up', () => {
      vm.buselected = {};
    });
  },
  computed: {
    lookupclasses() {
      return ['rt-form-lookup-area', 'input-area', `is-${this.setLabelPosition}`, this.hasTitle ? '' : 'no-title'];
    },
    inputWrapperClass() {
      return [`input-wrapper${this.disabled ? ', input-area-disabled' : ''}`];
    },
    hasTitle() {
      return !!this.label;
    },
    styles() {
      return this.label || this.setLabelPosition === 'top'
        ? {
            textAlign: this.textAlign
          }
        : {
            textAlign: this.textAlign,
            width: '100%'
          };
    },
    buNames() {
      return this.value ? this.value.map(item => item.Name).join(',') : '';
    },
    customBuNames() {
      return this.value ? this.value.map(item => item.Name1 + item.Name2 + item.Name3 + item.Name4).join(',') : '';
    }
  },
  methods: {
    goBuTreeLookup() {
      if (this.disabled) return;
      var that = this;
      if (this.advanceFilter) this.$bus.$emit('hide-advanceFilter-view');
      this.butreefilterforlookup(value => {
        if (this.advanceFilter) this.$bus.$emit('show-advanceFilter-view');
        if (value) {
          this.$emit('input', value);
          that.$emit('choose-tree-businessUnitId', { Id: value.map(item => item.Id).join(','), Name: value.map(item => item.Name).join(',') });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .rt-cell {
  border-top: none;
}

input[readonly] {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.input-area-disabled {
  input[readonly] {
    color: #888;
  }
}
</style>
