<template>
    <div class="inStockAdd">
        <a-card style="height: 100vh">
            <div>
                <span style="font-size: 16px;font-weight: bold">添加供应商</span>
            </div>
            <div style="width:75%;margin: 0 auto;margin-top: 20px">
                <a-form-model ref="formRef" :model="formData" :rules="formRules"
                              :labelCol="{span: 6}"
                              :wrapperCol="{span: 16}"
                >
                    <a-row :gutter="16">
                        <a-col :span="24">
                            <a-form-model-item label="供应商名称"
                                               prop="supplierName"
                                               :labelCol="{span: 3}"
                                               :wrapperCol="{span: 20}">
                                <a-input v-model="formData.supplierName"
                                         placeholder="请输入供应商名称"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="联系人" prop="contactsName">
                                <a-input v-model="formData.contactsName"
                                         placeholder="请输入联系人"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="联系人电话" prop="contactsPhone">
                                <a-input v-model="formData.contactsPhone"
                                         placeholder="请输入联系人电话"></a-input>
                            </a-form-model-item>

                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="联系地址"
                                               prop="areaCode">
                                <allAreaSelect v-model="formData.areaCode"></allAreaSelect>
                                {{formData.areaName}}
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="详细地址"
                                               prop="address"
                                               :labelCol="{span: 3}"
                                               :wrapperCol="{span: 20}">
                                <a-input v-model="formData.address"
                                         placeholder="请输入详细地址"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="备注"
                                               prop="remarks"
                                               :labelCol="{span: 3}"
                                               :wrapperCol="{span: 20}">
                                <a-textarea
                                        :rows="6"
                                        v-model="formData.remarks"
                                        placeholder="请输入备注"></a-textarea>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
            <div style="text-align: center">
                <a-button class="search_btn btn_space" @click="goBack">取消</a-button>
                <a-button type="primary" class="search_btn btn_space" :loading="subLoad" style="margin-left: 10px"
                          @click="submitForm">保存
                </a-button>
            </div>
        </a-card>
    </div>
</template>
<script>
    import moment from 'moment'
    import allAreaSelect from '../../../components/allAreaSelect'
    import {checkPhone, closedDetail} from "../../../utils/common";

    export default {
        components: {allAreaSelect},
        data() {
            return {
                subLoad: false,
                // form表单
                formData: {},
                formRules: {
                    supplierName: [
                        {required: true, message: '请选择供应商名称', trigger: 'change'},
                    ],
                    contactsName: [
                        {required: true, message: '请输入联系人', trigger: 'change'}
                    ],
                    contactsPhone: [
                        {required: true, message: '请输入联系人电话', trigger: 'change'},
                        {validator: checkPhone},
                    ],
                    areaCode: [
                        {required: true, message: '请选择联系地址', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入详细地址', trigger: 'change'}
                    ],
                },
                queryParams: {},
            }
        },
        created() {
            this.queryParams = this.$route.query;
            if (this.queryParams.modeType === "update") {
                this.$api.common.fetchSupplyById(this.queryParams.id).then(res => {
                    console.log(889, res.data)
                    if (res.code === 'SUCCESS') {
                        this.formData = res.data;
                    }
                }).catch(() => {
                });
            }
        },
        methods: {
            // 弹窗确定按钮
            submitForm() {
                let vm = this;
                this.$refs.formRef.validate(valid => {
                    if (valid) {
                        vm.subLoad = true
                        let par = {
                            ...vm.formData
                        };
                        if (this.queryParams.modeType === 'add') {
                            vm.$api.common.fetchAddSupply(par).then(res => {
                                this.subLoad = false;
                                if (res.code === 'SUCCESS') {
                                    vm.$message.success('保存成功！')
                                    vm.goBack()
                                }
                            }).catch(() => {
                                this.subLoad = false
                            })
                        }
                        if (this.queryParams.modeType === 'update') {
                            vm.$api.common.fetchSupplUpdate(par).then(res => {
                                this.subLoad = false;
                                if (res.code === 'SUCCESS') {
                                    vm.$message.success('修改成功！')
                                    vm.goBack()
                                }
                            }).catch(() => {
                                this.subLoad = false
                            })
                        }
                    }
                });
            },
            goBack() {
                closedDetail('/supplyManage/add', '/Home/supplyManage')
            }
        },
    }
</script>
<style lang="less" scoped>

</style>
