<template>
  <div
    :class="
      imgAttrindex === 1
        ? 'pathDetail pathDetailback'
        : imgAttrindex === 2
        ? 'pathDetail path3'
        : 'pathDetail path2'
    "
    v-if="data?.list"
  >
    <div
      v-for="(item, i) in data?.list"
      :key="i"
      class="cha"
      :style="{
        top: `${imgAttr?.positions[i]?.top - (current === i ? 1 : 0)}px`,
        left: `${imgAttr?.positions[i]?.left - (current === i ? 11 : 0)}px`,
      }"
    >
      <div
        @click="toDetail(item, i)"
        :class="
          imgAttrindex === 1
            ? current === i
              ? 'nameClass currentBack'
              : 'nameClass nameBack'
            : imgAttrindex === 2
            ? current === i
              ? 'nameClass pathselect3'
              : 'nameClass pathnoselect3'
            : current === i
            ? 'nameClass pathselect2'
            : 'nameClass pathnoselect2'
        "
        :title="item.name"
        :style="{
          backgroundSize: '100%',
          width: `${
            imgAttrindex === 1
              ? current === i
                ? 100
                : 100
              : imgAttrindex === 2
              ? current === i
                ? 100
                : 100
              : current === i
              ? 100
              : 100
          }px`,
          height: `${
            imgAttrindex === 1
              ? current === i
                ? 75
                : 75
              : imgAttrindex === 2
              ? current === i
                ? 100
                : 100
              : current === i
              ? 75
              : 75
          }px`,
          lineHeight: '50px',
          color:
            imgAttrindex === 1
              ? '#FFF'
              : imgAttrindex === 2
              ? '#FFF'
              : imgAttrindex === 3 && current === i
              ? '#FFF'
              : '#000',
        }"
      >
        <div
          :style="{
            'margin-left':
              imgAttrindex === 1 ? '0px' : imgAttrindex === 2 ? '13px' : '17px',
            'margin-top':
              imgAttrindex === 1
                ? '0px'
                : imgAttrindex === 2
                ? '5px'
                : imgAttrindex === 3 && current === i
                ? '0px'
                : '-5px',
          }"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, defineProps, ref, watch } from "vue";
import { useRouter } from "vue-router/dist/vue-router";
import { ElLoading, ElMessage } from "element-plus";
import { ROUTERTASK_LIST } from "@/api/api";
import { usePage, useRequest } from "@/api/request";
const listheight = document.body.clientHeight - 300 + "px";
console.log("listheight", listheight);
const props = defineProps({
  value: String,
  img: String,
  routerId: {
    type: Number,
    default: null,
  },
  routerInfo: {
    type: Object,
    default: null,
  },
});
const router = useRouter();
const visiable = ref(true);

// const back = ref("require('@/assets/images/pathdetails/pathDetailBack.png')");
const imageAttrs = {
  路径图背景: {
    width: 1437,
    height: 594,
    positions: [
      { left: -21, top: 433 },
      { left: 170, top: 324 },
      { left: 28, top: 256 },
      { left: 200, top: 166 },
      { left: 160, top: 30 },
      { left: 297, top: -63 },
    ],
  },
  路径图2: {
    width: 1437,
    height: 594,
    positions: [
      { left: -26, top: 379 },
      { left: 91, top: 319 },
      { left: 28, top: 218 },
      { left: 114, top: 153 },
      { left: 40, top: 46 },
      { left: 184, top: -28 },
    ],
  },
  路径图3: {
    width: 1437,
    height: 594,
    positions: [
      { left: -21, top: 398 },
      { left: 145, top: 324 },
      { left: 44, top: 252 },
      { left: 144, top: 165 },
      { left: 53, top: 63 },
      { left: 180, top: -15 },
    ],
  },
};

const imgAttr = computed(() => {
  if (props.img) {
    return (
      imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] ||
      {}
    );
  }
});
const imgAttrindex = computed(
  () => {
    // console.log("props.img.includes1", props.img);
    // console.log("props.img", props.img.includes("路径图背景"));
    if (
      props.img &&
      Object.keys(imageAttrs).find((e) => props.img.includes(e)) ===
        "路径图背景"
    ) {
      return 1;
    } else if (
      props.img &&
      Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
    ) {
      return 2;
    } else if (
      props.img &&
      Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图3"
    ) {
      return 3;
    }
  }
  // Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图背景"
  //   ? 1
  //   : Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
  //   ? 2
  //   : 3
);
console.log("imgAttrindex", imgAttrindex);

// 使用
const loading = ref(false); // loading
const openLoading = () => {
  loading.value = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
};
openLoading();
const closeLoading = () => {
  loading.value.close();
};
// const data = ref({
//   list: [
//     {
//       name: "关卡一",
//     },
//     {
//       name: "关卡二",
//     },
//     {
//       name: "关卡三",
//     },
//     {
//       name: "关卡四",
//     },
//     {
//       name: "关卡五",
//     },
//     {
//       name: "关卡六",
//     },
//   ],
// });
// closeLoading();

const { data } = useRequest(
  ROUTERTASK_LIST,
  { routerId: props.routerId },
  (e) => {
    closeLoading();
    console.log("获取路径图", e);
    if (e.code === 6) {
      router.push({
        path: "/notpath",
      });
    }
  }
);
console.log("data", data, props.routerInfo);
let current = ref(null);
watch(data, () => {
  if (data && data.value && data.value.list) {
    data.value.list.reverse();
    current.value = data.value.list.findIndex(
      (e) => e.id === data.value.currentChapterId
    );
    console.log("props.routerInfo", props.routerInfo);
  }

  closeLoading();
});
// watch(props.routerInfo, () => {
//   console.log("props.routerInfo", props.routerInfo);
// });
// const current = computed(() => {
//   data.value.list.findIndex((e) => e.id === data.value.currentChapterId);
// });
console.log("current", current);

function show() {
  visiable.value = true;
}

function toDetail(item, i) {
  // console.log("import.meta.env.MODE", import.meta.env.MODE);
  console.log("current.value !== i", current, i, item);

  // 预览和学习设置
  let previewSetting = props.routerInfo.previewSetting;
  let studySetting = props.routerInfo.studySetting;
  let isStudy = false;
  if (previewSetting == null) {
    // 如果未设置预览 则只可以看当前关卡 其余关卡不让点击
    if (current.value !== i) {
      ElMessage.warning("当前关卡不可预览");
      return;
    }
    isStudy = true;
  } else {
    if (current.value !== i) {
      let lookArr = [];
      lookArr = previewSetting.split(",");
      if (i + 1 >= lookArr[0] && i + 1 <= lookArr[1]) {
        if (studySetting !== null) {
          let studyArr = [];
          studyArr = studySetting.split(",");
          if (i + 1 >= studyArr[0] && i + 1 <= studyArr[1]) {
            isStudy = true;
          } else {
            isStudy = false;
          }
        } else {
          isStudy = false;
        }
      } else {
        ElMessage.warning("当前关卡不可预览");
        return;
      }
    } else {
      isStudy = true;
    }
  }
  // if (current.value !== i) {
  //   return;
  // }
  router.push({
    path: "/pathmappage",
    query: {
      routerId: props.routerId,
      chapterId: item.id,
      isStudy,
      // routerName: props.detail.routerName,
    },
  });
}

function close() {
  visiable.value = false;
}
</script>
<style lang="scss">
.pathDetailback {
  background-image: url("../assets/image/pathDetails/pathDetailBack.png");
}
.path2 {
  background-image: url("../assets/image/pathDetails/path2.png");
}
.path3 {
  background-image: url("../assets/image/pathDetails/path3.png");
}
.pathDetail {
  width: 410px;
  height: 500px;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-position: center;
  // overflow-x: scroll;
  margin: 30px;
  margin-top: 100px;
  .cha {
    position: absolute;
    cursor: pointer;
  }
  .nameClass {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    padding: 0 20px 0 50px;
    font-size: 12px;
  }

  .nameBack {
    background-image: url("../assets/image/pathDetails/pathDetailImg.png");
  }
  .currentBack {
    background-image: url("../assets/image/pathDetails/pathDetailImgSelect.png");
  }

  .pathselect2 {
    background-image: url("../assets/image/pathDetails/pathselect2.png");
  }
  .pathnoselect2 {
    background-image: url("../assets/image/pathDetails/pathnoselect2.png");
  }

  .pathselect3 {
    background-image: url("../assets/image/pathDetails/pathselect3.png");
  }
  .pathnoselect3 {
    background-image: url("../assets/image/pathDetails/pathnoselect3.png");
  }
}
</style>