<template>
  <view class="left-v">
    <!-- 顶部书本标题 -->
    <view class="info-content">
      <!-- 内容 -->
      <view class="content">
        <!-- 单词蒙版添加 -->
        <view class="imagebg">
          <view v-if="store.playLoading" class="pageImg cover"></view>
          <view
            v-else
            class="pageImg pointer"
            :style="{
              width: Highlight.width,
              height: Highlight.height,
              backgroundImage: 'url(asdasd)',
            }"
            @click="tapEnlargeImg"
          >
            <view
              v-for="item in store.curSentenceInfo.sentenceWordList"
              :key="item.id"
              :class="
                item.id === store.CurrentPlayingWordInfo.id ? 'Annotate-wordsYe' : 'Annotate-words'
              "
              :style="Annotate(item)"
            ></view>
          </view>
        </view>
      </view>

      <!-- 页码 -->
      <view class="page-number"> 12/23 </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import { usePlayerStore } from '@/store/Player/userPlayer';
const emit = defineEmits(['onTapEnlargeImg'])
const instance = getCurrentInstance() // 获取组件实例
// const store = usePlayerStore();
const imgHeight = ref() // 图片的高度
const imgWidth = ref() // 图片的宽度

// 图片查看

function tapEnlargeImg() {
  emit('onTapEnlargeImg')
}

// 获取图片Dom
function getImgDom() {
  // let query = uni.createSelectorQuery().in(instance);
  // query.select('.pageImg').boundingClientRect();
  // query.exec(eles => {
  //     imgHeight.value = eles[0].height;
  //     imgWidth.value = eles[0].width;
  // });
}

// scroll-view高度计算
const Highlight = computed(() => {
  let h = 20
  let w = 20
  // if (store.BookInformation.height >= 824) {
  //     h = store.BookInformation.height - 20;
  //     w = h / 1.54;
  // } else {
  //     w = store.BookInformation.width;
  //     h = store.BookInformation.height;
  // }
  return {
    // 824:533 比例是1.54

    height: h / 19.6 + 'vw',
    width: w / 19.6 + 'vw',
  }
})

// // 是否可以上一页
// const CheckPrevious = computed(() => {
// 	if (store.BookInformation.pageNum === 1) {
// 		return true;
// 	} else {
// 		return false;
// 	}
// });

// // 图片的高度
// const imageHeight = computed(() => {
// 	return store.BookInformation.height / 2.56 + 'rpx'
// })

// 图片的宽度度
// const imageWidth = computed(() => {
// 	return store.BookInformation.width / 2.56 + 'rpx'
// })

function Annotate(event: {
  positionTop: number
  positionLeft: number
  width: number
  height: number
}) {
  return {
    // 824 533 为CurrentPlayingWordInfo里的宽高间距参考，
    // 原始参数有问题  先这样判断 后续计算算法
    // marginTop:
    //     store.BookInformation.height === 824
    //         ? count(event.positionTop, Number(store.BookInformation.height)) * 154 + '%'
    //         : count(event.positionTop, Number(store.BookInformation.height)) * 65 + '%',
    // marginLeft:
    //     Number(count(event.positionLeft, Number(store.BookInformation.width))) * 100 + '%',
    // width: count(event.width, store.BookInformation.width) * 100 + '%',
    // height: count(event.height, store.BookInformation.height) * 100 + '%',
  }
}

// 计算百分比
function count(e: number, n: number) {
  let num: any = e / n
  return num
}

onMounted(() => {
  getImgDom()
})
</script>

<style scoped lang="scss">
.left-v {
  display: flex;
  justify-content: center;
  width: 50vw;
  height: 100%;
}

.info-content {
  border: solid rgba(217, 209, 99, 1) 0.33vh;
  border-radius: 2.5vh;
  width: 100%;
  height: 100%;
  // height: 720px;
  // width: 744.013px;
  background-color: rgba(255, 254, 242, 1);
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;

  // justify-content: center;
  .back {
    width: 49.997px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 100%;
    height: 100%;
    // width: 409.6px;
    // // flex: 1;
    // height: 640px;

    background-color: $bg-color;
    // border: solid rgba(217, 209, 99, 1) 3.994px;
    border-radius: 2.5vh;
    // margin: 0 35.994px;
    display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    // padding: 19.994px 54.989px;
    box-sizing: border-box;

    .imagebg {
      position: relative;
      height: 100%;
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      // background: red;

      // background-size: 100% 100%;
      .pageImg {
        background-size: 100% 100%;
        position: relative;
        // position: absolute;
        // width: 100%;
        // height: 100%;
        z-index: 1;
      }

      .Annotate-words {
        position: absolute;
        z-index: 2;
        background-color: rgba(255, 247, 140, 0.45);
      }

      .Annotate-wordsYe {
        position: absolute;
        z-index: 3;
        background-color: rgba(206, 255, 89, 0.45);
        mix-blend-mode: multiply;
        // background-color: red;
      }
    }

    .scroll-list {
      width: 100%;
      flex: 1;
      overflow: scroll;
      // white-space: nowrap;
      overflow: auto;
      margin-top: 0.83vh;

      .scroll-content {
        margin-bottom: 0.83vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .scroll-itemYe {
          font-size: 1.67vh;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.42vh;
          // background-color: rgba(206, 255, 89, 0.45);
          // background-color: red;
        }

        .scroll-item {
          font-size: 1.67vh;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.42vh;
          background-color: rgba(255, 247, 140, 0.45);
        }
      }
    }
  }

  .right-back {
    width: 56.013px;
    height: 4.67vh;
    background-size: 100% 100%;

    background-repeat: no-repeat;
    background-image: url(data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQuSURBVHgB7ZrNThRBFIVvdYuJJiqRpQSahSw0Udy5EIUnQJf8Ck8APgHDEwhPAESBpfgEsHDhxgAmaoILmp+NCyNxIQk4Xd4zDWNVD0O6eqq6MfIlBd3V3QxnbtU9VXeG6IJ/G0EZkbNBM/nlHvL9PhKymaTc5t+rYmB3mc4RmQTKhaCLf77hw+CUyyEdil4xFoZ0DjAWyJELqEmu8ZPNZ9x2bkR6ZMplOauJu8ntFrer2l0B37cWR7pYjCJYid5luVXtuM2tU7nhEyF2iVcQo2IgnKeCMIugX9Yj0pm4fpdi0SpSzsmltkkqCEOBytC8UuceiE6KjESpKJHmczANEHmfm6T9ah9ELrTNUs64EQhauT3miGvJR4zKhfa1iofmhDuB4Dq3h5TMsF2VDIuElQNuBQLM1VqRyMYreYh0LxBA5COKI/qXWKRjr8xHIGji1k3JxR2f8XBdDJ6TI/ITeELOXpm/QJCjVxYjEJx4pQpELra9JIsUJxDAKzEvm5QFgRQTNr2yWIEAmbU7uSCw55XFCwQOvTK7wN9kF0deaSYw8sPq8RG3r2SXE69s1XoDnpgrWb3SvGSx0L5Fql23cLtHyeHVOJtU+wZ6siT6d6bIAPMhGokx7fw7t3dUu5NvlHpe+aq1hwywW1VzEc09bhtaDwpaD7igtZ/m8UxJRgyG63gRiuSMdsFFNDEf9QVBwKWTp5SSzFkU76AY3pkgT3SQKgnJB8Wn99x+kR0gskU598WTlE827oOiPwzF4HYHzw998iOaH8ke15RjKQJKiRWjj8v40Y2aC0eUap645BI1CCeccd7ulPhd1deOKAh3kb3ayzflWMiNlE9lF3hcBOYqmezRcjHMGum9g+wBPzxQzn1vJeWTmW1inH9O11xAMrhDsUhbQNym1hPP+ZQYR1AuBZNsDyWtE74H/2sheyAbf+G2m+j3RC8ZYCSwkkwiOVrtQKQCioejzajBXmAz6rBEETkSL9iDQzLALIKXCKv6oHqOLc51sgvsBSnkQOsN2ft6xZD5x3FmNuGVg+oxImZbHJbxtZFbrSzN+rN91pjdJho2mASfKRaoIWfEEK+WGsD2v2kOkskHioemiuT5NrQ9TQ1SrMDTkgnmG2/JxHC4ShYoTiC2QRiWR1rvOtvAM9NMeRbFFJ1g3siUqjgp5ytfXOi3Jw7kG8F65h3JKd56lcgB+QnEfEMy+an0nZj3yPYcOSIfgZbN2wT3c9CBeZvgNoKOzNsENwIdm7cJ2QXWK93nYN4mmAk89Nd5Fx8fI0qIkLoHPN28Q+zhbJq3Ceal+9ftP6pfxsOOArt47Cogdi95M5v3kTeRtkjrAvMhitK9X6lqx5HaqnefO/M2wdgmxEi4XFMDVYF5lzHfihcHsn+leYmrauWoxH+i73jIhtz7ljxvOg9/u+B/4Q/u1HFwW1gmSgAAAABJRU5ErkJggg==);
  }

  .left-back {
    transform: rotate(180deg);
  }

  .backNo {
    opacity: 0.5;
  }

  .page-number {
    position: absolute;
    bottom: 3.33vh;
    right: 52.71px;
    font-size: 2vh;
  }
}

.cover {
  margin: 2.33vh 0 0.67vh 0;
  width: 499.994px;
  height: 50vh;
  border-radius: 2.5vh;
  background-color: #fffcd1;
  @include animation(animation-FFF99E, #fff99e);
}

// .title {
// 	position: absolute;
// 	padding: 16px 32px;
// 	border: solid rgba(217, 209, 99, 1) 3.994px;
// 	border-radius: 11.72px 11.72px 0 0;
// 	// top:-39.68px;
// 	top: -12.8px;
// 	background-color: rgba(255, 247, 140, 1);
// 	font-size: 24.013px;
// 	font-family: $font-special;
// 	color: rgba(115, 109, 32, 1);
// }
</style>
