<template>
    <div dir="invoice_form">
        <el-form :model="form" :rules="formRules" ref="form" label-position="top">
            <el-form-item prop="availableTaxes">
                <span slot="label">
                    <span style="margin-right:10px">可用税率</span>
                    <el-tag type="warning" v-if="isModifyAvailableTaxes">修改</el-tag>
                </span>
                <el-input v-model="form.availableTaxes" :readonly="readonly"></el-input>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="payees">
                        <span slot="label">
                            <span style="margin-right:10px">收款人</span>
                            <el-tag type="warning" v-if="isModifyPayees">修改</el-tag>
                        </span>
                        <el-input v-model="form.payees" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="reviewers">
                        <span slot="label">
                            <span style="margin-right:10px">审核者</span>
                            <el-tag type="warning" v-if="isModifyReviewers">修改</el-tag>
                        </span>
                        <el-input v-model="form.reviewers" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="defaultTaxCode" v-if="isISVPlatformMode1">
                        <span slot="label">
                            <span style="margin-right:10px">开票默认税收编码</span>
                            <el-tag type="warning" v-if="isModifyDefaultTaxCode">修改</el-tag>
                        </span>
                        <el-input v-model="form.defaultTaxCode" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="defaultItemName" v-if="isISVPlatformMode1">
                        <span slot="label">
                            <span style="margin-right:10px">开票默认项目名</span>
                            <el-tag type="warning" v-if="isModifyDefaultItemName">修改</el-tag>
                        </span>
                        <el-input v-model="form.defaultItemName" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
// 表单的默认值
const formDefault = {
    availableTaxes: '', // 可用税率
    payees: '', // 收款人
    reviewers: '', // 审核者
    defaultTaxCode: '', // 开票默认税收编码
    defaultItemName: '', // 开票默认项目名
}

export default {
    name: 'InvoiceForm',
    props: {
        // 1.输入信息
        // 2.用于覆盖已有数据
        inputInfo: {
            type: Object,
            default: null,
        },
        readonly: {
            type: Boolean,
            default: false
        },
        isvPlatform: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            oldFormData: null,// 原数据
            form: JSON.parse(JSON.stringify(formDefault)),
            formRules: {
                availableTaxes: [
                    { required: true, message: '可用税率不可为空', trigger: 'change' }
                ],
                defaultTaxCode: [
                    { required: true, message: '默认税收分类编码不可为空', trigger: 'change' }
                ],
                defaultItemName: [
                    { required: true, message: '默认商品名称不可为空', trigger: 'change' }
                ],
            },
        };
    },
    watch: {
        inputInfo(val) {
            this.updateForm(val);
        },
        isvPlatform(val) {
            this.isvPlatform = val;
        }
    },
    computed: {
        /**
        * 是否是上架模式1
        */
        isISVPlatformMode1() {
            return this.isvPlatform === 1;
        },
        // 可用税率
        isModifyAvailableTaxes() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.availableTaxes === this.form.availableTaxes ? false : true;
        },
        // 收款人
        isModifyPayees() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.payees === this.form.payees ? false : true;
        },
        // 审核者
        isModifyReviewers() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.reviewers === this.form.reviewers ? false : true;
        },
        // 开票默认税收编码
        isModifyDefaultTaxCode() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.defaultTaxCode === this.form.defaultTaxCode ? false : true;
        },
        // 开票默认项目名
        isModifyDefaultItemName() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.defaultItemName === this.form.defaultItemName ? false : true;
        }
    },
    methods: {
        updateForm(val) {
            if (val == null || (JSON.stringify(val) == "{}")) {
                this.oldFormData = null;
                this.form = JSON.parse(JSON.stringify(formDefault));
            } else {
                this.oldFormData = JSON.parse(JSON.stringify(val));
                this.form = {
                    availableTaxes: this.oldFormData.availableTaxes,
                    payees: this.oldFormData.payees,
                    reviewers: this.oldFormData.reviewers,
                    defaultTaxCode: this.oldFormData.defaultTaxCode == undefined ? null : this.oldFormData.defaultTaxCode,
                    defaultItemName: this.oldFormData.defaultItemName == undefined ? null : this.oldFormData.defaultItemName,
                }
            }
        },
        /**
         * 对外暴露获取数据的方法，内部进行表单的校验，父组件中通过refs调用
         */
        getFormInfo() {
            return new Promise((resolve, reject) => {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        resolve(JSON.parse(JSON.stringify(this.form)))
                    } else {
                        reject('输入信息不合法，请检查您的输入信息！')
                    }
                });
            })
        },
        /**
         * 对外暴露取消表单验证提示的方法
         */
        resetFormFields() {
            // 取消验证提示
            this.$refs['form'].resetFields();
        },
    },
    mounted() {
        this.updateForm(this.inputInfo);
    }
}
</script>

<style scoped>
</style>