<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="matching-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <ul ref="list" class="option-list">
        <li v-for="(item, i) in data.option_list" :key="i" class="list-item">
          <div
            v-for="({ content, mark }, j) in item"
            :key="mark"
            :class="['item-wrapper', `item-${mark}`]"
            :style="{ cursor: disabled ? 'default' : 'pointer' }"
            @mousedown="mousedown($event, i, j, mark)"
            @mouseup="mouseup($event, i, j, mark)"
            @click="handleClickConnection($event, i, j, mark)"
          >
            <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getMatchingData, svgNS } from '@/views/book/courseware/data/matching';

import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'MatchingPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getMatchingData(),
      answerList: [], // 答案列表
      curConnectionPoint: { i: -1, j: -1, mark: '' }, // 当前连线点
      // 拖拽相关
      drag: false,
      mouseEvent: {
        clientX: 0,
        clientY: 0,
      },
    };
  },
  watch: {
    'data.option_list': {
      handler(val) {
        this.clearLine();
        if (!val) return;
        let list = val.map((item) => {
          return item.map(({ mark }) => {
            return { mark, preMark: '', nextMark: '' };
          });
        });
        this.$set(this, 'answerList', list);
      },
      immediate: true,
    },
  },
  created() {
    document.addEventListener('click', this.handleEventConnection);
    document.addEventListener('mousemove', this.documentMousemouse);
    document.addEventListener('mouseup', this.documentMouseup);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleEventConnection);
    document.removeEventListener('mousemove', this.documentMousemouse);
    document.removeEventListener('mouseup', this.documentMouseup);
  },
  methods: {
    /* 用 mouse 事件模拟拖拽 开始*/
    documentMousemouse(e) {
      if (!this.drag) return;
      // 使用 svg 绘制跟随鼠标移动的连接线
      let svg = document.querySelector('.move-connection');
      let list = this.$refs.list.getBoundingClientRect(); // 列表的位置
      let { clientX, clientY } = e;
      let isLeft = clientX < this.mouseEvent.clientX; // 鼠标是否向左移动
      // 计算 svg 的宽度，宽度不能超过列表的宽度
      let width = Math.min(list.width, isLeft ? list.width - clientX + list.left - 1 : clientX - list.left - 1);
      if (svg) {
        svg.setAttribute(
          'style',
          `position: absolute; ${isLeft ? 'right: 0;' : 'left: 0;'} width: ${width}px; height: 100%;`,
        );
      } else {
        svg = document.createElementNS(svgNS, 'svg');
        svg.classList.add('move-connection');
        svg.setAttribute('style', `position: absolute; width: ${width}px; height: 100%;`);
        let path = document.createElementNS(svgNS, 'path');
        this.setPathAttr(path);
        svg.appendChild(path);
        this.$refs.list.appendChild(svg);
      }
      let top = this.mouseEvent.clientY - list.top;
      let left = isLeft
        ? this.mouseEvent.clientX - list.left - Math.abs(width - list.width)
        : this.mouseEvent.clientX - list.left;
      let mouseX = isLeft ? clientX - list.left - Math.abs(width - list.width) : clientX - list.left;
      let mouseY = clientY - list.top;
      let path = svg.querySelector('path');
      path.setAttribute('d', `M ${left} ${top} L ${mouseX} ${mouseY}`);
    },
    documentMouseup() {
      if (!this.drag) return;
      this.drag = false;
      document.querySelector('.move-connection')?.remove();
      document.body.style.userSelect = 'auto'; // 允许选中文本
      this.mousePointer = { i: -1, j: -1, mark: '' };
      this.mouseEvent = { clientX: 0, clientY: 0 };
    },
    /**
     * 鼠标按下事件，设置当前连线点
     * @param {PointerEvent} e 事件对象
     * @param {number} i 选项列表索引
     * @param {number} j 选项索引
     * @param {string} mark 选项标识
     */
    mousedown(e, i, j, mark) {
      this.drag = true;
      document.body.style.userSelect = 'none'; // 禁止选中文本
      this.mouseEvent = { clientX: e.clientX, clientY: e.clientY };
      this.mousePointer = { i, j, mark };
    },
    /**
     * 鼠标抬起事件，如果是一个合适的连接点，则创建连接线
     * @param {PointerEvent} e 事件对象
     * @param {Number} i 选项列表索引
     * @param {Number} j 选项索引
     * @param {String} mark 选项标识
     */
    mouseup(e, i, j, mark) {
      let { i: curI, j: curJ, mark: curMark } = this.mousePointer;
      if (curI === -1 && curJ === -1) return;
      if (Math.abs(curJ - j) > 1 || mark === curMark) return;
      this.changeConnectionList(mark, j, true);
      this.createLine(mark, true);
    },
    /* 用 mouse 事件模拟拖拽 结束 */

    // 重置当前连线点
    resetCurConnectionPoint() {
      this.curConnectionPoint = { i: -1, j: -1, mark: '' };
    },
    /**
     * 当点击的不是连线点时，清除所有连线点的选中状态
     * @param {PointerEvent} e
     */
    handleEventConnection(e) {
      let currentNode = e.target;
      while (currentNode !== null) {
        if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
          break;
        }
        currentNode = currentNode.parentNode;
      }
      if (currentNode) return;
      Array.from(document.getElementsByClassName('item-wrapper')).forEach((item) => {
        item.classList.remove('focus');
      });
      this.resetCurConnectionPoint();
    },

    /**
     * 处理点击连线
     * @param {PointerEvent} e 事件对象
     * @param {Number} i 选项列表索引
     * @param {Number} j 选项索引
     * @param {String} mark 选项标识
     */
    handleClickConnection(e, i, j, mark) {
      let { i: curI, j: curJ, mark: curMark } = this.curConnectionPoint;
      // 获取 item-wrapper 元素
      let currentNode = e.target;
      while (currentNode !== null) {
        if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
          break;
        }
        currentNode = currentNode.parentNode;
      }
      // 如果当前连线点不存在或就是当前连线点，则设置当前连线点
      if ((curI === -1 && curJ === -1) || mark === curMark) {
        this.curConnectionPoint = { i, j, mark };
        currentNode.classList.add('focus');
        return;
      }
      // 如果当前连线点存在，清除所有连线点的选中状态
      Array.from(this.$refs.list.getElementsByClassName('item-wrapper')).forEach((item) => {
        item.classList.remove('focus');
      });
      // 如果当前连线点与上一个连线点不在相邻的位置，则设置点击的连接点为当前连线点
      if (Math.abs(curJ - j) > 1 || mark === curMark || (curJ === j && curI !== i)) {
        this.curConnectionPoint = { i, j, mark };
        currentNode.classList.add('focus');
        return;
      }
      this.changeConnectionList(mark, j);
      // 如果当前连线点与上一个连线点在相邻的位置，则创建连接线
      this.createLine(mark);
    },

    /**
     * 创建连接线
     * @param {String} mark 选项标识
     * @param {Boolean} isDrag 是否是拖拽
     */
    createLine(mark, isDrag = false) {
      let { offsetWidth, offsetLeft, offsetTop, offsetHeight } = document.getElementsByClassName(`item-${mark}`)[0];
      const { curOffsetWidth, curOffsetLeft, curOffsetTop, curOffsetHeight, curMark } =
        this.computedCurConnectionPoint(isDrag);
      let top = Math.min(offsetTop + offsetHeight / 2, curOffsetTop + curOffsetHeight / 2);
      // 判断是否是同一行
      const isSameRow = Math.abs(offsetTop + offsetHeight / 2 - (curOffsetTop + curOffsetHeight / 2)) <= 2;
      let left = Math.min(offsetLeft + offsetWidth, curOffsetLeft + curOffsetWidth);
      let width = Math.abs(
        offsetLeft > curOffsetLeft
          ? curOffsetLeft - offsetLeft + offsetWidth
          : offsetLeft - curOffsetLeft + curOffsetWidth,
      );
      let height = 0;
      if (!isSameRow) {
        height =
          curOffsetTop > offsetTop
            ? Math.abs(offsetTop + offsetHeight / 2 - (curOffsetTop + curOffsetHeight / 2))
            : Math.abs(offsetTop - curOffsetTop + offsetHeight / 2 - curOffsetHeight / 2);
      }
      let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop; // 判断是左上还是右下
      // 创建一个空的SVG元素
      let svg = document.createElementNS(svgNS, 'svg');
      svg.setAttribute(
        'style',
        `position:absolute; width: 62px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;`,
      );
      svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
      // 向SVG元素添加 path 元素
      let path = document.createElementNS(svgNS, 'path');
      path.setAttribute('d', `M ${size ? 0 : width} 0 L ${size ? width : 0} ${height}`); // 设置路径数据
      this.setPathAttr(path);
      svg.appendChild(path);
      this.$refs.list.appendChild(svg); // 将SVG元素插入到文档中

      // 清除当前连线点
      this.resetCurConnectionPoint();
    },
    // 设置 path 公用属性
    setPathAttr(path) {
      path.setAttribute('stroke-width', '2'); // 设置线条宽度
      path.setAttribute('stroke-linecap', 'round'); // 设置线段的两端样式
      path.setAttribute('stroke', '#306eff'); // 设置填充颜色
      path.setAttribute('transform', `translate(2, 2)`); // 设置偏移量
    },
    /**
     * 计算当前连线点的位置
     * @param {Boolean} isDrag 是否是拖拽
     */
    computedCurConnectionPoint(isDrag = false) {
      const { mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
      let dom = document.getElementsByClassName(`item-${mark}`)[0];
      return {
        curOffsetWidth: dom.offsetWidth,
        curOffsetLeft: dom.offsetLeft,
        curOffsetTop: dom.offsetTop,
        curOffsetHeight: dom.offsetHeight,
        curMark: mark,
      };
    },

    // 清除所有连接线
    clearLine() {
      document.querySelectorAll('svg.connection-line').forEach((item) => {
        item.remove();
      });
    },

    /**
     * 修改连接列表
     * @param {String} mark 选项标识
     * @param {Boolean} isDrag 是否是拖拽
     */
    changeConnectionList(mark, j, isDrag = false) {
      const { mark: curMark, j: curJ } = isDrag ? this.mousePointer : this.curConnectionPoint;
      this.changeAnswerList(curMark, mark, curJ < j);
      this.changeAnswerList(mark, curMark, curJ > j);
    },
    /**
     * 改变答案列表
     * @param {String} curMark 当前选项标识
     * @param {String} mark 选项标识
     */
    changeAnswerList(curMark, mark, isPre) {
      let oldPointer = { mark: '', position: '' };
      // 找到当前选项，修改 preMark 或 nextMark
      this.answerList.find((item) =>
        item.find((li) => {
          if (li.mark === curMark) {
            if (isPre) {
              if (li.nextMark) {
                oldPointer = { mark: li.nextMark, position: 'next' };
              }
              li.nextMark = mark;
            } else {
              if (li.preMark) {
                oldPointer = { mark: li.preMark, position: 'pre' };
              }
              li.preMark = mark;
            }
            return true;
          }
        }),
      );
      // 如果当前选项有 preMark 或 nextMark，则清除原来的连线
      if (!oldPointer.mark) return;
      document.querySelector(`svg.connection-line.svg-${curMark}-${oldPointer.mark}`)?.remove();
      document.querySelector(`svg.connection-line.svg-${oldPointer.mark}-${curMark}`)?.remove();

      // 找到原来的选项，清除 preMark 或 nextMark
      this.answerList.find((item) =>
        item.find((li) => {
          if (li.mark === oldPointer.mark) {
            if (oldPointer.position === 'pre') {
              li.nextMark = '';
            } else {
              li.preMark = '';
            }
            return true;
          }
        }),
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.matching-preview {
  @include preview-base;

  .option-list {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .list-item {
      display: flex;
      column-gap: 8px;
      align-items: center;

      .item-wrapper {
        position: relative;
        display: flex;
        flex: 1;
        column-gap: 24px;
        align-items: center;
        min-height: 48px;
        padding: 12px 24px;
        background-color: $content-color;
        border-radius: 40px;

        &:not(:last-child) {
          margin-right: 52px;
        }

        &.focus {
          background-color: #dcdbdd;
        }

        &.right {
          background-color: $right-bc-color;
        }

        &.wrong {
          box-shadow: 0 0 0 1px $error-color;
        }

        .content {
          flex: 1;
        }
      }
    }
  }
}
</style>
