<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partNumber">
                            <a-input v-model="model.partNumber" placeholder="请输入编号" :disabled="this.excludeIds !== ''">
                            </a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="品名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
                            <a-input v-model="model.productName" placeholder="请输入品名"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                            <a-input v-model="model.type" placeholder="请输入型号"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spec">
                            <a-input v-model="model.spec" placeholder="请输入规格"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">
                            <j-dict-select-tag type="selectUnit" placeholder="请选择单位" v-model="model.unit" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierName">
                            <a-input v-model="model.supplierName" placeholder="请输入供应商名称"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="产品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pics">
                            <j-image-upload isMultiple v-model="model.pics"></j-image-upload>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </j-form-container>
    </a-spin>
</template>
  
<script>
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { duplicateCheck } from '@/api/api'
import { httpAction } from '@/api/manage'
export default {
    name: 'TblConsumablesForm',
    mixins: [JVxeTableModelMixin],
    components: {
        JFormContainer,
    },
    props: ['excludeIds', 'disabled'],
    data() {
        return {
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                },
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                },
            },
            model: {
                meterialType: "3",
                buyingClassify: "P"
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            validatorRules: {
                partNumber: [
                    { required: true, message: '请输入编号!' },
                    { validator: this.validatePartNumber }
                ],
                productName: [{ required: true, message: '请输入品名!' },],
                type: [{ required: true, message: '请输入型号!' },],
                spec: [{ required: true, message: '请输入规格!' },],
                unit: [{ required: true, message: '请输入单位!' },],
                supplierName: [{ required: true, message: '请输入供应商名称!' }],
                pics: [{ required: true, message: '请上传产品图片!' }]
            },
            url: {
                add: "/meterial/consumables/add",
                edit: "/meterial/consumables/edit",
                queryById: "/meterial/consumables/queryById",
                // tblPartSemifinished: {
                //     list: '/meterial/tblMaterial/queryTblPartSemifinishedByMainId'
                // },
            }
        }
    },
    computed: {
        formDisabled() {
            return this.disabled
        },
    },
    created() {

    },
    methods: {
        add() {
            console.log(456)
        },
        edit(record) {
            this.model = record;
        },
        handleOk() {
            const that = this
            // 触发表单验证
            this.$refs.form.validate((valid) => {
                if (valid) {
                    that.confirmLoading = true
                    let httpurl = ''
                    let method = ''
                    if (!this.model.id) {
                        httpurl += this.url.add
                        method = 'post'
                    } else {
                        httpurl += this.url.edit
                        method = 'put'
                    }
                    httpAction(httpurl, this.model, method)
                        .then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        })
                        .finally(() => {
                            that.confirmLoading = false
                            that.close()
                        })
                } else {
                    return false
                }
            })
        },
        close() {
            this.$emit('close');
            this.visible = false;
            this.$refs.form.clearValidate();
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        validatePartNumber(rule, value, callback) {
            var params = {
                tableName: "tbl_material",
                fieldName: "part_number",
                fieldVal: value,
                dataId: this.model.id
            };
            duplicateCheck(params).then((res) => {
                if (res.success) {
                    callback();
                } else {
                    callback('编号已存在');
                }
            })
        },
    }
}
</script>
  
<style scoped></style>