<template>
  <div
    :class="
      imgAttrindex === 1
        ? 'pathDetail pathDetailback'
        : imgAttrindex === 2
        ? 'pathDetail path3'
        : 'pathDetail path2'
    "
    v-if="data?.list"
  >
    <div
      v-for="(item, i) in showList"
      :key="i"
      class="cha"
      :style="{
        top: `${imgAttr?.positions[i]?.top - (currentIndex === i ? 1 : 0)}px`,
        left: `${imgAttr?.positions[i]?.left - (currentIndex === i ? 11 : 0)}px`,
      }"
    >
      <div
        @click="toDetail(item, i)"
        v-if="item.name"
        :class="
          imgAttrindex === 1
            ? currentIndex === i
              ? 'nameClass currentBack'
              : 'nameClass nameBack'
            : imgAttrindex === 2
            ? currentIndex === i
              ? 'nameClass pathselect3'
              : 'nameClass pathnoselect3'
            : currentIndex === i
            ? 'nameClass pathselect2'
            : 'nameClass pathnoselect2'
        "
        :title="item.name"
        :style="{
          backgroundSize: '100%',
          width: `${
            imgAttrindex === 1
              ? currentIndex === i
                ? 100
                : 100
              : imgAttrindex === 2
              ? currentIndex === i
                ? 100
                : 100
              : currentIndex === i
              ? 100
              : 100
          }px`,
          height: `${
            imgAttrindex === 1
              ? currentIndex === i
                ? 75
                : 75
              : imgAttrindex === 2
              ? currentIndex === i
                ? 100
                : 100
              : currentIndex === i
              ? 75
              : 75
          }px`,
          lineHeight: '50px',
          color:
            imgAttrindex === 1
              ? '#FFF'
              : imgAttrindex === 2
              ? '#FFF'
              : imgAttrindex === 3 && currentIndex === i
              ? '#FFF'
              : '#000',
        }"
      >
        <div
          :style="{
            'margin-left':
              imgAttrindex === 1 ? '0px' : imgAttrindex === 2 ? '13px' : '17px',
            'margin-top':
              imgAttrindex === 1
                ? '0px'
                : imgAttrindex === 2
                ? '5px'
                : imgAttrindex === 3 && currentIndex === 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, checkStudentExist } from "@/api/api";
import { useRequest } from "@/api/request";
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 { data } = useRequest(
  ROUTERTASK_LIST,
  { routerId: props.routerId },
  (e) => {
    useRequest(
      checkStudentExist,
      {
        targetId: props.routerId,
        type: 2,
      },
      (res) => {
        console.log("判断任务是否删除", res);
        if (res.code === 7) {
          router.push({
            path: "/loseefficacy",
          });
        } else {
          closeLoading();
          console.log("获取路径图", e);
          if (res.code === 6) {
            router.push({
              path: "/notpath",
            });
          }
        }
      }
    );
  }
);
// 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(() => imageAttrs[Object.keys(imageAttrs).find((e) => props.img?.includes(e))] || {});
const imgAttrindex = computed(() => props.img?.includes("路径图背景")? 1 : props.img?.includes("路径图2")? 2 : 3);
const current = computed(() => data.value?.list.findIndex(e => e.id === data.value?.currentChapterId));
//当关卡太多时只显示 当前关卡中间8个
const currentIndex = computed(() => {
  if (data.value?.list?.length <= 6) {
    return current.value;
  }
  return current.value < 3 ? current.value : data.value?.list.length - current.value <= 3 ? (6 - (data.value?.list.length - current.value)) : 3;
});
const startIndex = computed(() => {
  if (data.value?.list?.length <= 6) {
    return 0;
  }
  return current.value < 3 ? 0 : data.value?.list.length - current.value <= 3 ? data.value?.list.length - 6 : current.value - 3;
});
const showList = computed(() => data.value?.list?.length <= 6 ? calulatePosition(data.value?.list) : data.value?.list?.slice(startIndex.value, startIndex.value + 6));
watch(showList,()=>console.log(showList.value))
//list 当list长度小于8时 返回一个长度为8的数组 并将list中的数据均匀放到数组中
const calulatePosition = (list) => {
  let arr = new Array(6).fill({});
  let tr = Math.floor(6 / list.length) - 1;
  list.forEach((e, i) => {
    if (i === list.length - 1 && (i * tr + i) !== 5 && i !== 0) {
      arr[5] = e;
    } else {
      arr[i * tr + i] = e;
    }
  });
  return arr;
};
// 使用
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();

console.log("data", data, props.routerInfo);

function show() {
  visiable.value = true;
}
function canStudy(setting,current){
  const arr = setting?.split(',')
  if (arr && arr.length===2){
    return current >= arr[0] && current <= arr[1]
  }
  return false
}
function toDetail(item, i) {
  const realIndex = data.value?.list.findIndex(e => e.id === showList.value[i].id);
  // 预览和学习设置
  let isStudy = true;
  if(current.value !== i && !canStudy(props.routerInfo.previewSetting,realIndex+1) && !canStudy(props.routerInfo.studySetting,realIndex+1)){
    ElMessage.warning("当前关卡不可预览");
    return;
  }
  if(current.value !== i && canStudy(props.routerInfo.previewSetting,realIndex+1)){
    isStudy = false
  }
  if(current.value !== i && canStudy(props.routerInfo.studySetting,realIndex+1)){
    isStudy = true
  }
  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: 200px;
  .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>