<template>
  <Modal :visible="visible" :width="1024" :closeButton="true" @update:visible="val => emit('update:visible', val)">
    <div class="questionsAndAnswers wp_tool15" v-if="workData">
      <!-- <div class="wp_t15_title">{{ workData.answerQ }}</div>
      <span class="wp_type">问答题</span>
      <div class="wp_tl15_inputArea">
       <div class="wp_tl15_inputArea_content">
				<span v-text="workData.answer"></span>
       </div>
      </div>
      <div class="wp_tl15_fileList">
        <div
          class="wp_tl15_fileList_item"
          v-for="(item, index) in workData.fileList"
          :key="index"
        >
          <img :src="item.url" alt="" @click.stop="openPreview(item)"/>
        </div>
      </div> -->

      <div class="qaa_title">{{ workData.answerQ }}</div>
    <div class="qaa_type">{{ lang.ssQATest }}</div>
    <div class="qaa_editArea">
      <wangEnduit
        ref="wangEnduitRef"
        style="height: 100%;"
        :disabled="true"
        :value="workData.answer"
      />
    </div>
    </div>
  </Modal>

	<!-- 预览放大（带缩放/拖拽/旋转/工具栏） -->
  <Teleport to="body">
    <div v-if="previewVisible" class="image-preview" @click.self="closePreview" @wheel.prevent="onWheel">
      <div class="image-preview__toolbar">
        <button @click.stop="zoomOut">－</button>
        <button @click.stop="zoomIn">＋</button>
        <button @click.stop="resetTransform">{{ lang.ssReset }}</button>
        <button @click.stop="rotateLeft">⟲</button>
        <button @click.stop="rotateRight">⟳</button>
        <button @click.stop="toggleFit">{{ fitMode ? lang.ssActualSize : lang.ssFitScreen }}</button>
        <button @click.stop="closePreview">{{ lang.ssClose }}</button>
      </div>
      <div class="image-preview__stage"
           @mousedown="onDragStart"
           @mousemove="onDragMove"
           @mouseup="onDragEnd"
           @mouseleave="onDragEnd"
           @dblclick.stop="toggleZoom">
        <img :src="imageUrl" alt="预览" class="image-preview__img"
             :style="imgStyle" draggable="false" />
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { computed, watch, ref } from 'vue'
import wangEnduit from "./wangEnduit.vue";
import Modal from '@/components/Modal.vue'
import { lang } from '@/main'

const props = defineProps<{
  visible: boolean
  work: any
}>()

const workData = ref<any>(null)
const previewVisible = ref(false)
const scale = ref(1)
const rotate = ref(0)
const offsetX = ref(0)
const offsetY = ref(0)
const dragging = ref(false)
const lastX = ref(0)
const lastY = ref(0)
const fitMode = ref(true)
const imageUrl = ref('')

watch(() => props.visible, (newVal) => {
  if (props.work && newVal) {
    workData.value = JSON.parse(decodeURIComponent(props.work.content))
  } 
}, {
  immediate: true,
})



const imgStyle = computed(() => {
  const t = `translate(${offsetX.value}px, ${offsetY.value}px) rotate(${rotate.value}deg) scale(${scale.value})`
  return {
    transform: t
  }
})

const emit = defineEmits<{
  (e: 'update:visible', v: boolean): void
}>()

const visible = computed({
  get: () => props.visible,
  set: (v: boolean) => emit('update:visible', v)
})

const openPreview = (item: any) => {
  imageUrl.value = item.url
  previewVisible.value = true
  nextTickFit()
}
const closePreview = () => {
  previewVisible.value = false
}

const zoomStep = 0.2
const minScale = 0.2
const maxScale = 6

const zoomIn = () => {
  fitMode.value = false; scale.value = Math.min(maxScale, +(scale.value + zoomStep).toFixed(2)) 
}
const zoomOut = () => {
  fitMode.value = false; scale.value = Math.max(minScale, +(scale.value - zoomStep).toFixed(2)) 
}
const resetTransform = () => {
  scale.value = 1; rotate.value = 0; offsetX.value = 0; offsetY.value = 0; fitMode.value = true; nextTickFit() 
}
const rotateLeft = () => {
  rotate.value = (rotate.value - 90) % 360 
}
const rotateRight = () => {
  rotate.value = (rotate.value + 90) % 360 
}

const toggleZoom = () => {
  fitMode.value = false
  scale.value = scale.value >= 1.8 ? 1 : 2
}

const toggleFit = () => {
  fitMode.value = !fitMode.value
  nextTickFit()
}


const nextTickFit = () => {
  // 适应屏幕时复位位置与缩放
  if (fitMode.value) {
    scale.value = 1
    offsetX.value = 0
    offsetY.value = 0
  }
}

const onWheel = (e: WheelEvent) => {
  if (e.deltaY > 0) zoomOut()
  else zoomIn()
}

const onDragStart = (e: MouseEvent) => {
  dragging.value = true
  lastX.value = e.clientX
  lastY.value = e.clientY
}
const onDragMove = (e: MouseEvent) => {
  if (!dragging.value) return
  const dx = e.clientX - lastX.value
  const dy = e.clientY - lastY.value
  lastX.value = e.clientX
  lastY.value = e.clientY
  offsetX.value += dx
  offsetY.value += dy
}
const onDragEnd = () => {
  dragging.value = false 
}
</script>


<style scoped>
/*.wp_tool {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.wp_t15_title {
  font-size: 3em;
  font-weight: 300;
  margin: 20px 0;
}

.wp_type {
  margin: 20px 0;
  font-size: 1em;
  color: #7b7b7b;
}

.wp_tl15_inputArea {
  width: 70%;
  min-width: 300px;
  margin: 20px 0;
}

.wp_tl_btn {
  width: auto;
  height: auto;
  padding: 12px 16px;
  background-color: #f9f9f9;
  border-radius: 10px;
  border: 1px dashed #e5e5e5;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #474747;
  cursor: pointer;
  margin-right: 10px;
  transition: 0.3s;
}

.wp_tl_btn:hover {
  background-color: #ececec;
}

.wp_tl_btn > svg {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.wp_tl15_fileList {
  width: 70%;
  min-width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wp_tl15_fileList_item {
  width: 150px;
  height: 100px;
  border-radius: 10px;
  position: relative;
  margin-right: 20px;
}

.wp_tl15_fileList_item:hover > svg {
  display: block;
}

.wp_tl15_fileList_item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 10px #ececec;
  margin: 10px;
  cursor: pointer;
}

.wp_tl15_fileList_item > svg {
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  top: 1px;
  cursor: pointer;
  display: none;
}

.wp_tl15_inputArea_content{
	border-color: #ececec;
  border-radius: 10px;
  padding: 10px 20px;
  box-shadow: 0 0 10px #ececec;
	width: 100%;
	height: 150px;
	overflow: auto;
}*/

.questionsAndAnswers {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: column;
  box-sizing: border-box;
  padding: 50px 10%;
  overflow: auto;
}

.qaa_title {
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.qaa_type {
  margin: 20px 0 40px 0;
  font-size: 22px;
  color: #808080;
}

.qaa_recording {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-radius: 12px;
  border: solid 2px rgba(231, 231, 231, 1);
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.qaa_r_left{
  width: calc(100% - 200px);
  height: 100%;
  display: flex;
  align-items: center;
}

.qaa_r_left>svg,img{
  width: 23px;
  height: 23px;
}


.qaa_r_right{
  display: flex;
  align-items: center;
  justify-content: center;
}

.qaa_r_r_btn{
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.qaa_r_r_btn>img{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.qaa_editArea {
  width: 100%;
  min-height: 300px;
  height: calc(100% - 300px);
  box-sizing: border-box;
  border-radius: 12px;
  border: solid 2px rgba(231, 231, 231, 1);
  margin-top: 40px;
}

.voiceprint{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voiceprint_icon{
  margin-left: 200px;
}

</style>