<template>
  <div class="qf-img-group">
    <div class="qf-img" v-for="img in value">
      <img :src="img.url"/>
      <qf-font-icon name="ic-ic_clean" class="qf-img-delete" @click="onDelete(img)" v-if="deletable"></qf-font-icon>
      <div class="qf-img-move" @click="onSort(img)" v-if="sortable">{{ t('qf.imagegroup.move') }}</div>
    </div>
  </div>
</template>
<script>
import QfFontIcon from '../../font-icon';
import LocaleMixin from '../../locale/mixin';

export default {
  mixins: [LocaleMixin],
  name: 'QfImgGroup',
  components: {
    QfFontIcon
  },
  props: {
    value: {
      type: Array,
      default: []
    },
    sortable: {
      type: Boolean,
      default: false
    },
    deletable: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    /*
    * 删除预览图
    */
    onDelete(img) {
      this.value.splice(this.value.findIndex(item => item.storageId === img.storageId), 1);
      this.$emit('input', this.value);
    },

    /*
    * 排序
    */
    onSort(img) {
      let index = this.value.findIndex(item => item.storageId === img.storageId);
      if (index) {
        let tmp = this.value.splice(index, 1);
        this.value.splice(index - 1, 0, tmp[0]);
        this.$emit('input', this.value);
      }
    }
  }
};
</script>
