<template>
    <div class="wrapper">
        <div class="left">
            <div class="title">品牌申请</div>
            <el-form size="small" class="form" ref="form" :model="form" label-width="150px" :rules="rules">
                <el-form-item label="认证审核类型:" prop="brand_audit_type">
                    <el-select v-model="form.brand_audit_type" placeholder="请选择" :disabled="isdisable" clearable
                        filterable>
                        <el-option label="国内品牌申请-R标" value="1"></el-option>
                        <el-option label="国内品牌申请-TM标" value="2"></el-option>
                        <el-option label="海外品牌申请-R标" value="3"></el-option>
                        <el-option label="海外品牌申请-TM标" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商标分类:" prop="trademark_type">
                    <el-input class="pr-50" placeholder="请输入" v-model="form.trademark_type" maxlength="9" show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="选择品牌经营类型:" prop="brand_management_type">
                    <el-select v-model="form.brand_management_type" placeholder="请选择" :disabled="isdisable" clearable
                        filterable>
                        <el-option label="自有品牌" value="1"></el-option>
                        <el-option label="代理品牌" value="2"></el-option>
                        <el-option label="无品牌" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品产地是否进口:" prop="commodity_origin_type">
                    <el-select v-model="form.commodity_origin_type" placeholder="请选择" :disabled="isdisable" clearable
                        filterable>
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商标/品牌词:" prop="brand_wording">
                    <el-input placeholder="请输入" class="pr-50"  v-model="form.brand_wording" maxlength="15" show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="商标注册人姓名:">
                    <el-input placeholder="请输入" class="pr-50"  v-model="form.trademark_registrant" maxlength="10" show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="商标注册号/申请号:" prop="trademark_registrant_nu">
                    <el-input placeholder="请输入" class="pr-50"  v-model="form.trademark_registrant_nu" maxlength="35" show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="商标有效期:">
                    <el-date-picker v-model="form.trademark_authorization_period" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商标申请人姓名:">
                    <el-input placeholder="请输入" class="pr-50"  v-model="form.trademark_applicant" maxlength="10" show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="商标申请时间:">
                    <el-date-picker v-model="form.trademark_application_time" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="single" label="营业执照或组织机构代码证:" required>
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="org_code_certificateList" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="销售授权书（如商持人为自然人，还需提供有其签名的身份证正反面扫描件:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="authorizationList" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="商标注册证书:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="registration_certificateList" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="商标变更证明:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="change_certificateList" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="商标注册申请受理通知书:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="registration_applicationList" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="中华人民共和国海关进口货物报关单:">
                    <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' :file="goods_formList" limitNum="10"></upload>
                </el-form-item>
                <el-form-item class="single" label="备注:">
                    <el-input placeholder="请输入" class="pr-50" v-model="form.remark" maxlength="25" show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item class="commit">
                    <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <div class="title">品牌申请要求</div>
            <showtable class="showtable"></showtable>
        </div>
    </div>
</template>

<script>
    import store from '@/store/index'
    import upload from '@/components/upload'
    import showtable from '../components/showtable.vue'
    import {
        validnumber,
    } from '@/utils/validate'
    import {
        add
    } from '@/api/brand'
    export default {
        name: 'addCategory',
        components: {
            upload,
            showtable
        },
        props: {},
        data() {
            return {
                categoryList: [],
                brandList: [],
                org_code_certificateList: [],
                authorizationList: [],
                registration_certificateList: [],
                change_certificateList: [],
                registration_applicationList: [],
                goods_formList: [],
                outProductId: 0,
                commodity_id: 0,
                updatePic: true,
                form: {
                    brand_audit_type: '',
                    trademark_type: '',
                    brand_management_type: '',
                    commodity_origin_type: '',
                    trademark_registrant: '',
                    trademark_registrant_nu: '',
                    trademark_authorization_period: '',
                    trademark_applicant: '',
                    trademark_application_time: '',
                    remark: '',
                    brand_wording:'',
                },
                loading: false,
                rules: {
                    brand_audit_type: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    trademark_type: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    brand_management_type: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    commodity_origin_type: [{
                        required: true,
                        message: '请选择必填项',
                        trigger: 'blur'
                    }],
                    trademark_registrant: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                    trademark_registrant_nu: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],
                    brand_wording: [{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }],

                },
            };
        },
        watch: {},
        computed: {},
        methods: {
            commit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.org_code_certificateList.length == 0) {
                            this.$message.error('请选择营业执照或组织机构代码证');
                            return
                        }
                        let imgDtoList = []
                        this.org_code_certificateList.forEach(element => {
                            imgDtoList.push({
                                type: "org_code_certificate",
                                url: element.url
                            })
                        });
                        this.authorizationList.forEach(element => {
                            imgDtoList.push({
                                type: "authorization",
                                url: element.url
                            })
                        });
                        this.registration_certificateList.forEach(element => {
                            imgDtoList.push({
                                type: "registration_certificate",
                                url: element.url
                            })
                        });
                        this.change_certificateList.forEach(element => {
                            imgDtoList.push({
                                type: "change_certificate",
                                url: element.url
                            })
                        });
                        this.registration_applicationList.forEach(element => {
                            imgDtoList.push({
                                type: "registration_application",
                                url: element.url
                            })
                        });
                        this.goods_formList.forEach(element => {
                            imgDtoList.push({
                                type: "goods_form",
                                url: element.url
                            })
                        });
                        let params = {
                            brand_audit_type:Number.parseInt(this.form.brand_audit_type),
                            brand_management_type: Number.parseInt(this.form.brand_management_type),
                            commodity_origin_type: Number.parseInt(this.form.commodity_origin_type),
                            imgDtoList: imgDtoList,
                            remark: this.form.remark,
                            trademark_applicant: this.form.trademark_applicant,
                            trademark_application_time: this.form.trademark_application_time,
                            trademark_authorization_period: this.form.trademark_authorization_period,
                            trademark_registrant: this.form.trademark_registrant,
                            trademark_registrant_nu: this.form.trademark_registrant_nu,
                            trademark_type: this.form.trademark_type,
                            brand_wording:this.form.brand_wording
                        }
                        this.loading = true
                        add(params).then(() => {
                            this.$message.success('申请成功');
                            store.commit('SET_TABINDEX', 0)
                            this.$router.push('/brand')
                            store.commit('REMOVETAB', '品牌申请')
                        }).catch(() => {
                            this.loading = false
                        });
                    }
                })
            },
            initPage() {
                this.loading = false
                this.$refs.form.clearValidate()
                if (this.$route.params.isNew) {
                    this.form = {
                        brand_audit_type: '',
                        trademark_type: '',
                        brand_management_type: '',
                        commodity_origin_type: '',
                        trademark_registrant: '',
                        trademark_registrant_nu: '',
                        trademark_authorization_period: '',
                        trademark_applicant: '',
                        trademark_application_time: '',
                        remark: '',
                        brand_wording:''
                    }
                    this.org_code_certificateList = []
                    this.authorizationList = [],
                        this.registration_certificateList = [],
                        this.change_certificateList = [],
                        this.registration_applicationList = [],
                        this.goods_formList = [],
                        //刷新子组件
                        this.updatePic = false
                    this.$nextTick(() => {
                        this.updatePic = true
                    })
                }
            },
        },
        created() {},
        activated() {
            this.initPage()
        },
        mounted() {}
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: row;
        background: #F6F8F9 !important;
        padding: 0px !important;
        .table {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white !important;
            border-radius: 5px;
            width: 37%;
            margin-left: 10px;

            .title {
                font-weight: bold;
                width: 90%;
                text-align: left;
                margin-left: 10px;
                margin-top: 20px;
            }

            .showtable {
                width: 99%;
                margin-top: 20px;
            }
        }

        .left {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border-radius: 5px;
            padding: 10px;
            width: 61%;

            .title {
                font-weight: bold;
                width: 90%;
                text-align: left;
                margin-left: 10px;
                margin-top: 10px;
            }

            .form {
                margin-top: 20px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .el-form-item {
                    color: #232323;
                    font-weight: 450;
                }

                .el-select {
                    width: 200px;
                }

                .el-input {
                    width: 200px;
                }

                .single {
                    width: 100%;

                    .el-input {
                        width: 575px;
                    }

                    .el-select {
                        width: 575px;
                    }
                }

                .commit {
                    width: 100%;
                    text-align: center;
                }
            }

        }

    }
</style>