<template>
  <RouterView>
    <template #default="{ Component, route }">
      <div class="moveableBox">
        <transition :name="getTransitionName" mode="out-in" appear>
          <!-- <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>  v-else-->

          <component :is="Component" :key="route.fullPath" />
        </transition>

        <!-- <div
          class="manualList"
          type="primary"
          v-if="showManualBtn"
          @click.stop.prevent="openManual"
        >
          操作手册
        </div>
        <n-drawer
          v-model:show="active"
          :width="402"
          placement="right"
          :append-to-body="true"
        >
          <n-drawer-content title="操作手册" closable>
            <div class="drawerWrap">
              <n-form ref="formRef" :model="model" inline label-placement="left">
                <n-form-item path="keyword" label="关键字">
                  <n-input
                    v-model:value="model.keyword"
                    clearable
                    placeholder="请输入关键字"
                  />
                </n-form-item>
                <n-form-item>
                  <n-button secondary @click="getMUal()" type="error">搜索</n-button>
                </n-form-item>
              </n-form>
              <div
                v-for="(item, index) in list"
                :key="index"
                class="line"
                @click="openDetail(item)"
              >
                <n-grid :x-gap="12" :cols="12">
                  <n-gi :span="11">{{ item.name }}</n-gi>
                  <n-gi :span="1">
                    <n-icon size="20"> <RightOutlined /> </n-icon
                  ></n-gi>
                </n-grid>
              </div>
            </div>
          </n-drawer-content>
          <n-drawer v-model:show="showInner" :width="402">
            <n-drawer-content closable>
              <template #header>
                <div>
                  <h4 class="title">{{ activeRow.menu }}</h4>
                  <p class="submitTitle">更新时间: {{ activeRow.updateTime }}</p>
                </div>
              </template>
              <n-tabs v-model:value="activeName" type="card" tab-style="min-width: 80px;">
                <n-tab-pane tab="操作流程" name="first">
                  <div class="optionWrap">
                    <div class="ql-editor" v-html="activeRow.opFlow"></div>
                  </div>
                </n-tab-pane>
                <n-tab-pane tab="功能规则" name="second">
                  <div class="optionWrap">
                    <div class="ql-editor" v-html="activeRow.funRule"></div></div
                ></n-tab-pane>
              </n-tabs>
            </n-drawer-content>
          </n-drawer>
        </n-drawer> -->
      </div>
    </template>
  </RouterView>
</template>

<script lang="ts">
import { defineComponent, computed, unref, onMounted, watch, ref } from 'vue'
// import Moveable from 'moveable'
// import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
// import { getSysManualList, getSysManual } from "@/views/operation-manual/api";
// import { useRoute, useRouter } from 'vue-router'
// import { NButton } from 'naive-ui'
import { RightOutlined } from '@vicons/antd'
export default defineComponent({
  name: 'MainView',
  components: { RightOutlined },
  props: {
    notNeedKey: {
      type: Boolean,
      default: false
    },
    animate: {
      type: Boolean,
      default: true
    }
  },
  setup() {
    // const route = useRoute();
    // const showManualBtn = ref(false);
    // const active = ref(false);
    // const showInner = ref(false);
    // const model = ref({
    //   keyword: "",
    // } as any);
    // const activeRow = ref(null as any);
    // const list = ref([] as any);
    // const manualList = ref([] as any);
    // const activeName = ref("first");
    const { getIsPageAnimate, getPageAnimateType } = useProjectSetting()
    // const asyncRouteStore = useAsyncRouteStore();
    // 需要缓存的路由组件
    // const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);

    const getTransitionName = computed(() => {
      return unref(getIsPageAnimate) ? unref(getPageAnimateType) : ''
    })

    // const getManuals = async () => {
    //   try {
    //     const res = await getSysManualList({});
    //     manualList.value = res.data;
    //     showManualBtn.value = manualList.value.indexOf(route.meta.id) != -1;
    //   } catch (e) {
    //     console.log(e);
    //   }
    // };
    // watch(
    //   () => route.path,
    //   (value: any) => {
    //     showManualBtn.value = manualList.value.indexOf(route.meta.id) != -1;
    //   }
    // );
    onMounted(() => {
      // getManuals();
      // setMoveable();
    })
    // const setMoveable = () => {
    //   const moveable = new Moveable(document.querySelector(".moveableBox") as any, {
    //     target: document.querySelector(".manualList") as any,
    //     // If the container is null, the position is fixed. (default: parentElement(document.body))
    //     container: document.querySelector(".moveableBox") as any,
    //     // snappable: true,
    //     // bounds: {"left":100,"top":100,"right":100,"bottom":100},
    //     draggable: true,
    //     resizable: false,
    //     scalable: false,
    //     rotatable: false,
    //     warpable: false,
    //     pinchable: false, // ["resizable", "scalable", "rotatable"]
    //     origin: false,
    //     keepRatio: false,
    //     // Resize, Scale Events at edges.
    //     edge: false,
    //     throttleDrag: 0,
    //     throttleResize: 0,
    //     throttleScale: 0,
    //     throttleRotate: 0,
    //   });

    //   moveable
    //     .on("dragStart", ({ target, clientX, clientY }) => {
    //       console.log("onDragStart", target);
    //     })
    //     .on(
    //       "drag",
    //       ({
    //         target,
    //         transform,
    //         left,
    //         top,
    //         right,
    //         bottom,
    //         beforeDelta,
    //         beforeDist,
    //         delta,
    //         dist,
    //         clientX,
    //         clientY,
    //       }) => {
    //         let mainWidth =
    //           parseInt(
    //             window.getComputedStyle(document.querySelector(".moveableBox") as any)
    //               .width
    //           ) - 20;
    //         let mainHeight =
    //           parseInt(
    //             window.getComputedStyle(document.querySelector(".moveableBox") as any)
    //               .height
    //           ) - 100;

    //         if (left < 0) {
    //           left = 0;
    //         }
    //         if (top < 0) {
    //           top = 0;
    //         }
    //         if (right < 0) {
    //           right = 0;
    //         }
    //         if (bottom < 0) {
    //           bottom = 0;
    //         }
    //         if (left > mainWidth) {
    //           left = mainWidth;
    //         }
    //         if (top > mainHeight) {
    //           top = mainHeight;
    //         }
    //         target!.style.left = `${left}px`;
    //         target!.style.top = `${top}px`;
    //         console.log(
    //           `onDrag left${left}, top",  ${top}mainWidth,${mainWidth},mainHeight,${mainHeight}`
    //         );

    //         // console.log("onDrag translate", dist);
    //         // target!.style.transform = transform;
    //       }
    //     )
    //     .on("dragEnd", async ({ target, isDrag, clientX, clientY }) => {
    //       // transcodingConfig.streamId = basicStore.roomId+'';
    //     });
    // };
    // const openManual = () => {
    //   console.log("点击");
    //   // getMUal();
    //   active.value = true;
    // };

    // const openDetail = (row: any) => {
    //   activeRow.value = row;
    //   showInner.value = true;
    // };

    // const getMUal = async () => {
    //   try {
    //     const res = await getSysManual({
    //       page: 1,
    //       rows: 9999,
    //       menuId: route.meta.id,
    //       keyword: model.value.keyword,
    //     });
    //     list.value = res.data.rows;
    //   } catch (e) {
    //     console.log(e);
    //   }
    // };
    return {
      getTransitionName
      // openManual,
      // active,
      // model,
      // getMUal,
      // list,
      // openDetail,
      // showInner,
      // activeRow,
      // activeName,
      // showManualBtn,
    }
  }
})
</script>

<style lang="less" scoped>
:deep(.line) {
  height: 40px;
  line-height: 40px;
  color: rgba(#666, 0.9);
  padding: 0 17px;
  overflow: hidden;
  // background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
  border-radius: 4px;
  &:hover {
    background-color: transparent;
    color: var(--van-primary-color);
    font-weight: 600;
    &::after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: var(--van-primary-color);
      opacity: 0.05;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.moveableBox {
  min-height: 500px;
  position: relative;

  :deep(.moveable-line) {
    background-color: transparent !important;
  }

  .manualList {
    z-index: 1000;
    top: 50px;
    right: 5px;
    position: absolute;
    cursor: pointer;
    background-color: #4098fc;
    color: #fff;
    border-radius: 10px;
    width: 25px;
    padding: 5px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
.title {
  padding: 0 20px;
}
.submitTitle {
  margin: 10px 0;
  font-size: 12px;
  padding: 0 20px;
  color: #999;
}

.optionWrap {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 8px;
  :deep(img) {
    width: 100%;
    cursor: pointer;
  }
  :deep(p) {
    line-height: 28px;
    font-size: 14px !important;
  }
  :deep(.ql-video) {
    width: 100%;
  }
}
</style>
