import { defineComponent } from "vue";
import YdCopy from '../ydCopy/index'
import UploadImg from '../uploadImg/index'
import { getValue } from '../util/index'

export default defineComponent({
    name: "FormDetail",
    props: {
        formArray: {
            type: Array,
            default: () => ([])
        },
        detail: {
            type: Object,
            default: () => ({})
        },
        span: {
            type: Number,
            default: 12
        },
        copy: {
            type: Boolean,
            default: false
        }
    },
    setup (prop, context) {
        const { formArray, detail, span, copy } = prop


        return () => (
            <a-row>
                {
                    formArray.map(it => {
                        return <a-col span={span} >
                            <a-form-item label={it.label}>
                                {
                                    it.type === 'image' && <UploadImg isDetail={true} initList={detail[it.attr] || []} ></UploadImg>
                                }
                                {
                                    it.type === 'select' && getValue(detail[it.attr], it.options).name
                                }
                                {
                                    !it.slot && !it.type && detail[it.attr]
                                }

                                {
                                    it.slot ? context.slots[it.attr](detail[it.attr]) : null
                                }
                                {copy && detail[it.attr]  ? <YdCopy value={detail[it.attr].toString()}></YdCopy> : null}
                            </a-form-item>
                        </a-col>
                    })
                }
            </a-row>
        )
    }
});