<!-- 动态表单明细组件 -->
 <!-- 新功能禁止使用该组件 -->
<template>
  <el-form-item :label-width="props.fieldSet?.labelWidth" :label="props.fieldSet?.name" :prop="props.fieldSet?.key" :required="props.fieldSet?.required">
    <!-- 文本 -->
    <el-text v-if="props.fieldSet?.type==='text'" style="width: 100%;" v-model="formModel[props.fieldSet?.key]" >
      <Text :data="formModel[props.fieldSet?.key]"></Text>
    </el-text>
    <!-- 文本框 -->
    <el-input v-else-if="props.fieldSet?.type==='input'" v-model="formModel[props.fieldSet?.key]" 
    :placeholder="props.fieldSet?.placeholder?props.fieldSet?.placeholder:'请输入'+props.fieldSet?.name" 
    :disabled="props.fieldSet?.disabled" />
    <!-- 下拉框 -->
    <el-select v-else-if="props.fieldSet?.type==='select'"  v-model="formModel[props.fieldSet?.key]" 
    :placeholder="props.fieldSet?.placeholder?props.fieldSet?.placeholder:'请选择'+props.fieldSet?.name" 
    :disabled="props.fieldSet?.disabled" clearable filterable style="width: 100%;">
      <el-option v-for="item in props.fieldSet?.listData" :key="item.value" :label="item.label"  :value="item.value" :disabled="item.disabled" />
    </el-select>
    <!-- 单选 -->
    <el-radio-group  v-else-if="props.fieldSet?.type==='radio'" v-model="formModel[props.fieldSet?.key]" :disabled="props.fieldSet?.disabled">
      <el-radio v-for="item in props.fieldSet?.listData" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
    </el-radio-group>
    <!-- 多选 -->
    <el-checkbox-group v-else-if="props.fieldSet?.type==='checkbox'"  v-model="formModel[props.fieldSet?.key]" :disabled="props.fieldSet?.disabled">
      <el-checkbox v-for="item in props.fieldSet?.listData" :label="item.value" :disabled="item.disabled">{{item.label}}</el-checkbox>
    </el-checkbox-group>
    <!-- 时间选择器 -->
    <el-date-picker style="width: 100%;" v-else-if="dataPickerType.find((o: any) => o.type === props.fieldSet?.type) "  v-model="formModel[props.fieldSet?.key]" :disabled="props.fieldSet?.disabled"
      :type="props.fieldSet?.type" unlink-panels range-separator="-" 
      :start-placeholder="props.fieldSet?.placeholder?'开始'+props.fieldSet?.placeholder:'开始'+props.fieldSet?.name"
      :end-placeholder="props.fieldSet?.placeholder?'结束'+props.fieldSet?.placeholder:'结束'+props.fieldSet?.name"
      :value-format="dataPickerType.find((o: any) => o.type === props.fieldSet?.type).valueFormat" />
    <!-- 不指定类型、无类型不输出 -->
    <template v-else></template>
  </el-form-item>
</template>
  
<script setup lang="ts">
import Text from "@/framework/components/standard/Text/index.vue";
/**时间选择器配置 */
let dataPickerType=[
  {type:'year',valueFormat:'YYYY'}, 
  {type:'month',valueFormat:'YYYY-MM'}, 
  {type:'date' ,valueFormat:'YYYY-MM-DD'},  
  {type:'dates' ,valueFormat:'YYYY-MM-DD'}, 
  {type:'datetime' ,valueFormat:'YYYY-MM-DD HH:mm:ss'}, 
  {type:'week' }, 
  {type:'datetimerange' ,valueFormat:'YYYY-MM-DD HH:mm:ss'}, 
  {type:'daterange' ,valueFormat:'YYYY-MM-DD'}, 
  {type:'monthrange',valueFormat:'YYYY-MM'}, 
]
let props = defineProps({
  formModel: {type:Object},//表单函数
  editable:{type:Boolean,default:true},//可编辑
  //当前字段设置
  fieldSet: { 
    type:Object,
    default:{
      key:String,//字段Key
      name:String, //显示名称
      placeholder:String, //默认提示
      required:Boolean,//是否必填
      labelWidth:{type:String,default:'82px'},//标签宽度
      show: { type: Boolean, default: true },//是否显示
      disabled:Boolean,//是否禁用
      type:String,//输入类型，当前支持input、select、radio、checkbox
      //列表数据，当type为select、radio、checkbox时使用
      listData:{
        type:Array,
        default:[
          {
            value:String,//值
            text:String,//文本显示、
            disabled:Boolean,//是否禁用
          }
        ]},
    }
  },
  
})

  </script>
  <style lang="scss" scoped>
  
  </style>
  