<template>
  <div class="app-container">
    <el-page-header title="返回" content="模板编辑" @back="$router.back()">
      <template #extra>
        <el-button-group>
          <el-button @click="reset" :loading="loading">重置</el-button>
          <el-button @click="submitForm" type="primary">保存</el-button>
        </el-button-group>
      </template>
    </el-page-header>

    <el-divider/>

    <el-form ref="templateInfoRef" :model="form" :rules="rules" label-width="60px" inline>
      <el-form-item label="宽度" prop="width" style="width: 120px;">
        <el-input-number v-model="form.width" :controls="false" placeholder="请输入宽度"/>
      </el-form-item>
      <el-form-item label="高度" prop="height" style="width: 120px;">
        <el-input-number v-model="form.height" :controls="false" placeholder="请输入高度"/>
      </el-form-item>
      <el-form-item label="名称" prop="name" style="width: 160px;">
        <el-input v-model="form.name" placeholder="请输入模板名称"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark" style="width: 160px;">
        <el-input v-model="form.remark" type="text" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>

    <el-container style="height: calc(100vh - 230px);">
      <el-aside width="300px" style="background: none;margin-bottom: 0;">
        <el-scrollbar>
          <el-card body-style="min-height: 500px;">
            <DrawToolbar :content="content" v-model:select-block="selectBlock"></DrawToolbar>
          </el-card>
        </el-scrollbar>
      </el-aside>
      <el-main class="draw-box" ref="drawRef">
        <DrawCanvas ref="drawCanvasRef" :content="content" v-model:select-block="selectBlock"></DrawCanvas>
      </el-main>
      <el-aside width="360px" style="background: none;margin-bottom: 0;" ref="drawRef">
        <el-scrollbar>
          <el-card body-style="min-height: 500px;" v-if="selectBlock">
            <template v-if="selectBlock.type === 'text'">
              <DrawText :content="content" :select-block="selectBlock"></DrawText>
            </template>
            <template v-else-if="selectBlock.type === 'image'">
              <DrawImage :content="content" :select-block="selectBlock"></DrawImage>
            </template>
            <template v-else-if="selectBlock.type === 'qrcode'">
              <DrawQrcode :content="content" :select-block="selectBlock"></DrawQrcode>
            </template>
          </el-card>
        </el-scrollbar>
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import {addTemplateInfo, getTemplateInfo, updateTemplateInfo,} from "@/api/shop/templateInfo";

import DrawCanvas from '@/components/DrawCanvas'
import DrawText from '@/components/DrawText'
import DrawImage from '@/components/DrawImage'
import DrawQrcode from '@/components/DrawQrcode'
import DrawToolbar from '@/components/DrawToolbar'


import {newContent,} from './drawCanvas'

const {proxy} = getCurrentInstance();

const route = useRoute();

const drawCanvasRef = ref(null);

const loading = ref(false);

let blockIndex = 0;

const data = reactive({
  form: {},
  content: {},
  selectBlock: null,
  rules: {
    name: [
      {required: true, message: "模板名称不能为空", trigger: "blur"}
    ],
    width: [
      {required: true, message: "宽度不能为空", trigger: "blur"}
    ],
    height: [
      {required: true, message: "高度不能为空", trigger: "blur"}
    ],
  }
});

onBeforeMount(() => {
  getItem();
})

const {form, rules, content, selectBlock} = toRefs(data);

/** 查询模板信息列表 */
 async function getItem() {
  selectBlock.value = null
  getTemplateInfo(route.params.templateId).then(({data}) => {
    if (data.content) {
      let temp = JSON.parse(data.content)
      if (temp.blocks) {
        temp.blocks.forEach(item => {
          item.index = blockIndex++
        })
      }
      content.value = temp
    } else {
      content.value = newContent()
    }
    form.value = data;
  });
}

// 表单重置
async function reset() {
  loading.value = true
  await getItem()
  loading.value = false
  proxy.$modal.msgSuccess("重置成功");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["templateInfoRef"].validate(valid => {
    if (valid) {
      const imageConfig = drawCanvasRef.value.imageBgConfig
      if (imageConfig != null) {
        content.value.background.src = imageConfig.src
        delete content.value.background.image
      }
      const formData = form.value;
      formData.content = JSON.stringify(content.value)
      if (formData.templateId != null) {
        updateTemplateInfo(formData).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          //不重新渲染
          // getItem();
        });
      } else {
        addTemplateInfo(formData).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          // getItem();
        });
      }
    }
  });
}
</script>

<style lang="scss">
.draw-box {
  background-color: #666666;
  padding: 10px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
