<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-input v-model="model.unit" placeholder="请输入单位"></a-input>
                        </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 { httpAction } from '@/api/manage'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { duplicateCheck } from '@/api/api'

export default {
    name: 'TblProtectionForm',
    components: {
        JFormContainer,
    },
    props: ['excludeIds', 'disabled'],
    data() {
        return {
            confirmLoading: false,
            labelCol: {
                xs: {
                    span: 24,
                },
                sm: {
                    span: 5,
                },
            },
            wrapperCol: {
                xs: {
                    span: 24,
                },
                sm: {
                    span: 16,
                },
            },
            model: {
                buyingClassify: 'P',
                meterialType: '4',
            },
            // 新增时子表默认添加几行空数据
            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/tblMaterial/add',
                edit: '/meterial/tblMaterial/edit',
                queryById: '/meterial/tblMaterial/queryById',
                tblPartSemifinished: {
                    list: '/meterial/tblMaterial/queryTblPartSemifinishedByMainId',
                },
            },
            showState: false,
        }
    },
    computed: {
        formDisabled() {
            return this.disabled
        },
    },
    created() {

    },
    methods: {
        add() {
            console.log(456)
        },
        edit(record) {
            this.model = record;
            console.log(record)
        },
        handleOk() {
            console.log(123);
            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>