<template>
    <div id="init_model_form">
        <el-form :model="form" :rules="formRules" ref="form" label-position="top">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="isvPlatform">
                        <span slot="label">
                            <span style="margin-right:10px">上架模式</span>
                            <el-tag type="warning" v-if="isModifyISVPlatform">修改</el-tag>
                        </span>
                        <el-select
                            v-model="form.isvPlatform"
                            :disabled="readonly"
                            placeholder="请选择"
                            style="width:100%"
                            @change="handleISVPlatformChange"
                        >
                            <el-option
                                v-for="item in isvPlatforms"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="taxToken" v-if="isISVPlatformMode1">
                        <span slot="label">
                            <span style="margin-right:10px">激活码</span>
                            <el-tag type="warning" v-if="isModifyTaxToken">修改</el-tag>
                        </span>
                        <el-input v-model="form.taxToken" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="taxMachineNo">
                        <span slot="label">
                            <span style="margin-right:10px">税控服务器编号</span>
                            <el-tag type="warning" v-if="isModifyTaxMachineNo">修改</el-tag>
                        </span>
                        <el-input v-model="form.taxMachineNo" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="devicePos">
                        <span slot="label">
                            <span style="margin-right:10px">上架设备的端口位置</span>
                            <el-tag type="warning" v-if="isModifyDevicePos">修改</el-tag>
                        </span>
                        <el-input v-model="form.devicePos" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="deviceType">
                        <span slot="label">
                            <span style="margin-right:10px">上架设备类型</span>
                            <el-tag type="warning" v-if="isModifyDeviceType">修改</el-tag>
                        </span>
                        <el-select
                            v-model="form.deviceType"
                            :disabled="readonly"
                            placeholder="请选择"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in deviceTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="defaultInvoiceDevice">
                        <span slot="label">
                            <span style="margin-right:10px">默认开票设备</span>
                            <el-tag type="warning" v-if="isModifyDefaultInvoiceDevice">修改</el-tag>
                        </span>
                        <el-select
                            v-model="form.defaultInvoiceDevice"
                            :disabled="readonly"
                            placeholder="请选择"
                            style="width:100%"
                        >
                            <el-option
                                v-for="item in deviceTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
// 上架模式列表
const isvPlatforms = [
    {
        value: 1,
        label: '上架模式1'
    },
    {
        value: 2,
        label: '上架模式2'
    },
]

// 设备类型列表
const deviceTypes = [
    {
        value: 1,
        label: '软证书'
    },
    {
        value: 2,
        label: '税控盘'
    },
    {
        value: 3,
        label: '金税盘'
    },
    {
        value: 4,
        label: '税控UKey'
    },
    {
        value: 5,
        label: '税控服务器'
    },
]

// 表单的默认值
const formDefault = {
    isvPlatform: '', // 上架模式
    taxToken: '', // 激活码
    taxMachineNo: '', // 税控服务器编号
    devicePos: '', // 上架设备的端口位置
    deviceType: '', // 上架的设备类型
    defaultInvoiceDevice: '', // 默认的开票设备
}

export default {
    name: 'InitModelForm',
    props: {
        // v-model绑定值，用于传递上架模式的值；
        value: {
            type: Number,
            default: null
        },
        // 1.输入信息
        // 2.用于覆盖已有数据
        inputInfo: {
            type: Object,
            default: null,
        },
        // 是否只读
        readonly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            oldFormData: null,// 原数据
            isvPlatforms: isvPlatforms,
            deviceTypes: deviceTypes,
            form: JSON.parse(JSON.stringify(formDefault)),
            formRules: {
                isvPlatform: [
                    { required: true, message: '可用服务平台不可为空', trigger: 'change' }
                ],
                taxToken: [
                    { required: true, message: '激活码不可为空', trigger: 'change' }
                ],
                taxMachineNo: [
                    { required: true, message: '税控服务器编号不可为空', trigger: 'change' }
                ],
                devicePos: [
                    { required: true, message: '上架设备端口位置不可为空', trigger: 'change' }
                ],
                deviceType: [
                    { required: true, message: '上架设备类型不可为空', trigger: 'change' }
                ],
                defaultInvoiceDevice: [
                    { required: true, message: '默认开票设备不可为空', trigger: 'change' }
                ],
            },
        };
    },
    watch: {
        inputInfo(val) {
            this.updateForm(val);
        }
    },
    computed: {
        /**
        * 是否是上架模式1
        */
        isISVPlatformMode1() {
            return this.form.isvPlatform === 1;
        },
        // 上架模式
        isModifyISVPlatform() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.isvPlatform === this.form.isvPlatform ? false : true;
        },
        // 激活码
        isModifyTaxToken() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.taxToken === this.form.taxToken ? false : true;
        },
        // 税控服务器编号
        isModifyTaxMachineNo() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.taxMachineNo === this.form.taxMachineNo ? false : true;
        },
        // 上架设备的端口位置
        isModifyDevicePos() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.devicePos === this.form.devicePos ? false : true;
        },
        // 上架的设备类型
        isModifyDeviceType() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.deviceType === this.form.deviceType ? false : true;
        },
        // 默认的开票设备
        isModifyDefaultInvoiceDevice() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.defaultInvoiceDevice === this.form.defaultInvoiceDevice ? 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 = {
                    isvPlatform: this.oldFormData.isvPlatform,
                    taxToken: this.oldFormData.taxToken,
                    taxMachineNo: this.oldFormData.taxMachineNo,
                    devicePos: this.oldFormData.devicePos,
                    deviceType: this.oldFormData.deviceType,
                    defaultInvoiceDevice: this.oldFormData.defaultInvoiceDevice,
                }
            }
        },
        handleISVPlatformChange() {
            this.$emit('input', this.form.isvPlatform)
        },
        /**
         * 对外暴露获取数据的方法，内部进行表单的校验，父组件中通过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>