<!--
 * @Author: Devin
 * @Date: 2023-02-07 14:24:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-17 16:47:02
 * @Description: card-demo
-->
<template>
  <div class="complex-form-demo">
    <el-row :gutter="20">
      <el-col :span="12">
        <!-- <common-complex-form
          :complex-forms="complexForms"
        ></common-complex-form> -->
      </el-col>

      <el-col :span="12">
        <common-complex-form
          :complex-forms="complexForms"
          :form-values="formValues"
        >
          <template #slotName>
            <el-input v-model="formValues.slotName"></el-input>
          </template>
          <template #slotAge>
            <el-input v-model="formValues.slotAge"></el-input>
          </template>
        </common-complex-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import DemoComponent from './form-config/DemoComponent.vue';

const dom = shallowRef({ demo: DemoComponent });

// 复杂表单
const complexForms = ref<any>([
  {
    label: '名称',
    name: 'name',
    type: 'input',
    attrs: {
      placeholder: '请输入名称'
    }
  },
  {
    label: '标识符',
    name: 'log',
    type: 'input',
    attrs: {
      placeholder: '请输入标识符'
    }
  },
  {
    label: '数据类型',
    name: 'dataType',
    type: 'select',
    attrs: {
      placeholder: '请选择数据类型',
      clearable: true,
      options: [
        { label: '文本', value: 'text' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' },
        { label: '枚举', value: 'enum' }
      ]
    },
    childForms: {
      text: [{ label: '读写类型', name: 'type', type: 'radio' }],
      number: [
        { label: '精度', name: 'jingdu', type: 'input' },
        { label: '单位', name: 'unit', type: 'select' },
        { label: '读写类型', name: 'type', type: 'radio' }
      ],
      date: [
        { label: '时间格式', name: 'dateformate', type: 'input' },
        { label: '读写类型', name: 'type', type: 'radio' }
      ],
      enum: [{ label: '读写类型', name: 'type', type: 'radio-group' }]
    }
  },
  {
    label: '数据长度',
    name: 'data',
    type: 'input',
    attrs: {
      placeholder: '请输入数据长度'
    }
  },
  {
    label: 'commont测试',
    name: 'data',
    type: 'component',
    componentId: dom.value.demo
  },
  {
    label: 'slot',
    name: 'slotName',
    type: 'slot',
    slotName: 'slotName'
  },
  {
    label: 'slot',
    name: 'slotAge',
    type: 'slot',
    slotName: 'slotAge'
  }
]);

const formValues = ref<any>({
  name: '',
  log: '',
  dataType: '',
  type: '',
  jingdu: '',
  unit: '',
  dateformate: '',
  data: ''
});
</script>

<style scoped lang="scss">
.complex-form-demo {
  padding: 20px;
  background: #fff;
}
</style>