<template>
  <div :id="nextId" class="dropdown select--dropdown stretch-mobile" :class="[this.isOpen ? 'is-open' : '', this.disableTag ? 'disabled' : '', {'dropdown--small': this.size === 'small'}]" @click.stop.prevent="showDropList">
    <div class="dropdown__label">
      <div class="text-truncate" :data-value="selectedValue">
        {{selectedLabel}}
      </div>
    </div>
    <div class="dropdown__content">
      <div class="dropdown__scroll">
        <!--loading-->
        <div class="js-hidden padding-leader--small padding-trailer--small">
          <span class="load-tester">
            <span class="spinner"></span>
          </span>
        </div>
        <!--loading-end-->
        <!-- message error-->
        <div class="message message--error" :class="this.isError ? '' : 'is-hidden'">
          <div class="message__inner">
            <span class="message__icon icon icon-reject"></span>
            <div class="text-size--13 message__text">
              <p>An error happened. Please try again later.</p>
            </div>
          </div>
        </div>
        <!-- message error-end-->
        <ul class="dropdown__list">
          <li :data-value="item.value" v-for="item in items" @click.stop="echoSelectedValue(item.value)">
            <a :class="['media', 'media--small', {'active': item.active}]" href="#nogo">
              <div class="media__body">
                <div class="text-truncate">
                  {{item.label}}
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
const EMPTY_VALUE = -1;
const EMPTY_STRING = '';
const DEFAULT_PLACEHOLDER = 'Please select!';

var seed = 0;

export default {
  name: 'taurus-select-dropdown',
  data: function () {
    return {
      listData: [],
      disableTag: false,
      isOpen: false,
      isError: false
    };
  },
  props: {
    list: {
      default: function () {
        return [];
      },
      required: true,
      type: Array
    },
    rename: {
      default: function () {
        return {
          label: 'label',
          value: 'value'
        };
      },
      type: Object
    },
    defaultValue: {
      type: [String, Number],
      default: EMPTY_STRING
    },
    emptylabel: {
      default: EMPTY_STRING,
      type: String
    },
    placeholder: {
      default: DEFAULT_PLACEHOLDER,
      type: String
    },
    size: {
      default: EMPTY_STRING,
      type: String
    },
    disabled: {
      default: false,
      type: Boolean
    }
  },
  created: function () {
    var processedData = this._processResponseData(this.list, 'init');
    this.listData = processedData;
    this.disableTag = this.disabled;
    // 给document绑定click事件关闭dropList
    document.addEventListener('click', function () {
      if (this.isOpen) {
        // 列表关闭同时触发on-hide-panel的回调,处理相关操作
        this.$emit('on-hide-panel');
        this.isOpen = false;
      }
    }.bind(this), false);
  },
  computed: {
    selectedLabel: function () {
      var selectedObj = this._getSelectedData();
      return selectedObj ? selectedObj.label : this.emptylabel ? this.emptylabel : this.placeholder;
    },
    selectedValue: function () {
      var selectedObj = this._getSelectedData();
      return selectedObj ? selectedObj.value : this.emptylabel ? EMPTY_VALUE : 0;
    },
    nextId: function () {
      return 'tau_sel_dd_' + seed++;
    },
    items: {
      get: function () {
        return this.listData;
      },
      set: function (newValue) {
        this.listData = this._processResponseData(newValue, 'reload');
      }
    }
  },
  methods: {
    reload: function (data) {
      if (data instanceof Array && data.length > 0) {
        this.listData = this._processResponseData(data, 'reload');
      }
    },
    getValue: function () {
      return this.selectedValue;
    },
    getText: function () {
      return this.selectedLabel;
    },
    setValue: function (value) {
      this._setSelectedData(value);
    },
    clear: function () {
      if (this.isOpen) {
        this.isOpen = false;
        // 列表关闭同时触发on-hide-panel的回调,处理相关操作
        this.$emit('on-hide-panel');
      }
      this._clearData();
    },
    enable: function () {
      this.disableTag = false;
    },
    disable: function () {
      if (this.isOpen) {
        this.isOpen = false;
        // 列表关闭同时触发on-hide-panel的回调,处理相关操作
        this.$emit('on-hide-panel');
      }
      this.disableTag = true;
    },
    showDropList: function () {
      // 如果是禁用状态，禁止点击并且不展示DropList(为了兼容IE9,10)
      if (this.disableTag) {
        return;
      }
      if (this.isOpen) {
        this.isOpen = false;
        // 列表关闭同时触发on-hide-panel的回调,处理相关操作
        this.$emit('on-hide-panel');
      } else {
        this.isOpen = true;
        // 列表展示同时触发on-show-panel的回调,处理相关操作
        this.$emit('on-show-panel');
      }
    },
    echoSelectedValue: function (currentValue) {
      for (var i = 0; i < this.items.length; i++) {
        var listItem = this.items[i];
        if (currentValue === listItem['value']) {
          listItem['active'] = true;
        } else {
          listItem['active'] = false;
        }
      }
      // 标志isOpen为false，关闭dropList
      this.isOpen = false;
      // 列表关闭同时触发on-hide-panel的回调,处理相关操作
      this.$emit('on-hide-panel');
    },
    _processResponseData: function (data, status) {
      var tempArr = [];
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          var tempObj = {};
          tempObj['label'] = data[i][this.rename.label];
          tempObj['value'] = data[i][this.rename.value];
          // 判断状态，当状态为init时默认值有效，当状态为reload时默认值无效
          switch (status) {
            case 'init':
              if (data[i][this.rename.value] === this.defaultValue) {
                tempObj['active'] = true;
              } else {
                tempObj['active'] = false;
              }
              break;
            case 'reload':
              tempObj['active'] = false;
              break;
          }
          tempArr.push(tempObj);
        }
        if (this.emptylabel) {
          if (this.defaultValue) {
            tempArr.unshift({
              label: this.emptylabel,
              value: EMPTY_VALUE,
              active: false
            });
          } else {
            tempArr.unshift({
              label: this.emptylabel,
              value: EMPTY_VALUE,
              active: true
            });
          }
        }
        this.isError = false;
      } else {
        this.isError = true;
        return;
      }
      return tempArr;
    },
    _getSelectedData: function () {
      var selectedObj;
      if (this.items && this.items.length > 0) {
        for (var i = 0; i < this.items.length; i++) {
          if (this.items[i]['active']) {
            selectedObj = this.items[i];
          }
        }
      }
      return selectedObj;
    },
    _setSelectedData: function (value) {
      var selectedObj;
      if (this.items && this.items.length > 0) {
        for (var i = 0; i < this.items.length; i++) {
          if (Number(this.items[i]['value']) === Number(value)) {
            this.items[i]['active'] = true;
            // $set方法设置激活项实时更新DOM
            selectedObj = Object.assign({}, this.items[i]);
          } else {
            this.items[i]['active'] = false;
            // $set方法设置未激活项实时更新DOM
          }
        }
      } else {
        return;
      }
      return selectedObj;
    },
    _clearData: function () {
      if (this.items && this.items.length > 0) {
        for (var i = 0; i < this.items.length; i++) {
          if (this.items[i]['value'] === EMPTY_VALUE) {
            this.items[i]['active'] = true;
          } else {
            this.items[i]['active'] = false;
          }
        }
      }
    }
  },
  watch: {
    selectedValue: function (newValue, oldValue) {
      this.$emit('on-value-change', newValue, oldValue);
    }
  }
};
</script>
