<template>
  <el-divider>背景</el-divider>
  <el-row justify="space-between">
    <el-col :span="6" v-for="(item, key) in bgColors" :key="key">
      <el-card style="width: 30px;height: 30px;" :style="{backgroundColor: item.fill}"
               body-style="padding:0 !important;text-align: center;" @click="onSelectBg(item)">
        <el-upload :before-upload="onSelectBgImage" action="#">
          <el-icon v-if="item.type === 'image'" size="25px">
            <PictureFilled/>
          </el-icon>
        </el-upload>
      </el-card>
    </el-col>
  </el-row>

  <el-divider>元素</el-divider>

  <div style="margin-top: -5px;">
    <el-button @click="addText" style="margin: 5px">
      <el-icon>
        <List/>
      </el-icon>
      文本
    </el-button>
    <el-upload :before-upload="onSelectImage" :show-file-list="false" action="#"
               style="display: inline-block; vertical-align: middle;">
      <el-button>
        <el-icon>
          <PictureFilled/>
        </el-icon>
        图片
      </el-button>
    </el-upload>
    <el-button @click="addQrcode" style="margin: 5px">
      <el-icon>
        <Stamp/>
      </el-icon>
      二维码
    </el-button>
  </div>

  <el-divider>内容</el-divider>

  <div class="mt10"></div>
  <div class="mt5" v-for="(item,key) in content.blocks" :key="key">
    <!--        <el-alert :type="selectBlock === item?'success': 'info'" effect="dark"-->
    <!--                  @click="handleBlockSelect(item)"-->
    <!--                  @close.stop="handleBlockDelete(key, item)" >-->
    <!--          <template #title>-->
    <!--            [ {{ blockTypes[item.type] }} ] {{ item.name }}-->
    <!--          </template>-->
    <!--        </el-alert>-->
    <div style="height:30px;padding:5px 8px;background-color: #909399;border-radius: 4px;color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    line-height: 18px;">
      <a style="color: #FFFFFF;width: 80%" @click="handleBlockSelect(item)" >[ {{ blockTypes[item.type] }} ] {{ item.name }}</a>
      <Close style="width: 0.8em; height: 0.8em; " @click="handleBlockDelete(key, item)"/>
    </div>
  </div>
</template>

<script setup>
import {buildBgColors, newImage, newText, newQrcode} from "@/views/shop/templateInfo/drawCanvas";
import {PictureFilled, Stamp} from "@element-plus/icons-vue";
import {nextTick} from "vue";

const props = defineProps({content: Object, selectBlock: Object,})
const {content, selectBlock} = toRefs(props)
const bgColors = ref(buildBgColors())

const blockTypes = {
  "text": "文本",
  "image": "图片",
  "qrcode": "二维码",
}

const emit = defineEmits([
  'update:select-block'
])

function getIndex() {
  const blocks = content.value.blocks;
  if (!blocks || blocks.length === 0) {
    return 0
  }
  return blocks[blocks.length - 1].index + 1
}

function addText() {
  const text = newText(getIndex());
  content.value.blocks.push(text)
  emit('update:select-block', text)
}

function addQrcode() {
  const qrcode = newQrcode(getIndex());
  content.value.blocks.push(qrcode)
  emit('update:select-block', qrcode)
}

function addPic(src) {
  const image = newImage(src, getIndex())
  content.value.blocks.push(image)
  emit('update:select-block', image)
}

function handleBlockSelect(item) {
  emit('update:select-block', item)
}

function handleBlockDelete(key, item) {
  console.log(3333)
  content.value.blocks.splice(key, 1)
  emit('update:select-block', null)
}

/**
 * @param item
 */
function onSelectBg(item) {
  content.value.background = item
}

/**
 * @param file {File}
 */
function onSelectBgImage(file) {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = ({target}) => {
    content.value.background.src = target.result
  }
  return false
}

/**
 * @param file {File}
 */
function onSelectImage(file) {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = ({target}) => {
    addPic(target.result)
  }
  return false
}

/**
 * @param
 */
// function createQrcode() {
//
//   const qrcode = new QRCode("qrcode", {
//     width: 40,
//     height: 40,
//     text: "二维码内容",
//     colorDark: "#109dff",
//     colorLight: "#d9d9d9"
//   });
//     addQrcode(qrcode)
// }

</script>

<style scoped>

</style>