<template>
    <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
        <el-card>
            <div slot="header">
                <span>企业资料申领信息</span>
                <el-button
                    v-if="isEditMode"
                    style="float: right; padding: 0 5px"
                    type="text"
                    @click="handleSubmitSave"
                >
                    保 存
                </el-button>
                <el-button
                    v-else
                    style="float: right; padding: 0 5px"
                    type="text"
                    @click="isEditMode = true"
                >
                    编 辑
                </el-button>
                <el-button
                    style="float: right; padding: 0 5px"
                    type="text"
                    @click="handleRefresh"
                >
                    {{ isEditMode ? "取 消" : "刷 新" }}
                </el-button>
            </div>
            <div>
                <el-form
                    ref="entExpressAddressForm"
                    :model="form"
                    :rules="rules"
                    label-width="170px"
                    style="max-width: 800px"
                    :disabled="!isEditMode"
                >
                    <el-form-item label="票据接收方式：" prop="getWay">
                        <el-select v-model="form.getWay" placeholder="请选择">
                            <el-option
                                v-for="item in invoiceGetWayOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="联系人："
                        prop="receiverName"
                        v-if="isGetway23"
                    >
                        <el-input v-model="form.receiverName"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item
                                label="移动电话："
                                prop="mobilePhoneNumber"
                                v-if="isGetway23"
                            >
                                <el-input
                                    v-model="form.mobilePhoneNumber"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="固定电话："
                                prop="fixedPhoneNumber"
                                v-if="isGetway23"
                            >
                                <el-input
                                    v-model="form.fixedPhoneNumber"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item
                                label="邮政编码："
                                prop="zipCode"
                                v-if="isGetway23"
                            >
                                <el-input v-model="form.zipCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="邮寄地址："
                                prop="receiverAddress"
                                v-if="isGetway23"
                            >
                                <el-input
                                    v-model="form.receiverAddress"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import ENT_DOC from "@/api/ent-doc";
import cache from "@/utils/cache";

// 企业资料申领领购方式
const invoiceGetWayOptions = [
    {
        value: 1,
        label: "自行领取",
    },
    {
        value: 2,
        label: "邮寄到付",
    },
    {
        value: 3,
        label: "邮寄寄付后返款",
    },
];

export default {
    name: "EntExpressAddress",
    data() {
        return {
            loading: false,
            isEditMode: false, // 编辑模式
            existAddress: false, // 是否存在地址
            entName: "",
            entTaxId: "",
            invoiceGetWayOptions: invoiceGetWayOptions,
            form: {
                getWay: 1, // 领取方式
                receiverName: "", // 收件人姓名
                mobilePhoneNumber: "", // 移动电话
                fixedPhoneNumber: "", // 固定电话
                receiverAddress: "", // 快递地址
                zipCode: "", // 邮编
            },
            rules: {
                getWay: [
                    {
                        required: true,
                        message: "请选择票据接收方式",
                        trigger: "change",
                    },
                ],
                receiverName: [
                    {
                        required: true,
                        message: "请输入收件人",
                        trigger: "change",
                    },
                ],
                mobilePhoneNumber: [
                    {
                        required: true,
                        message: "请输入移动电话",
                        trigger: "change",
                    },
                ],
                fixedPhoneNumber: [
                    {
                        required: true,
                        message: "请输入固定电话",
                        trigger: "change",
                    },
                    {
                        min: 1,
                        max: 15,
                        message: "固定电话长度最多为15个字符",
                        trigger: "change",
                    },
                ],
                receiverAddress: [
                    {
                        required: true,
                        message: "请输入快递地址",
                        trigger: "change",
                    },
                ],
                zipCode: [
                    {
                        required: true,
                        message: "请输入邮政编码",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    created() {
        this.callGetEntDoc();
    },
    computed: {
        // 是否是快递配送
        isGetway23() {
            return this.form.getWay == 2 || this.form.getWay == 3;
        },
    },
    methods: {
        handleRefresh() {
            this.callGetEntDoc();
        },
        callGetEntDoc() {
            let _this = this;
            _this.loading = true;
            ENT_DOC.getEntDoc()
                .then((val) => {
                    _this.loading = false;
                    _this.isEditMode = false;
                    _this.form.getWay = "";
                    _this.form.receiverName = "";
                    _this.form.receiverAddress = "";
                    _this.form.mobilePhoneNumber = "";
                    _this.form.zipCode = "";
                    _this.form.fixedPhoneNumber = "";

                    if (val.data) {
                        _this.form.getWay = val.data.getWay;
                        _this.form.receiverName = val.data.receiverName;
                        _this.form.receiverAddress = val.data.receiverAddress;
                        _this.form.mobilePhoneNumber =
                            val.data.mobilePhoneNumber;
                        _this.form.zipCode = val.data.zipCode;
                        _this.form.fixedPhoneNumber = val.data.fixedPhoneNumber;
                    }
                })
                .catch((error) => {
                    _this.loading = false;
                    _this.$message.error(error);
                });
        },
        handleSubmitSave() {
            let _this = this;
            _this.$refs.entExpressAddressForm.validate((valid) => {
                if (valid) {
                    _this.loading = true;
                    ENT_DOC.saveEntDoc({
                        getWay: _this.form.getWay,
                        receiverName: _this.form.receiverName,
                        receiverAddress: _this.form.receiverAddress,
                        mobilePhoneNumber: _this.form.mobilePhoneNumber,
                        zipCode: _this.form.zipCode,
                        fixedPhoneNumber: _this.form.fixedPhoneNumber,
                    })
                        .then((val) => {
                            _this.loading = false;
                            _this.$message.success(val.msg);

                            _this.callGetEntDoc();
                        })
                        .catch((error) => {
                            _this.loading = false;
                            _this.$message.error(error);
                        });
                } else {
                    _this.$message.error(
                        "输入信息不合法，请检查您的输入信息！"
                    );
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="stylus" scoped></style>