<template>
    <div id="ent_info_form">
        <el-form :model="form" :rules="formRules" ref="form" label-position="top">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item prop="entTaxId">
                        <span slot="label">
                            <span style="margin-right:10px">税号</span>
                            <el-tag type="warning" v-if="isModifyEntTaxId">修改</el-tag>
                        </span>
                        <el-input v-model="form.entTaxId" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="entName">
                        <span slot="label">
                            <span style="margin-right:10px">企业名称</span>
                            <el-tag type="warning" v-if="isModifyEntName">修改</el-tag>
                        </span>
                        <el-input v-model="form.entName" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="entShortName">
                        <span slot="label">
                            <span style="margin-right:10px">企业简称</span>
                            <el-tag type="warning" v-if="isModifyEntShortName">修改</el-tag>
                        </span>
                        <el-input v-model="form.entShortName" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item prop="provinceCity">
                        <span slot="label">
                            <span style="margin-right:10px">企业所属省市</span>
                            <el-tag type="warning" v-if="isModifyProvinceCity">修改</el-tag>
                        </span>
                        <el-cascader
                            v-model="form.provinceCity"
                            :disabled="readonly"
                            :options="chinaProvinceCity"
                            style="width:100%"
                        ></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item prop="entType">
                        <span slot="label">
                            <span style="margin-right:10px">企业类型</span>
                            <el-tag type="warning" v-if="isModifyEntType">修改</el-tag>
                        </span>
                        <el-radio-group v-model="form.entType" :disabled="readonly">
                            <el-radio v-for="item in entTypes" :key="item.value" :label="item.value">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="entContactPerson">
                        <span slot="label">
                            <span style="margin-right:10px">企业联系人</span>
                            <el-tag type="warning" v-if="isModifyEntContactPerson">修改</el-tag>
                        </span>
                        <el-input v-model="form.entContactPerson" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="entPhone">
                        <span slot="label">
                            <span style="margin-right:10px">企业电话</span>
                            <el-tag type="warning" v-if="isModifyEntPhone">修改</el-tag>
                        </span>
                        <el-input v-model="form.entPhone" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="reserveMrName">
                        <span slot="label">
                            <span style="margin-right:10px">企业管理者姓名</span>
                            <el-tag type="warning" v-if="isModifyReserveMrName">修改</el-tag>
                        </span>
                        <el-input v-model="form.reserveMrName" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="reserveMrMobile">
                        <span slot="label">
                            <span style="margin-right:10px">企业管理者电话</span>
                            <el-tag type="warning" v-if="isModifyReserveMrMobile">修改</el-tag>
                        </span>
                        <el-input v-model="form.reserveMrMobile" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item prop="entAddress">
                <span slot="label">
                    <span style="margin-right:10px">开票信息公司地址</span>
                    <el-tag type="warning" v-if="isModifyEntAddress">修改</el-tag>
                </span>
                <el-input v-model="form.entAddress" :readonly="readonly"></el-input>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item prop="bankName">
                        <span slot="label">
                            <span style="margin-right:10px">企业开户行</span>
                            <el-tag type="warning" v-if="isModifyBankName">修改</el-tag>
                        </span>
                        <el-input v-model="form.bankName" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item prop="bankAccountNumber">
                        <span slot="label">
                            <span style="margin-right:10px">企业银行账号</span>
                            <el-tag type="warning" v-if="isModifyBankAccountNumber">修改</el-tag>
                        </span>
                        <el-input v-model="form.bankAccountNumber" :readonly="readonly"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" v-if="showFileUpload">
                <el-col :span="12">
                    <el-form-item label="企业授权书" prop="entAuthFile">
                        <input type="file" @change="handleFileChange($event, 'entAuthFile')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="企业营业执照" prop="entBusinessLicenseImg" v-if="isISVPlatformMode1">
                        <input
                            type="file"
                            accept=".jpg,.png,.jpeg"
                            @change="handleFileChange($event, 'entBusinessLicenseImg')"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import CHINA_PROVINCE_CITY from '@/utils/china_province_city'

// 企业类型列表
const entTypes = [
    {
        value: 1,
        label: '一般纳税人'
    },
    {
        value: 2,
        label: '小规模纳税人'
    },
    {
        value: 3,
        label: '起征点以下纳税人'
    },
]

// 表单的默认值
const formDefault = {
    entTaxId: '', // 税号
    entName: '', // 企业名称
    entShortName: '', // 企业简称
    provinceCity: [''], // 企业所属省市
    entType: null, // 企业类型
    entContactPerson: '', // 企业联系人
    entPhone: '', // 企业电话
    reserveMrName: '', // 企业管理者姓名
    reserveMrMobile: '', // 企业管理者电话
    entAddress: '', // 开票信息公司地址
    bankName: '',// 企业开户行
    bankAccountNumber: '', // 企业银行账号
    entAuthFile: null,
    entBusinessLicenseImg: null
}

export default {
    name: 'EntInfoForm',
    props: {
        // 1.输入信息
        // 2.用于覆盖已有数据
        inputInfo: {
            type: Object,
            default: null,
        },
        readonly: {
            type: Boolean,
            default: false
        },
        isvPlatform: {
            type: Number,
            default: null
        },
        // 是否显示文件上传相关控件，
        // 1.授权书；
        // 2.营业执照；
        showFileUpload: {
            type: Boolean,
            default: false
        }
    },
    data() {
        let validateEntShortName = (rule, value, callback) => {
            let reg = /[^\u4E00-\u9FA5]/g;
            if (value === '') {
                callback(new Error('企业简称不可为空'));
            } else if (reg.test(value)) {
                callback(new Error('企业简称必须是汉字'));
            } else if (value.length > 9) {
                callback(new Error('企业简称是9个以内汉字，含9个汉字'));
            } else {
                callback();
            }
        }
        return {
            oldFormData: null,// 原数据
            entTypes: entTypes,
            chinaProvinceCity: CHINA_PROVINCE_CITY,
            form: JSON.parse(JSON.stringify(formDefault)),
            formRules: {
                entType: [
                    { required: true, message: '请选择企业类型', trigger: 'change' }
                ],
                entTaxId: [
                    { required: true, message: '企业税号不可为空', trigger: 'change' },
                    { min: 15, max: 20, message: '长度在 15 ~ 20 个字符', trigger: 'change' }
                ],
                entName: [
                    { required: true, message: '企业名称不可为空', trigger: 'change' }
                ],
                entShortName: [
                    { required: true, validator: validateEntShortName, trigger: 'change' }
                ],
                provinceCity: [
                    { required: true, message: '请选择企业所属省市', trigger: 'change' }
                ],
                entPhone: [
                    { required: true, message: '企业电话不可为空', trigger: 'change' },
                ],
                reserveMrName: [
                    { required: true, message: '企业管理者不可为空', trigger: 'change' }
                ],
                reserveMrMobile: [
                    { required: true, message: '企业管理者手机号码不可为空', trigger: 'change' },
                ],
                bankName: [
                    { required: true, message: '企业开户银行不可为空', trigger: 'change' }
                ],
                bankAccountNumber: [
                    { required: true, message: '企业开户银行账号不可为空', trigger: 'change' },
                ],
                entAuthFile: [
                    { required: true, message: '企业授权书不可为空', trigger: 'change' }
                ],
                entBusinessLicenseImg: [
                    { required: true, message: '企业营业执照不可为空', trigger: 'change' }
                ],
            },
        };
    },
    watch: {
        inputInfo(val) {
            this.updateForm(val);
        },
        isvPlatform(val) {
            this.isvPlatform = val;
        }
    },
    computed: {
        /**
        * 是否是上架模式1
        */
        isISVPlatformMode1() {
            return this.isvPlatform === 1;
        },
        // 税号
        isModifyEntTaxId() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entTaxId === this.form.entTaxId ? false : true;
        },
        // 企业名称
        isModifyEntName() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entName === this.form.entName ? false : true;
        },
        // 企业简称
        isModifyEntShortName() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entShortName === this.form.entShortName ? false : true;
        },
        // 企业所属省市
        isModifyProvinceCity() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            let stringProvinceCity = this.form.provinceCity instanceof Array ? this.form.provinceCity.join('-') : this.form.provinceCity;
            return this.oldFormData.provinceCity === stringProvinceCity ? false : true;
        },
        // 企业类型
        isModifyEntType() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entType === this.form.entType ? false : true;
        },
        // 企业联系人
        isModifyEntContactPerson() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entContactPerson === this.form.entContactPerson ? false : true;
        },
        // 企业电话
        isModifyEntPhone() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entPhone === this.form.entPhone ? false : true;
        },
        // 企业管理者姓名
        isModifyReserveMrName() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.reserveMrName === this.form.reserveMrName ? false : true;
        },
        // 企业管理者电话
        isModifyReserveMrMobile() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.reserveMrMobile === this.form.reserveMrMobile ? false : true;
        },
        // 开票信息公司地址
        isModifyEntAddress() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.entAddress === this.form.entAddress ? false : true;
        },
        // 企业开户行
        isModifyBankName() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.bankName === this.form.bankName ? false : true;
        },
        // 企业银行账号
        isModifyBankAccountNumber() {
            if (this.oldFormData == null || (JSON.stringify(this.oldFormData) == '{}')) return false;
            return this.oldFormData.bankAccountNumber === this.form.bankAccountNumber ? 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 = {
                    entTaxId: this.oldFormData.entTaxId,
                    entName: this.oldFormData.entName,
                    entShortName: this.oldFormData.entShortName,
                    provinceCity: this.oldFormData.provinceCity,
                    entType: this.oldFormData.entType,
                    entContactPerson: this.oldFormData.entContactPerson,
                    entPhone: this.oldFormData.entPhone,
                    reserveMrName: this.oldFormData.reserveMrName,
                    reserveMrMobile: this.oldFormData.reserveMrMobile,
                    entAddress: this.oldFormData.entAddress,
                    bankName: this.oldFormData.bankName,
                    bankAccountNumber: this.oldFormData.bankAccountNumber,
                    entAuthFile: null,
                    entBusinessLicenseImg: null
                }
                // 特殊处理，保证能正常反显到界面上
                this.form.provinceCity = this.form.provinceCity.split('-');
            }
        },
        /**
         * 对外暴露获取数据的方法，内部进行表单的校验，父组件中通过refs调用
         */
        getFormInfo() {
            return new Promise((resolve, reject) => {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let tempForm = JSON.parse(JSON.stringify(this.form));
                        tempForm.provinceCity = `${this.form.provinceCity[0]}-${this.form.provinceCity[1]}`;
                        resolve(tempForm)
                    } else {
                        reject('输入信息不合法，请检查您的输入信息！')
                    }
                });
            })
        },
        /**
         * 对外暴露取消表单验证提示的方法
         */
        resetFormFields() {
            // 取消验证提示
            this.$refs['form'].resetFields();
        },
    },
    mounted() {
        this.updateForm(this.inputInfo);
    }
}
</script>

<style scoped>
</style>