<template>
  <div>
    <el-divider>图片</el-divider>
    <el-form label-width="40px">
      <el-form-item label="名称">
        <el-input v-model="selectBlock.name"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="selectBlock.src" type="textarea"></el-input>
      </el-form-item>

      <el-divider>布局</el-divider>
      <el-form-item label="X">
        <el-input-number v-model="selectBlock.x" :controls="false" style="width: 60px;"></el-input-number>
        <span class="mr20"></span>
        <span class="mr10" style="font-weight: bold;">Y</span>
        <el-input-number v-model="selectBlock.y" :controls="false" style="width: 60px;"></el-input-number>
      </el-form-item>
      <el-form-item label="宽度">
        <el-input-number v-model="selectBlock.width" :controls="false" :min="10" :max="content.width"
                         style="width: 60px;"></el-input-number>
        <span class="mr20"></span>
        <el-slider v-model="selectBlock.width" :min="10" :max="content.width"
                   style="width: 130px;"></el-slider>
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number v-model="selectBlock.height" :controls="false" :min="10" :max="content.height"
                         style="width: 60px;"></el-input-number>
        <span class="mr20"></span>
        <el-slider v-model="selectBlock.height" :min="10" :max="content.height"
                   style="width: 130px;"></el-slider>
      </el-form-item>
      <el-form-item label="旋转">
        <el-input-number v-model="selectBlock.rotation" :controls="false" :min="-180" :max="180"
                         style="width: 60px;"></el-input-number>
        <span class="mr20"></span>
        <el-slider v-model="selectBlock.rotation" :min="-180" :max="180" style="width: 130px;"></el-slider>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import * as draw from '@/views/shop/templateInfo/drawCanvas'

const data = reactive({
  fields: draw.fields,
  fontAligns: draw.fontAligns,
  fontColors: draw.fontColors,
  fonts: draw.fonts,
  fontStyles: draw.fontStyles,
  fontVerticalAligns: draw.fontVerticalAligns,
})

const {
  fields,
} = toRefs(data)

const props = defineProps({content: Object, selectBlock: Object,})

const {content, selectBlock} = toRefs(props)

function searchField(query) {
  fields.value = draw.fields.filter(item => item.name.includes(query) || item.value.includes(query))
}

function onFieldSelect(value) {
  selectBlock.value.text = selectBlock.value.text + '$' + value
}
</script>

<style scoped>

</style>