<template>
  <div class="form-config">
    <div class="config-block">
      <h3>表单配置</h3>

      <!-- 第一行图片配置 -->
      <el-form-item label="图片显示">
        <el-switch v-model="localConfig.showImage" @change="handleConfigChange" />
      </el-form-item>

      <el-form-item v-if="localConfig.showImage" label="上传图片">
        <image-upload 
          v-model="localConfig.formImage" 
          :file-type='["png", "jpg", "jpeg", "gif"]' 
          :limit="1"
          @change="handleConfigChange"
        />
      </el-form-item>

      <!-- 提交按钮配置 -->
      <el-form-item label="提交按钮显示">
        <el-switch v-model="localConfig.showSubmitBtn" @change="handleConfigChange" />
      </el-form-item>

      <el-form-item v-if="localConfig.showSubmitBtn" label="按钮样式">
        <el-radio-group v-model="localConfig.submitBtnStyle" @change="handleConfigChange">
          <el-radio label="text">文字</el-radio>
          <el-radio label="image">图片</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 文字+背景色样式配置 -->
      <template v-if="localConfig.showSubmitBtn && localConfig.submitBtnStyle === 'text'">
        <el-form-item label="按钮文字">
          <el-input 
            v-model="localConfig.submitBtnText" 
            placeholder="请输入按钮文字"
            @change="handleConfigChange"
          />
        </el-form-item>

        <el-form-item label="按钮颜色">
          <el-color-picker
            v-model="localConfig.submitBtnColor"
            show-alpha
            @change="handleConfigChange"
          />
        </el-form-item>
      </template>

      <!-- 图片样式配置 -->
      <el-form-item v-if="localConfig.showSubmitBtn && localConfig.submitBtnStyle === 'image'" label="按钮图片">
        <image-upload 
          v-model="localConfig.submitBtnImage" 
          :file-type='["png", "jpg", "jpeg", "gif"]' 
          :limit="1"
          @change="handleConfigChange"
        />
      </el-form-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormConfigComponent',

  props: {
    config: {
      type: Object,
      required: false,
      default: () => ({
        showImage: true,
        formImage: '',
        showSubmitBtn: true,
        submitBtnStyle: 'text',
        submitBtnColor: '#409EFF',
        submitBtnText: '提交',
        submitBtnImage: ''
      })
    }
  },

  data() {
    return {
      localConfig: JSON.parse(JSON.stringify(this.config))
    }
  },

  methods: {
    handleConfigChange() {
      this.$emit('update:config', JSON.parse(JSON.stringify(this.localConfig)))
    }
  },

  watch: {
    config: {
      handler(newVal) {
        this.localConfig = JSON.parse(JSON.stringify(newVal))
      },
      deep: true
    },
    'localConfig.formImage'(newVal) {
      // 监听第一行图片变化，实时更新
      this.handleConfigChange()
    },
    'localConfig.submitBtnImage'(newVal) {
      // 监听提交按钮图片变化，实时更新
      this.handleConfigChange()
    }
  }
}
</script>

<style scoped>
.form-config {
  width: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.config-block {
  padding: 0px 15px;
}

h3 {
  font-weight: 500;
  margin: 15px 0 10px 0;
  color: #303133;
  font-size: 16px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

.el-form-item {
  margin-bottom: 16px;
}
</style>
