<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-cascader v-model="formData.areaCode"
                                            change-on-select
                                            :options="areaInfo"
                                            :fieldNames="fieldNames"
                                            :load-data="loadAreaData"
                                            @click.native="initLoadAreaData"
                                            placeholder="请选择"/>
                            </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
                                        placeholder="请输入备注，100字以内"
                                        :rows="6"
                                        :maxLength="100"
                                        v-model="formData.remarks"></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: {
                    // supplierName: undefined,
                    // contactsName: undefined,
                    // contactsPhone: undefined,
                },
                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: {},
                areaInfo: [],
                fieldNames: {
                    label: 'areaName',
                    value: 'areaCode',
                    children: 'children'
                },
            }
        },
        created() {
            this.queryParams = this.$route.query;
            if (this.queryParams.modeType === "update") {
                this.$api.common.fetchSupplyById(this.queryParams.id).then(({data, code}) => {
                    if (code === 'SUCCESS') {
                        this.areaInfo = [{areaCode: data.areaCode, areaName: data.areaName}]
                        const {areaCode, ...others} = data
                        this.formData = {...others};
                        this.formData.areaCode = [areaCode]

                    }
                }).catch(() => {
                });
            } else {
                this.initLoadAreaData()
            }
        },
        methods: {
            initLoadAreaData() {
                this.areaInfo = []
                this.loadAreaData([{areaCode: 0}])
            },
            loadAreaData(selectedOptions) {
                const targetOption = selectedOptions[selectedOptions.length - 1];
                targetOption.loading = true;
                this.$api.common.fetchAreaByCode({areaCode: targetOption.areaCode}).then(({data = []}) => {
                    targetOption.loading = false;
                    data.forEach(item => {
                        item['isLeaf'] = false
                    })
                    if (targetOption.areaCode == 0) {
                        this.areaInfo = [...data]

                    } else {
                        targetOption.children = [...data]
                        this.areaInfo = [...this.areaInfo]
                    }
                })
            },
            // 弹窗确定按钮
            submitForm() {
                let vm = this;
                this.$refs.formRef.validate(valid => {
                    if (true) {
                       // vm.subLoad = true;
                        const {areaCode, areaName, ...others} = vm.formData
                        let areaInfo = areaCode[areaCode.length -1]
                        let par = {
                            areaCode: areaInfo,
                            ...others
                        };
                        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>