<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.text" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="字段">
        <el-select v-model="selectBlock.fields" filterable @change="onFieldSelect" :filter-method="searchField" placeholder="请选择字段">
          <el-option
              v-for="item in fields"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">${{
                item.value
              }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-divider>字体</el-divider>
      <el-form-item label="字体">
        <el-select v-model="selectBlock.fontFamily" style="width: 100px;">
          <el-option
              v-for="item in fonts"
              :key="item.value"
              :label="item.name"
              :value="item.name"
          ></el-option>
        </el-select>
        <span class="mr20"></span>
        <el-select v-model="selectBlock.fontStyle" style="width: 80px;">
          <el-option
              v-for="item in fontStyles"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字号">
        <el-input-number v-model="selectBlock.fontSize" :controls="false" :min="10" :max="200"
                         style="width: 60px;"></el-input-number>
        <span class="mr20"></span>
        <el-slider v-model="selectBlock.fontSize" :min="10" :max="150" style="width: 130px;"></el-slider>
      </el-form-item>
      <el-form-item label="颜色">
        <el-select v-model="selectBlock.fill">
          <el-option
              v-for="item in fontColors"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </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-button-group>
          <el-button
              v-for="item in fontAligns"
              :key="item.value"
              :type="item.value === selectBlock.align ? 'primary' : 'default'"
              @click="selectBlock.align =item.value">
            {{ item.name }}
          </el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="垂直">
        <el-button-group>
          <el-button
              v-for="item in fontVerticalAligns"
              :key="item.value"
              :type="item.value === selectBlock.verticalAlign ? 'primary' : 'default'"
              @click="selectBlock.verticalAlign =item.value">
            {{ item.name }}
          </el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="边距">
        <el-input-number v-model="selectBlock.padding" controls-position="right" :min="0"
                         :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="旋转">
        <el-slider v-model="selectBlock.rotation" :min="-180" :max="180"></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,
  fontAligns,
  fontColors,
  fonts,
  fontStyles,
  fontVerticalAligns,
} = 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>