<template>
  <view class="container">
    <view class="page-body">
      <view class="wrapper">
        <view
          class="toolbar"
          @click="format"
          style="max-height: 240px; overflow-y: auto"
        >
          <!-- 加粗 -->
          <view
            :class="data.formats.bold ? 'ql-active' : ''"
            class="iconfont icon-zitijiacu"
            data-name="bold"
          ></view>
          <!-- 斜体 -->
          <view
            :class="data.formats.italic ? 'ql-active' : ''"
            class="iconfont icon-zitixieti"
            data-name="italic"
          ></view>
          <!-- 下划线 -->
          <view
            :class="data.formats.underline ? 'ql-active' : ''"
            class="iconfont icon-zitixiahuaxian"
            data-name="underline"
          ></view>
          <!-- 对齐方式：左 -->
          <view
            :class="data.formats.align === 'left' ? 'ql-active' : ''"
            class="iconfont icon-zuoduiqi"
            data-name="align"
            data-value="left"
          ></view>
          <!-- 对齐方式：居中 -->
          <view
            :class="data.formats.align === 'center' ? 'ql-active' : ''"
            class="iconfont icon-juzhongduiqi"
            data-name="align"
            data-value="center"
          ></view>
          <!-- 对齐方式：右 -->
          <view
            :class="data.formats.align === 'right' ? 'ql-active' : ''"
            class="iconfont icon-youduiqi"
            data-name="align"
            data-value="right"
          ></view>
          <!-- 对齐方式：两侧 -->
          <view
            :class="data.formats.align === 'justify' ? 'ql-active' : ''"
            class="iconfont icon-zuoyouduiqi"
            data-name="align"
            data-value="justify"
          ></view>
          <!-- 有序排列 -->
          <view
            :class="data.formats.list === 'ordered' ? 'ql-active' : ''"
            class="iconfont icon-youxupailie"
            data-name="list"
            data-value="ordered"
          ></view>
          <!-- 无序排列 -->
          <view
            :class="data.formats.list === 'bullet' ? 'ql-active' : ''"
            class="iconfont icon-wuxupailie"
            data-name="list"
            data-value="bullet"
          ></view>
          <!-- 取消缩进 -->
          <view
            class="iconfont icon-outdent"
            data-name="indent"
            data-value="-1"
          ></view>
          <!-- 缩进 -->
          <view
            class="iconfont icon-indent"
            data-name="indent"
            data-value="+1"
          ></view>
          <!-- 添加分割线 -->
          <view class="iconfont icon-fengexian" @click="insertDivider"></view>
          <!-- 插入图片 -->
          <view class="iconfont icon-image" @click="insertImage"></view>
          <!-- 设置标题 -->
          <view
            :class="data.formats.header === 3 ? 'ql-active' : ''"
            class="iconfont icon-H"
            data-name="header"
            :data-value="3"
          ></view>
          <!-- 下标 -->
          <view
            :class="data.formats.script === 'sub' ? 'ql-active' : ''"
            class="iconfont icon-zitixiabiao"
            data-name="script"
            data-value="sub"
          ></view>
          <!-- 上标 -->
          <view
            :class="data.formats.script === 'super' ? 'ql-active' : ''"
            class="iconfont icon-zitishangbiao"
            data-name="script"
            data-value="super"
          ></view>
          <view class="iconfont icon-undo" @click="undo"></view>
          <view class="iconfont icon-redo" @click="redo"></view>
        </view>
        <view class="editor-wrapper">
          <editor
            id="editor"
            class="ql-container"
            :placeholder="data.placeholder"
            @statuschange="onStatusChange"
            :show-img-resize="true"
            @ready="onEditorReady"
            @input="getCtx"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import Taro from "@tarojs/taro";
import { BASE_URL } from "@/utils/request";

const { content } = defineProps<{
  content: string;
}>();

let emits = defineEmits(["input"]);

const data = reactive<any>({
  editorCtx: "",
  readOnly: false,
  placeholder: "请输入商品详情...",
  richText: "",
  formats: {},
});

function onEditorReady() {
  // 富文本节点渲染完成
  Taro.createSelectorQuery()
    .select("#editor")
    .context((res) => {
      data.editorCtx = res.context;
      // 初始化数据
      if (content) {
        data.editorCtx.setContents({
          html: content,
        });
      }
    })
    .exec();
}

// 失去焦点时，获取富文本的内容
function getCtx(e: { detail: { html: any } }) {
  data.richText = e.detail.html;
  emits("input", e.detail.html);
}

// 撤销操作
function undo() {
  data.editorCtx.undo();
}

// 复原操作
function redo() {
  data.editorCtx.redo();
}

//修改样式
function format(e: { target: { dataset: { name: any; value: any } } }) {
  // console.log("format", e.target.dataset);
  let { name, value } = e.target.dataset;
  if (!name) return;
  data.editorCtx.format(name, value);
}

//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
function onStatusChange(e: { detail: any }) {
  data.formats = e.detail;
}

// 插入分割线
function insertDivider() {
  data.editorCtx.insertDivider();
}

// 插入图片
function insertImage() {
  Taro.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      // 上传图片的逻辑各有不同，自行调整即可
      Taro.uploadFile({
        url: `${BASE_URL}/upload`,
        name: "file",
        header: { token: Taro.getStorageSync("token") },
        filePath: res.tempFilePaths[0],
        success: (res) => {
          console.log(res);
          const imgData = JSON.parse(res.data) as {
            code: number;
            msg: string;
            data: any;
          };
          if (imgData.code === 200) {
            // 将图片展示在编辑器中
            data.editorCtx.insertImage({
              width: "100%",
              height: "auto",
              src: imgData.data.data,
              alt: "图像",
              success: function () {
                console.log("insert image success");
              },
            });
          } else {
            console.log("上传失败");
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  });
}
</script>

<style lang="scss">
@import "../static/font_4211210_2x20brbrv94.css";

.wrapper {
  height: 100%;
}

.editor-wrapper {
  height: calc(
    100vh - var(--window-top) - var(--status-bar-height) - 280px - 650px
  );
  overflow: scroll;
  background: rgba(153, 153, 153, 0.05);
  border-radius: 20px;
  margin: 20px 0;
  color: #000;
}

.iconfont {
  display: inline-block;
  margin: 20px 20px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 32px;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ql-container {
  box-sizing: border-box;
  padding: 24px 30px;
  width: 100%;
  min-height: 30vh;
  height: 100%;
  font-size: 28px;
  line-height: 1.5;
}

.ql-active {
  color: #f38e48;
}
</style>
