<template>
  <Draggable
      class="flex-wrap el-input-box"
      v-model="dataList"
      v-bind="{
        draggable: '.el-input-box__item',
        disabled: !isDraggable || !edited || disabled,
        ...draggableProps
      }"
      @update="updateDataListSort"
      @change="changeDataListSort"
      @start="startDrag"
      @end="endDrag"
    >
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="flex-start-center mr-16 mb-16 el-input-box__item"
        :class="{ move: isDraggable && edited && !disabled, relative: Boolean(item.mark), 'overflow-hidden': Boolean(item.mark) }"
        :style="{ width: `${width}px`, height: `${height}px`}"
      > 
        <div class="absolute text-white text-center text-12" v-if="Boolean(item.mark)" :style="{
          'height':'18px',
          'line-height': '18px',
          'width': '56px',
          'background': '#053DC8',
          'transform': 'rotate(45deg) scale(0.9)',
          'top': '4px',
          'right': '-17px'
        }">{{ item.mark }}</div>      
        <div class="w-full flex-between-center" v-if="!item.isEdit">
          <div class="flex-start-center ellipsis el-input-box__label">
            <slot name="icon" :item="item" :index="index">
              <div class="el-input-box__icon mr-8"></div>
            </slot>
            <el-color-select
              class="mr-8"
              v-if="showColor"
              v-model="item[props.color]"
              :show-arrow="true"
              :data="colorList"
              @change="(color) => changeColor(color, item)"
              :disabled="disabled"
            ></el-color-select>
            <slot name="other" :item="item" :index="index"></slot>
            <div
              class="text-14 ellipsis"
              :title="item[props.label]"
            >{{ item[props.label] }}</div>
          </div>
          <div
            class="el-input-box__operation"
            v-if="!item[props.disabled] && !disabled"
          >
            <slot name="operation" :item="item" :index="index">
              <i
                class="el-icon-edit text-18-tip pointer"
                @click="handleEdit(item)"
              ></i>
              <i
                v-if="!secondPrompt && !isAllDelete"
                class="el-icon-delete text-18-tip pointer ml-16"
                @click="handleDel(index, item)"
              ></i>
              <el-popconfirm
                v-if="secondPrompt && !isAllDelete"
                confirmButtonText="删除"
                cancelButtonText="取消"
                icon="el-icon-warning"
                :title="secondPromptContents.title"
                :content="secondPromptContents.remark"
                width="246"
                @onConfirm="handleDel(index, item)"
              >
                <i
                  class="el-icon-delete text-18-tip pointer ml-16"
                  slot="reference"
                  @click="handleBtn(index, item)"
                ></i>
              </el-popconfirm>
            </slot>
          </div>
        </div>
        <template v-else>
          <el-input
            class="ml-8"
            v-model="item[props.label]"
            :maxlength="maxlength"
            :clearable="false"
          ></el-input>
          <i
            class="el-icon-check text-bold pointer ml-8"
            @click="handleSave(item)"
          ></i>
          <el-divider direction="vertical"></el-divider>
          <i
            class="el-icon-close text-bold pointer"
            @click="handleCancel(item, index)"
          ></i>
        </template>
      </div>
      <template v-if="datalength && datalength > 0">
        <div 
          v-for="(item,index) in (datalength - dataList.length)" 
          :key="'no' + index" 
          class="flex-start-center mr-16 mb-16 el-input-box__item__fill"
          :style="{ width: `${width}px`, height: `${height}px`}"
        >
        </div>
      </template>
      <slot name="addBtn"></slot>
  </Draggable>
</template>

<script>
import Draggable from 'vuedraggable';
const defaultColorList = [
  {
    color: '',
    name: '不使用'
  },
  {
    color: '#6EB818',
    name: '绿色'
  },
  {
    color: '#858C3E',
    name: '茶绿色'
  },
  {
    color: '#3D704E',
    name: '浓绿'
  },
  {
    color: '#2B5293',
    name: '琉璃蓝'
  },
  {
    color: '#08979C',
    name: '青色'
  },
  {
    color: '#F8C623',
    name: '黄色'
  },
  {
    color: '#C9A222',
    name: '金黄'
  },
  {
    color: '#705392',
    name: '紫色'
  },
  {
    color: '#9E2D69',
    name: '红紫色'
  },
  {
    color: '#CF1322',
    name: '红色'
  },
  {
    color: '#DF543B',
    name: '朱红色'
  },
  {
    color: '#E26078',
    name: '山茶粉'
  },
  {
    color: '#F2BAB7',
    name: '红梅粉'
  }
];
export default {
  name: 'ElInputBox',
  components: {
    Draggable
  },
  props: {
    draggableProps: {
      type: Object
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    datalength: {
      type: Number
    },
    isDraggable: {
      type: Boolean,
      default: true
    },
    maxlength: {
      type: Number,
      default: 10
    },
    secondPrompt: {
      type: Boolean,
      default: true
    },
    secondPromptContents: {
      type: Object,
      default() {
        return {
          title: '确定要删除吗？',
          remark: '删除后不再显示该项目，已添加的数据不删除。'
        };
      }
    },
    showColor: {
      type: Boolean,
      default: false
    },
    colorList: {
      type: Array,
      default() {
        return defaultColorList;
      }
    },
    handleItemEdit: {
      type: Function
    },
    props: {
      type: Object,
      default() {
        return {
          label: 'label',
          id: 'id',
          disabled: 'disabled',
          color: 'color'
        };
      }
    },
    allDelete: {
      type: Boolean,
      default: false
    },
    emptyPrompt: {
      type: String,
      default: '请输入项目名称！'
    },
    width: {
      type: Number,
      default: 172
    },
    height: {
      type: Number,
      default: 52
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataList: this.data || [],
      tempData: '', // 编辑时的暂存数据
      edited: true // false正在编辑 true编辑完成
    };
  },
  computed: {
    isAllDelete() {
      return !this.allDelete && this.dataList.length === 1;
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.dataList = newVal;
      },
      immediate: true
    }
  },
  methods: {
    startDrag(evt) {
      this.$emit('startDrag', evt);
    },
    endDrag(evt) {
      this.$emit('endDrag', evt);
    },
    updateDataListSort() {
      this.$emit('onUpdateSort', this.dataList);
    },
    changeDataListSort(evt) {
      if (evt && evt.moved) {
        const changeItems = {
          ...evt.moved.element,
          newIndex: evt.moved.newIndex,
          oldIndex: evt.moved.oldIndex
        };
        this.$emit('onChangeSort', this.dataList, changeItems);
      }
      this.$emit('draggableSort', this.dataList, evt);
    },
    handleSave(item) {
      if (!item[this.props.label]) {
        this.$message.warning(this.emptyPrompt);
        return;
      }
      this.edited = true;
      this.$emit('onSave', item);
    },
    handleCancel(item, index) {
      this.edited = true;
      this.$set(item, 'isEdit', false);
      if (item[this.props.id] || item[this.props.id] === 0) {
        this.$set(item, this.props.label, this.tempData);
      } else {
        this.dataList.splice(index, 1);
      }
      this.$emit('onCancel', item);
    },
    handleEdit(item) {
      if (this.handleItemEdit && typeof this.handleItemEdit === 'function') {
        this.handleItemEdit(item);
        return;
      }
      this.resetItems();
      this.edited = false;
      this.tempData = item[this.props.label];
      this.$set(item, 'isEdit', true);
      this.$emit('onEdit', item);
    },
    handleDel(index, item) {
      if (this.secondPrompt) {
        this.resetItems();
      }
      this.$emit('onDelete', item, index);
    },
    handleBtn(index, item) {
      this.resetItems();
      this.$emit('onDeforeDelete', item, index);
    },
    resetItems() {
      const editingItems = this.dataList.find(e => e.isEdit);
      if (!editingItems) {
        return;
      }
      if (editingItems[this.props.id] || editingItems[this.props.id] === 0) {
        editingItems.isEdit = false;
        editingItems[this.props.label] = this.tempData;
      } else {
        const len = this.dataList.length - 1;
        this.dataList.splice(len, 1);
      }
    },
    changeColor(color, item) {
      this.$emit('onColor', item, color);
    }
  }
};
</script>
