<template>
  <div :class="lookupclasses">
    <div v-if="showLabel && title" class="input-label">
      <label>{{title}}</label>
      <span class="is-required" v-if="required">*</span>
    </div>
    <div :style="styles" :class="inputWrapperClass" class="input-wrapper">
      <div class="rt-lookup" @click="goToLookupView">
        <input :value="lookUpText" :placeholder="placeholder" readonly />
        <span class="inner-icon">
          <rt-icon name="rt-base-arrow" color="#ccc" size="20"></rt-icon>
        </span>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'rtLookup',
  mixins: [form],
  props: {
    // Lookup及文本显示标题
    title: {
      type: String
    },
    showLabel: {
      type: Boolean,
      default: true
    },
    showLabel: {
      type: Boolean,
      default: true
    },
    // 获取数据名称
    getDataName: {
      type: String,
      required: true
    },
    // lookup名称用来传递一个广播事件 (事件名称为`choose-'名称'`)
    name: {
      type: String,
      default: () => `lookup-${rt.newUUID()}`
    },
    // 排序
    orderby: {
      type: String,
      required: true
    },
    // 参数
    param: {
      type: Object,
      default: () => ({})
    },
    // 是否过滤权限
    filtered: {
      type: Boolean,
      default: true
    },
    // 是否必选
    required: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 文本默认内容
    placeholder: {
      type: String,
      default: '输入名称'
    },
    colList: {
      type: [Array],
      default: () => [{ label: '', value: 'name' }]
    },
    route: {
      type: String,
      default: 'lookup'
    },
    text: {
      type: [String, Number]
    },
    value: {
      required: true
    },
    advanceFilter: {
      type: Boolean,
      default: true
    }
  },
  created() {
    this.$bus.$on(`choose-${this.name}`, value => {
      if (this.advanceFilter) this.$bus.$emit('show-advanceFilter-view'); // 显示高级筛选
      this.$emit('input', value); // 用于双向绑定
      this.$emit('on-select', value);
    });
  },
  computed: {
    lookUpText() {
      let text = '';
      if (!rt.isNil(this.text) || !rt.isNilOrWhiteSpace(this.text)) {
        text = this.text;
      } else if (this.value) {
        if (this.multiple) {
          text = this.value.map(item => item.Name).join(',');
        } else {
          text = this.value.Name;
        }
      }
      return text;
    },
    lookupclasses() {
      return ['rt-form-lookup-area', 'input-area', `is-${this.setLabelPosition}`, this.hasTitle ? '' : 'no-title'];
    },
    inputWrapperClass() {
      return [`input-wrapper${this.disabled ? ', input-area-disabled' : ''}`];
    },
    styles() {
      return this.title || this.setLabelPosition === 'top'
        ? {
            textAlign: this.textAlign
          }
        : {
            textAlign: this.textAlign,
            width: '100%'
          };
    }
  },
  methods: {
    goToLookupView() {
      if (this.disabled) return;
      this.$bus.$emit('go-to-lookup-view');
      if (this.advanceFilter) this.$bus.$emit('hide-advanceFilter-view');

      this.$bus.$once('go-back', () => {
        this.$bus.$emit('show-advanceFilter-view');
      });

      this.$router.push({
        name: this.route,
        params: {
          title: this.title,
          name: this.name,
          getDataName: this.getDataName,
          orderby: this.orderby,
          param: this.param,
          filtered: this.filtered,
          multiple: this.multiple,
          placeholder: this.placeholder,
          colList: this.colList,
          selectedData: this.value
        }
      });
    },
    validator() {
      this.msg = '';
      this.result = true;
      if (this.required && !this.lookUpText) {
        this.msg = this.title + '是必选项';
        this.result = false;
      }
      return new Promise((resolve, reject) => {
        resolve({
          result: this.result,
          msg: this.msg
        });
      });
    }
  }
};
</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>
