<template>
  <a-modal
    :width="800"
    title="维护商品"
    v-model="visible"
    @ok="ok"
    @cancel="closeModal"
    class="dec-manage-modal"
  >
    <div class="table">
      <div class="item forbider">
        <span class="img"></span>
        <span class="name">商品名称</span>
        <span class="price">商品价格</span>
        <span class="shop">所属店铺</span>
        <span class="opt">操作</span>
      </div>
      <draggable
        v-model="editTable"
        chosen-class="chosen"
        force-fallback="true"
        group="people"
        animation="1000"
      >
        <transition-group>
          <div class="item" v-for="(item, index) in editTable" :key="item.id">
            <span class="img dec-truncate">
              <img :src="decImgDomain(item.productImg)" alt="img" />
            </span>
            <span class="name dec-truncate">{{ item.productName }}</span>
            <span class="price">{{ item.salePrice }}</span>
            <span class="shop dec-truncate">{{ item.shopName }}</span>
            <span class="opt">
              <a-icon @click="up(index)" type="arrow-up" />
              <a-icon @click="down(index)" type="arrow-down" />
              <a-icon @click="del(index)" type="delete" />
            </span>
          </div>
        </transition-group>
      </draggable>
    </div>
  </a-modal>
</template>
<script>
import draggable from "vuedraggable";
export default {
  inject: ["decAxios", "decImgDomain"],
  props: ["goods"],
  components: {
    draggable,
  },
  data() {
    return {
      visible: false, //可见控制
      editTable: [],
    };
  },
  created() {
    this.visible = true;
    this.editTable = this.goods;
  },
  methods: {
    up(i) {
      if (i > 0) {
        const up = this.editTable[i - 1];
        const down = this.editTable[i];
        this.$set(this.editTable, i - 1, down);
        this.$set(this.editTable, i, up);
      }
    },
    down(i) {
      const len = this.editTable.length - 1;
      if (i < len) {
        const up = this.editTable[i];
        const down = this.editTable[i + 1];
        this.$set(this.editTable, i, down);
        this.$set(this.editTable, i + 1, up);
      }
    },
    del(i) {
      this.editTable.splice(i, 1);
    },
    ok() {
      this.visible = false;
      this.$emit("close", this.editTable);
    },
    closeModal() {
      this.visible = false;
      this.$emit("close");
    },
  },
};
</script>
