<template>
  <draggable
    class="drag-area"
    tag="div"
    :list="tasks"
    :group="{ name: 'g1' }"
    handle=".handle-icon"
    item-key="key"
    :onEnd="onEnd"
    :animation="150"
  >
    <template #item="{ element }">
      <div class="item">
        <div>
          <div :class="['toggle-box', { 'toggle-box-btn': !element.show }]">
            <div class="toggle-left-content">
              <q-icon name="fa-solid fa-bars" class="handle-icon" />
              <input type="text" class="input-control" v-model="element.name" />
            </div>
            <div class="toggle-right-content">
              <q-btn flat dense label="同级添加" @click="addItem(element)" />
              <q-btn flat dense label="子级添加" @click="addNest(element)" />
              <q-btn
                flat
                dense
                label="删除"
                style="margin-right: 20px"
                @click="delItem(element)"
              />
              <q-icon
                v-if="!isEmpty(element.tasks)"
                name="bi-chevron-down"
                :class="[
                  'expansion-icon',
                  { 'expansion-icon-hide': !element.show },
                ]"
                @click="element.show = !element.show"
              />
            </div>
          </div>
          <q-slide-transition>
            <div v-show="element.show" class="content">
              <div
                :class="[
                  'placeholder',
                  { 'placeholder-last': isEmpty(element.tasks) },
                ]"
              ></div>
              <nested-draggable
                v-show="element.show"
                :tasks="element.tasks"
                @onEnd="onEnd"
                @addItem="addItem"
                @addNest="addNest"
                @delItem="delItem"
              />
            </div>
          </q-slide-transition>
        </div>
      </div>
    </template>
  </draggable>
</template>
<script>
// import { ref } from 'vue';
import { isEmpty } from 'src/common/utils';
import draggable from 'vuedraggable';
export default {
  name: 'nested-draggable',
  props: {
    tasks: {
      required: true,
      type: Array,
    },
  },
  components: {
    draggable,
  },

  setup(props, ctx) {
    const addItem = (data) => {
      ctx.emit('addItem', data);
    };
    const addNest = (data) => {
      ctx.emit('addNest', data);
    };
    const delItem = (data) => {
      ctx.emit('delItem', data);
    };
    // 拖拽结束
    const onEnd = (data) => {
      ctx.emit('onEnd', data);
    };
    return {
      isEmpty,
      addItem,
      addNest,
      delItem,
      onEnd,
    };
  },
};
</script>
<style scoped lang="scss">
.drag-area {
  // border: 1px solid red;
}
.item {
  // outline: 1px solid rgba(0, 0, 0, 0.035);
  // background-color: pink;
  background-color: rgba(0, 0, 0, 0.035);
  margin: 10px 0;
  padding-left: 10px;
  margin-left: 20px;
  margin-top: 10px;
  transition: height 0.3s;
}
.toggle-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  // padding-bottom: 6px;
  padding-right: 10px;
}

.toggle-box-btn {
  padding-bottom: 6px;
}

.toggle-left-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: 10px;
}
.toggle-right-content {
  display: grid;
  grid-template-columns: 70px 70px 60px 30px;
  align-items: center;
}
.handle-icon {
  font-size: 18px;
  box-sizing: border-box;
  display: inline-block;
  // border: 1px solid red;
  cursor: grab;
}
.expansion-icon {
  font-size: 16px;
  cursor: pointer;
  transform: rotate(180deg);
  transition: transform 0.3s;
}
.expansion-icon-hide {
  transform: rotate(0);
  transition: transform 0.3s;
}

.content {
  // height: 46px;
  // background-color: pink;
}
.placeholder {
  height: 20px;
  // background-color: pink;
}
.placeholder-last {
  height: 6px;
  // background-color: pink;
}
.input-control {
  outline-style: none;
  border: 1px solid rgba(0, 0, 0, 0.035);
  border-radius: 3px;
  height: 32px;
  padding: 0 6px;

  &:focus {
    border-color: $primary;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $primary-1;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $primary-1;
  }
}
</style>
