<template>
    <div id="ent_init_info_form">
        <el-tabs v-model="activeName" stretch>
            <el-tab-pane label="上架模式" name="first">
                <br />
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ oldDataCaption }}</span>
                            </div>
                            <InitModelForm
                                ref="oldInitModelForm"
                                v-model="isvPlatform"
                                :inputInfo="oldInitModelForm"
                                :readonly="true"
                            ></InitModelForm>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ newDataCaption }}</span>
                            </div>
                            <InitModelForm
                                ref="newInitModelForm"
                                :inputInfo="newInitModelForm"
                                v-model="isvPlatform"
                            ></InitModelForm>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="企业信息" name="second">
                <br />
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ oldDataCaption }}</span>
                            </div>
                            <EntInfoForm
                                ref="oldEntInfoForm"
                                :inputInfo="oldEntInfoForm"
                                :readonly="true"
                            ></EntInfoForm>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ newDataCaption }}</span>
                            </div>
                            <EntInfoForm
                                ref="newEntInfoForm"
                                :inputInfo="newEntInfoForm"
                                :isvPlatform="isvPlatform"
                            ></EntInfoForm>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="发票相关信息" name="third">
                <br />
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ oldDataCaption }}</span>
                            </div>
                            <InvoiceForm
                                ref="oldInvoiceForm"
                                :inputInfo="oldInvoiceForm"
                                :readonly="true"
                            ></InvoiceForm>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ newDataCaption }}</span>
                            </div>
                            <InvoiceForm
                                ref="newInvoiceForm"
                                :inputInfo="newInvoiceForm"
                                :isvPlatform="isvPlatform"
                            ></InvoiceForm>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="税控设备信息" name="fourth">
                <br />
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ oldDataCaption }}</span>
                            </div>
                            <TaxHardwareForm
                                ref="oldTaxHardwareForm"
                                :inputInfo="oldTaxHardwareForm"
                                :readonly="true"
                            ></TaxHardwareForm>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card>
                            <div slot="header" style="text-align:center">
                                <span>{{ newDataCaption }}</span>
                            </div>
                            <TaxHardwareForm
                                ref="newTaxHardwareForm"
                                :inputInfo="newTaxHardwareForm"
                                :isvPlatform="isvPlatform"
                            ></TaxHardwareForm>
                        </el-card>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import InitModelForm from '@/pages/ent_init/components/init_model_form'
import EntInfoForm from '@/pages/ent_init/components/ent_info_form'
import InvoiceForm from '@/pages/ent_init/components/invoice_form'
import TaxHardwareForm from '@/pages/ent_init/components/tax_hardware_form'

// 默认显示的tab选项卡
const defaultActive = 'first';

// 卡片标题
const oldDataCaption = ''
const newDataCaption = ''

export default {
    name: 'EntInitInfoForm',
    props: {
        // 1.输入信息
        // 2.用于覆盖已有数据
        inputInfo: {
            type: Object,
            default: null,
        }
    },
    components: {
        InitModelForm,
        EntInfoForm,
        InvoiceForm,
        TaxHardwareForm
    },
    data() {
        return {
            oldEntInitData: null,// 原数据
            activeName: defaultActive,
            oldDataCaption: '原始数据',
            newDataCaption: '编辑数据',
            isvPlatform: null,
            oldInitModelForm: {},
            newInitModelForm: {},
            oldEntInfoForm: {},
            newEntInfoForm: {},
            oldInvoiceForm: {},
            newInvoiceForm: {},
            oldTaxHardwareForm: {},
            newTaxHardwareForm: {}
        };
    },
    watch: {
        inputInfo(val) {
            this.updateForm(val);
        }
    },
    methods: {
        updateForm(val) {
            if (val == null || (JSON.stringify(val) == "{}")) {
                this.form = JSON.parse(JSON.stringify(formDefault));
            } else {
                let tempData = val.hasEdit ? JSON.parse(val.editedItemData) : JSON.parse(val.oriItemData);
                this.oldEntInitData = JSON.parse(JSON.stringify(tempData));

                this.oldInitModelForm = tempData;
                this.oldEntInfoForm = tempData;
                this.oldInvoiceForm = tempData;
                this.oldTaxHardwareForm = tempData;
                this.newInitModelForm = tempData;
                this.newEntInfoForm = tempData;
                this.newInvoiceForm = tempData;
                this.newTaxHardwareForm = tempData;
            }
            this.activeName = defaultActive;
            this.isvPlatform = this.newInitModelForm.isvPlatform;
        },
        /**
         * 对外暴露获取数据的方法，内部进行表单的校验，父组件中通过refs调用
         */
        getEntInitInfo() {
            let tempData = {};
            return new Promise((resolve, reject) => {
                this.$refs['newInitModelForm'].getFormInfo().then(val => {
                    Object.assign(tempData, val);
                    this.$refs['newEntInfoForm'].getFormInfo().then(val => {
                        Object.assign(tempData, val);
                        this.$refs['newInvoiceForm'].getFormInfo().then(val => {
                            Object.assign(tempData, val);
                            this.$refs['newTaxHardwareForm'].getFormInfo().then(val => {
                                Object.assign(tempData, val);
                                let ret = JSON.parse(JSON.stringify(this.oldEntInitData));
                                Object.assign(ret, tempData);
                                resolve(ret);
                            }).catch(err => {
                                this.activeName = 'fourth';
                                reject(err);
                            });
                        }).catch(err => {
                            this.activeName = 'third';
                            reject(err);
                        });
                    }).catch(err => {
                        this.activeName = 'second';
                        reject(err);
                    });
                }).catch(err => {
                    this.activeName = 'first';
                    reject(err);
                });
            });
        },
        /**
         * 对外暴露主键重置方法
         */
        reset() {
            // 取消验证提示
            this.$refs['newInitModelForm'].resetFormFields();
            this.$refs['newEntInfoForm'].resetFormFields();
            this.$refs['newInvoiceForm'].resetFormFields();
            this.$refs['newTaxHardwareForm'].resetFormFields();
            this.$refs['oldInitModelForm'].resetFormFields();
            this.$refs['oldEntInfoForm'].resetFormFields();
            this.$refs['oldInvoiceForm'].resetFormFields();
            this.$refs['oldTaxHardwareForm'].resetFormFields();

            this.activeName = defaultActive;
        },
    },
    mounted() {
        this.updateForm(this.inputInfo);
    }
}
</script>

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