<template>
  <el-row :gutter="6">
    <el-col :span="4">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>操作区</span>
          </div>
        </template>

        <el-space>
          <el-tooltip
            effect="dark"
            content="输入，请按照提示填写"
            placement="top"
          >
            <el-button type="success" @click="addItem('input')">单文本</el-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="单选，选中则为答案"
            placement="top"
          >
            <el-button type="success" @click="addItem('radio')">单选</el-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="多选，选中则为答案"
            placement="top"
          >
            <el-button type="success" @click="addItem('checkbox')">多选</el-button>
          </el-tooltip>
        </el-space>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>编辑区</span>
          </div>
        </template>
        <StateFormAdd v-model="modelValue" ref="stateFormAddRef" :checkValue="checkValue" @refresh="onSubmit"></StateFormAdd>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>预览区</span>
          </div>
        </template>
        <StateFormView v-model="modelValue" :buttonStatus="buttonStatus" ref="stateFormViewRef"></StateFormView>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import StateFormAdd from "@/components/StateFormAdd";
import StateFormView from "@/components/StateFormView";
import {getCurrentInstance, toRefs} from "vue";
const {proxy} = getCurrentInstance();
const emit = defineEmits(['onSubmit'])

const props = defineProps({
  modelValue: {
    type: Array,
    required: true
  },
  buttonStatus: {
    type: Boolean,
    default: false
  },
  checkValue: {
    type: Number,
    required: true
  }
})

const { modelValue, buttonStatus } = toRefs(props);


//提交
const onSubmit= () =>{
    console.log(JSON.stringify(modelValue.value))
    emit('onSubmit');
}

const addItem = (type) => {
  proxy.$refs.stateFormAddRef.addItem(type)
}
</script>
<style scoped lang="scss">

</style>
