<template>
    <span class="detail-form-container">
        <el-form ref="detailForm" :model="formData" :label-width="labelWidth" :disabled="false"
                 style="margin-right:40px;">
            <el-row :gutter="20" :span="24">
                <template v-for="(item, index) in formItems">
                    <el-col :span="item.span?item.span:(24/colNum)" :xs="12">
                        <el-form-item v-if="item.visible" :label="item.label" :prop="item.prop">
                        <el-input readonly v-model="formData[item.prop]"
                                  :placeholder="item.placeholder || `请输入${item.label}`"
                                  :clearable="item.clearable">
                        </el-input>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>
    </span>
</template>

<script>
export default {
    name: 'vDetailForm',
    props: {
        colNum: {
            default: 3
        },
        // 标题
        title: {
            type: String,
            default: '详情信息'
        },
        // 表单配置项
        formItems: {
            type: Array,
            required: true,
            validator: value => {
                return value.every(item => {
                    return item.label && item.prop
                })
            }
        },
        // 表单数据
        formData: {
            type: Object,
            required: true,
            default: {}
        },
        labelWidth: {
            type: String,
            default: '120px'
        },
        // 标签位置
        labelPosition: {
            type: String,
            default: 'right',
            validator: value => ['right', 'left', 'top'].includes(value)
        },
        // 行间距
        rowGutter: {
            type: Number,
            default: 20
        },
        // 列跨度
        colSpan: {
            type: Object,
            default: () => ({})
        },
        // 加载状态
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // formData: JSON.parse(JSON.stringify(this.value)),
            // originalData: JSON.parse(JSON.stringify(this.value))
        };
    },
    watch: {
        value: {
            deep: true,
            handler(newVal) {
                //  this.formData = JSON.parse(JSON.stringify(newVal))
                //  this.originalData = JSON.parse(JSON.stringify(newVal))
            }
        }
    },
    methods: {}

}
</script>
<style scoped>
.detail-form-container {
    padding: 20px;
}

.detail-card {
    max-width: 1200px;
    margin: 0 auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
}

.card-actions {
    display: flex;
    align-items: center;
}
</style>

<v-dialog ref="formDiag" width="35%" title="详情">            <!--            <form-panel @saved="onFormSaved"></form-panel>-->
    <v-detail-form title="详情信息" :form-items="formItems" col-num="2" :form-data="userData" :label-width="'110px'"/>
    <div slot="footer">
        <!--  <el-button type="primary" @click="$refs.formDiag.dispatch('submit')">保存</el-button>-->
        <el-button type="default" @click="()=>{$refs.formDiag.hide()}">关闭</el-button>
    </div>
</v-dialog>

userData: {},
formItems: [
    {
        'prop': 'customerName',
        'label': '客户名称',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'parentName',
        'label': '产品大类',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'productTypeName',
        'label': '产品类型',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'factroyIssueDate',
        'label': 'factroyIssueDate',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'moneyType',
        'label': 'moneyType',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'payMode',
        'label': 'payMode',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'orderMoney',
        'label': '订单金额',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'totalMoney',
        'label': '总金额',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'customerOrderCode',
        'label': '客户订单号',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'createDate',
        'label': 'createDate',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'moneyTypeName',
        'label': '币种',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'epOrderCode',
        'label': 'EP订单号',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'productType',
        'label': 'productType',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'qty',
        'label': '数量',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'price',
        'label': '价格',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'productId',
        'label': 'productId',
        'labelLength': '',
        'visible': false
    },

    {
        'prop': 'epCode',
        'label': '款号',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'code',
        'label': '客户款号',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'includeTax',
        'label': 'includeTax',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'money',
        'label': 'money',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'orderDate',
        'label': '下单日期',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'customerIssueDate',
        'label': '交付日期',
        'labelLength': '',
        'visible': true
    },
    {
        'prop': 'checkDate',
        'label': 'checkDate',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'id',
        'label': 'id',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'createBy',
        'label': 'createBy',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'productSubType',
        'label': 'productSubType',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'orderType',
        'label': '订单类型',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'product',
        'label': 'product',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'invoiceNo',
        'label': 'invoiceNo',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'productTypeId',
        'label': 'productTypeId',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'parentId',
        'label': 'parentId',
        'labelLength': '',
        'visible': false
    },
    {
        'prop': 'remark',
        'label': '规格',
        'labelLength': '',
        'visible': true,
        span: 24
    }
]