<!--
 * @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\Wform.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-27 16:27:26
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
 <el-form :model="tempData" :label-position="config.labelPosition">
    <el-form-item :label="item.label" v-for="item in config.formItem" :key="item.model" :label-width="item.labelWidth">
        <!-- //输入框配置 -->
      <el-input v-if="item.content.type=='input'" v-model="tempData[item.content.model]"  :readonly="item.content.readonly" :disabled="item.content.disabled" :type="item.content.textarea?'textarea':''"/>
      <!-- 多选框配置 -->
      <el-checkbox-group v-if="item.content.type=='checkbox'" v-model="tempData[item.content.model]">
            <el-checkbox :label="checkItem.val" :disabled="checkItem.disabled" v-for="checkItem in item.content.value" :key="checkItem.id"/>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {computed, ref} from "vue"
const prop = defineProps({
    config: {
        type: Object,
        default: {
            labelPosition:'top',
            formItem:[
            { //输入框
            label:'默认',
            labelWidth:'120px',
            content:{
                type:'input',
                model:"name",
                readonly:true,
                disabled:true,
                textarea:false
            }
            },
            {  //多选框
            label:'多选',
            labelWidth:'auto',
            content:{
                type:'checkbox',
                model:"checkbox",
                value:[{
                    id:1,
                    val:'多选',
                    disabled:true,
                }]
            }
            },]
        },
    },
    data: {
        type: Object,
        default: {
            name:'',
            checkbox:[]
        },
    }
})
const emit = defineEmits(['update:data'])
//实现父子组件数据双向绑定
const tempData = computed({
  get: () => prop.data,
  set: val => {
    emit('update:data', val)
  }
})

</script>

<style lang="scss" scoped>

</style>
