import xpc from '@/views/components/PictureEditor/images/xpc.svg'
import shanyibu from '@/views/components/PictureEditor/images/shanyibu.png'
import { Loading } from '@element-plus/icons-vue'

export default function() {
  return `
    <div class="picture-editor-canvas">
      <div v-if="!isEmpty" class="canvas-stack">
        <div
          class="canvas-stack_item"
          v-for="(item, idx) in data"
          :key="(item.id || item.tpl_url || idx) + '-' + idx"
          :ref="'canvasItem-' + idx"
          :style="{backgroundColor: item.bg_color || '#fff'}"
        >
          <div
            class="canvas-stack_body"
            :class="idx === index ? 'active' : 'inactive'"
            :style="canvasBodyStyle(item)"
          >
            <div class="canvas-stack_controls">
              <el-button
                v-if="item.canvas_type !== 'model' && item.canvas_type !== 'scene'"
                size="small"
                class="canvas-stack_switch"
                type="primary"
                plain
                :disabled="idx === index"
                @click="handleSelectCanvas(idx)"
              >
                {{ idx === index ? '正在编辑' : '切换画布' }}
              </el-button>
              <div class="canvas-stack_sort">
                <el-button
                  text
                  size="small"
                  icon="ArrowUp"
                  @click.stop="handleMoveCanvas(idx, 'up')"
                  :disabled="idx === 0"
                />
                <el-button
                  text
                  size="small"
                  icon="ArrowDown"
                  @click.stop="handleMoveCanvas(idx, 'down')"
                  :disabled="idx === data.length - 1"
                />
              </div>
            </div>
            <!-- 模特图/场景图占位 -->
            <template v-if="item.canvas_type === 'model' || item.canvas_type === 'scene'">
              <div class="canvas-special-placeholder" :class="item.canvas_type">
                <div class="special-placeholder-content">
                  {{ item.canvas_type === 'model' ? '模特图' : '场景图' }}
                </div>
              </div>
            </template>
            <!-- 普通画布 -->
            <template v-else>
              <div v-if="idx !== index"  class="canvas-stack_placeholder" @click="handleSelectCanvas(idx)" style="cursor: pointer;">
                <img v-if="item.preview" :src="item.preview" alt="">
                <img v-else-if="item.image_path" :src="item.image_path" alt="">
                <img v-else-if="item.tpl_url" :src="item.tpl_url" alt="">
                <span v-else>点击"切换到此画布"开始编辑</span>
              </div>
              <template  v-else >
                <div class="canvas-container" :style="{ position: 'relative' }">
                  <canvas
                    :id="'marketing-canvas-' + idx"
                    :width="item.width"
                    :height="item.height"
                  />
                  <!-- Loading遮罩 -->
                  <div v-if="loading" class="canvas-loading-overlay">
                    <div class="canvas-loading-content">
                      <el-icon class="is-loading">
                        <Loading />
                      </el-icon>
                      <div class="loading-text">正在加载画布...</div>
                    </div>
                  </div>
                </div>
              </template>
            </template>
          </div>
        </div>
      </div>
      <div v-else class="canvas-stack_empty">暂无画布，请先新增。</div>
    </div>
  `
}