<template>
  <div class="d-modify manage-set">
    <div class="d-title">组件管理</div>
    <div class="dec-border-box" v-for="(item, index) in list" :key="item.id">
      <div class="dec-flex-list middle" style="margin: 0">
        <span class="d-left d-icon">
          <a-icon type="align-right" />
        </span>
        <div class="d-right">
          {{ index + 1 + "." + item.name }}
        </div>
        <span @click="upHandler(index)" class="d-opt d-left">
          <a-icon type="arrow-up" />
        </span>
        <span @click="downHandler(index)" class="d-opt d-left">
          <a-icon type="arrow-down" />
        </span>
        <span
          @click="confirmDel(index, $event)"
          class="d-opt d-left del-wrap"
          style="position: relative"
        >
          <a-icon type="delete" />
        </span>
      </div>
    </div>
    <div class="d-none" v-if="list.length == 0">无组件</div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  props: ["tab", "refresh"],
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.list = this.tab;
  },
  watch: {
    refresh: {
      deep: true,
      handler() {
        this.list = this.tab;
      },
    },
  },
  methods: {
    confirmDel(i, e) {
      const that = this;
      Vue.prototype.$decDelModalRef.show(e, "del-wrap", false);
      Vue.prototype.$decDelModalRef.$once("promise", (res) => {
        if (res.success) {
          that.list.splice(i, 1);
          that.$emit("opt", { flag: "del", i });
        }
      });
    },
    downHandler(i) {
      const last = this.list.length - 1;
      if (i < last) this.$emit("opt", { flag: "down", i });
    },
    upHandler(i) {
      if (i != 0) this.$emit("opt", { flag: "up", i });
    },
  },
};
</script>
