<template>
  <div class="es-selection">
    <el-scrollbar class="es-scrollbar">
      <el-radio-group
        v-if="!multiple"
        v-bind="$attrs"
        size="small"
        v-on="$listeners"
        v-model="selectes"
      >
        <el-radio
          v-for="(item, index) in data"
          :key="index"
          v-show="item.disabled ? showDisabled : true"
          v-bind="getprops($attrs, item)"
          :label="isObject || typeof item == 'string' ? item : item[valueKey]"
          :disabled="isDisabled(item)"
          :class="{ 'es-radio-delete': genre === 'delete' }"
          :value-key="valueKey"
          :tooltip="showTooltip ? item[tipKey] : undefined"
        >
          {{ typeof item == 'string' ? item : getLabel(item) }}</el-radio
        >
      </el-radio-group>
      <el-checkbox-group
        v-else
        v-bind="$attrs"
        :max="max"
        size="small"
        v-on="$listeners"
        v-model="selectes"
        ref="sortable"
      >
        <el-checkbox
          v-for="(item, index) in data"
          :key="index"
          v-show="item.disabled ? showDisabled : true"
          v-bind="getprops($attrs, item)"
          :label="isObject || typeof item == 'string' ? item : item[valueKey]"
          :disabled="isDisabled(item)"
          :class="{ 'es-checkbox-delete': genre === 'delete' }"
          :value-key="valueKey"
          :tooltip="showTooltip ? item[tipKey] : undefined"
        >
          {{ typeof item == 'string' ? item : getLabel(item) }}
          <i v-show="genre === 'delete'" class="el-icon-circle-close"></i>
        </el-checkbox>
      </el-checkbox-group>
    </el-scrollbar>
  </div>
</template>
<script>
import Sortable from 'sortablejs';
import util from 'eoss-ui/src/utils/util.js';
export default {
  name: 'Selection',
  props: {
    value: [String, Array, Object],
    showDisabled: {
      type: Boolean,
      default: true
    },
    genre: String,
    valueKey: {
      type: String,
      default: 'showid'
    },
    labelKey: {
      type: String,
      default: 'showname'
    },
    tipKey: {
      type: String,
      default: 'pathname'
    },
    showTooltip: {
      type: Boolean,
      default: true
    },
    valueType: {
      type: String,
      default: 'object',
      validator: function (value) {
        return ['string', 'object'].includes(value);
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    multiple: {
      type: Boolean,
      default: true
    },
    max: Number,
    mix: Boolean,
    disableds: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    isObject() {
      if (
        this.selectes &&
        Array.isArray(this.selectes) &&
        this.selectes.length > 0 &&
        util.isObject(this.selectes[0])
      ) {
        return true;
      } else {
        if (this.valueType === 'object') {
          return true;
        } else {
          return false;
        }
      }
    },
    selectes: {
      get() {
        if (!this.multiple && this.value && this.value.length) {
          return this.value[0];
        }
        return this.value;
      },
      set(val) {
        return val;
      }
    }
  },
  mounted() {
    if (this.multiple && this.genre === 'delete') {
      this._sortable = new Sortable(this.$refs.sortable.$el, {
        animation: 150,
        onUpdate: this.handleSort
      });
    }
  },
  methods: {
    getLabel(res) {
      return res[this.labelKey]
        ? res[this.labelKey]
        : res.label || res[this.valueKey];
    },
    handleSort(res) {
      this.$emit('sort', res);
    },
    getprops(attrs, res) {
      return util.isObject(res) ? { ...attrs, ...res } : attrs;
    },
    isDisabled(res) {
      if (typeof res == 'string') {
        return false;
      }
      if (this.disableds && this.disableds.length > 0) {
        if (this.disableds.includes(res[this.valueKey])) {
          return true;
        }
      }
      return res.disabled;
    }
  },
  beforeDestroy() {
    if (this._sortable !== undefined) this._sortable.destroy();
  }
};
</script>
