<template>
  <div v-if="formConfig.currentItem.componentCode == 'pure-text'">
    <a-form-item label="纯文本内容:" class="form-row">
      <a-button shape="circle" style="margin-left: 10px; margin-top: -10px" @click="pureTextContent"><edit-outlined /></a-button>
    </a-form-item>
    <a-form-item label="字体颜色:" class="form-row">
      <color-picker size="default" :show-alpha="true" v-model:value="formConfig.currentItem.formItemContent.fontColor" />
    </a-form-item>
    <a-form-item label="字体大小:">
      <a-input v-model:value="formConfig.currentItem.formItemContent.fontSize" placeholder="请输入字体大小" />
    </a-form-item>
    <a-form-item label="字体粗细:">
      <a-input v-model:value="formConfig.currentItem.formItemContent.fontWeight" placeholder="请输入字体粗细" />
    </a-form-item>
    <a-form-item label="文字方向:">
      <a-select v-model:value="formConfig.currentItem.formItemContent.textAlign" placeholder="请选择字典取值" style="width: 100%">
        <a-select-option value="left">左</a-select-option>
        <a-select-option value="center">中</a-select-option>
        <a-select-option value="right">右</a-select-option>
      </a-select>
    </a-form-item>

    <!-- 是否显示编辑纯文本内容 -->
    <FormPureTextContent v-model:visible="showContent" v-if="showContent" v-model:form="formConfig.currentItem.formItemContent" />
  </div>
</template>

<script setup name="PureTextAttr">
import { inject, ref } from 'vue';
import FormPureTextContent from '../diaolog/pure-text-content.vue';

const formConfig = inject('formConfig');

// 是否显示编辑弹框
const showContent = ref(false);

// 点击编辑纯文本内容
const pureTextContent = () => {
  showContent.value = true;
};
</script>

<style></style>
