<template>
  <div
    style="background-color: #f9f9f9"
    :style="{
      transform:
        tracingDetailState?.transform.value === true
          ? `translateX(128.5px)`
          : 'translateX(0px)',
    }"
    class="px-10 flex editTool justify-center"
  >
    <syScrollBar height="100%">
      <div
        style="width: calc(100vw - 600px)"
        class="flex-shrink-0 h-full flex flex-col pb-8"
      >
        <TraceProofEditHeader
          class="flex-shrink-0"
          :title="title"
          @update:title="$emit('update:title', $event)"
        ></TraceProofEditHeader>
        <div>
          <Draggable
            tag="div"
            :list="rootUnitList"
            handle=".moveUnit"
            ghost-class="draggable-ghost"
            item-key="id"
          >
            <template #item="{ element: unitData, index: indexOfList }">
              <div class="list-group-item">
                <root-unit
                  :key="unitData.id"
                  :unit="unitData"
                  :setUnit="(value: any) => changeUnit(indexOfList, value)"
                  @del="deleteItem"
                  @addNextlevel="showAddChildDialog"
                  @modifyTitle="modifyTitleShow"
                  :selectedItem="selectedEditItem"
                  :setSelectedItem="setSelectedItem"
                  @selected="handleSelectedProperty"
                  @modifyForms="showModifyForms"
                  :switchPosition="switchPosition"
                />
              </div>
            </template>
          </Draggable>
          <AddFirstLevelBox
            class="mt-2.5"
            @click="showAddRootDialog"
          ></AddFirstLevelBox>
        </div>
      </div>
    </syScrollBar>
    <div style="width: 228px; margin-left: 29px" class="flex-shrink-0">
      <SetBar
        :show-upload="route.name === 'tracingDetail'"
        :selectTarget="selectedEditItem"
        :setSelectedItem="setSelectedItem"
        @select-type="$emit('select-type', $event)"
        @uploadBanner="$emit('uploadBanner')"
      ></SetBar>
    </div>
  </div>
</template>

<script setup lang="ts">
import AddFirstLevelBox from "./AddFirstLevelBox.vue";
import RootUnit from "../../../newEditTemplate/RootUnit.vue";
import SetBar from "../../../newEditTemplate/SetBar.vue";
import { Unit } from "../../../newEditTemplate/types2";
import Draggable from "vuedraggable/src/vuedraggable";
import { syScrollBar } from "cqk-sy-ui";
import TraceProofEditHeader from "./TraceProofEditHeader.vue";
import { inject, Ref } from "vue";

defineProps<{
  route: any;
  title: string;
  showAddRootDialog: () => void;
  rootUnitList: Unit[];
  deleteItem: (data?: any) => void;
  changeUnit: (indexOfList: number, value: any) => void;
  showAddChildDialog: (data?: any) => void;
  modifyTitleShow: () => void;
  selectedEditItem: any;
  setSelectedItem: (v: any) => void;
  handleSelectedProperty: (i: any) => void;
  showModifyForms: () => void;
  switchPosition: (id1: string, id2: string) => void;
}>();

defineEmits(["update:title", "select-type", "uploadBanner"]);

const tracingDetailState = inject<{
  transform: Ref<boolean>;
}>("tracingDetail");
</script>

<style lang="scss">
.draggable-ghost {
  .root_unit {
    border: 2px dashed gray;
    .title {
      box-sizing: border-box;
    }
  }
}
.editTool {
  * {
    box-sizing: border-box;
  }
}
</style>
