<template>
  <draggable
    class="drag-area"
    tag="div"
    :scroll="true"
    :list="tasks"
    :group="{ name: 'g1' }"
    :item-key="itemKey"
    :onEnd="onEnd"
    :animation="150"
  >
    <template #item="{ element }">
      <div
        :class="[
          'drag-area-item',
          `dragareaitem-${element.test_index}`,
          { 'has-left-line': hasLeftLine(element.test_index) },
        ]"
      >
        <span
          class="has-left-vertical-line"
          :class="{ 'has-left-vertical-line-last': element.lastChild }"
        ></span>
        <div
          class="drag-area-item-conten"
          :style="{
            paddingLeft: isEmpty(element[childrenKey]) ? '6px' : '0px',
          }"
        >
          <div class="drag-area-item-conten-left">
            <q-icon
              v-if="!isEmpty(element[childrenKey])"
              @click="element.show = !element.show"
              color="grey"
              name="bi-caret-down-fill"
              class="handle"
              :style="{
                transform: element.show ? 'rotate(0deg)' : 'rotate(-90deg)',
              }"
            />
            <input
              type="text"
              class="item-conten-input"
              v-model="element[labelKey]"
            />
          </div>
          <div class="actions">
            <q-btn
              color="grey"
              dense
              flat
              icon="bi-hdd-stack-fill"
              @click="addItem(element)"
            >
              <q-tooltip>同级添加</q-tooltip>
            </q-btn>
            <q-btn
              color="grey"
              dense
              flat
              icon="bi-hdd-network-fill"
              @click="addNest(element)"
            >
              <q-tooltip>子级添加</q-tooltip>
            </q-btn>
            <q-btn
              color="grey"
              dense
              flat
              icon="bi-trash"
              @click="delItem(element)"
            >
              <q-tooltip>删除</q-tooltip>
            </q-btn>
          </div>
        </div>
        <q-slide-transition>
          <nested-draggable
            v-show="element.show"
            :tasks="element[childrenKey]"
            :item-key="itemKey"
            :children-key="childrenKey"
            :label-key="labelKey"
            @onEnd="onEnd"
            @addItem="addItem"
            @addNest="addNest"
            @delItem="delItem"
          />
        </q-slide-transition>
      </div>
    </template>
  </draggable>
</template>
<script>
import { computed } from 'vue';
import { isEmpty } from 'src/common/utils';
import draggable from 'vuedraggable';
export default {
  name: 'nested-draggable',
  props: {
    tasks: {
      required: true,
      type: Array,
    },
    itemKey: {
      required: true,
      type: String,
    },
    childrenKey: {
      required: true,
      type: String,
    },
    labelKey: {
      required: true,
      type: String,
    },
  },
  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);
    };
    const hasLeftLine = computed(() => (str) => {
      let falg;
      const leng = str.split('-');
      if (leng.length > 1) {
        falg = true;
      } else {
        falg = false;
      }
      return falg;
    });
    return {
      isEmpty,
      addItem,
      addNest,
      delItem,
      onEnd,
      hasLeftLine,
    };
  },
};
</script>
<style scoped lang="scss">
.drag-area {
  //   min-width: 600px;
  // min-height: 20px;
  overflow: auto;
  /* outline: 1px dashed; */

  // border: 1px solid red;

  padding-left: 40px;
  & > :nth-child(1) {
    margin-top: 10px;
  }
  .drag-area-item {
    position: relative;

    // min-width: 600px;
    // outline: 1px solid rgba(0, 0, 0, 0.125);
    margin-bottom: 10px;
    // background-color: pink;

    .drag-area-item-conten {
      height: 40px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.075);
      // background-color: pink;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;

      .drag-area-item-conten-left {
        // border: 1px solid purple;
        // background-color: purple;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .item-conten-input {
        // display: inline-block;
        // background-color: #fff;
        // display: flex;
        // min-width: 180px;
        // align-items: center;

        outline-style: none;
        border: 1px solid rgba(0, 0, 0, 0.075);
        border-radius: 3px;
        height: 32px;
        padding: 0 8px;
        &:focus {
          // width: fit-content;
          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;
        }
      }

      .actions {
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        column-gap: 10px;
      }
    }
  }
  .has-left-line {
    &::before {
      content: '';
      position: absolute;
      top: 18px;
      left: -40px;
      box-sizing: border-box;

      width: 36px;
      border-top: 1px solid rgba(0, 0, 0, 0.125);
    }
  }
  .has-left-vertical-line {
    display: inline-block;
    position: absolute;
    box-sizing: border-box;
    // width: 50px;
    height: calc(100% + 10px);
    left: -40px;
    top: -10px;
    border-left: 1px solid rgba(0, 0, 0, 0.125);
  }
  .has-left-vertical-line-last {
    // border-color: green;
    height: 30px;
  }

  .handle {
    float: left;
    padding: 4px 8px;
    font-size: 16px;
    cursor: pointer;
    // border: 1px solid red;
    transition: transform 0.3s;
  }
}
</style>
