<template>
    <div class="wrapper">
        <div class="title">类目详情</div>
        <div class="status">
            <div class="line">
                <div class="label">申请状态:</div><span :class="status==9?'statustext':''">{{statusName}}</span>
            </div>
            <div class="line" v-if="status==9">
                <div class="label">原因:</div><span class="reason">{{reject_reason}}</span>
            </div>
        </div>
        <el-divider></el-divider>
        <el-form class="form" ref="form" :model="form" label-width="200px" :rules="rules">
            <el-form-item label="一级类目:" prop="level1">
                <el-input placeholder="请输入"  :disabled="isDisable" v-model="form.level1" maxlength="9" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="二级类目:" prop="level2">
                <el-input placeholder="请输入"  :disabled="isDisable" v-model="form.level2" maxlength="9" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目:" prop="level3">
                <el-input placeholder="请输入" :disabled="isDisable" v-model="form.level3" maxlength="9" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目名称:" prop="level3_name">
                <el-input placeholder="请输入" :disabled="isDisable&&isSuccessEdit" v-model="form.level3_name"
                    maxlength="25" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="营业执照或组织机构代码证:" required>
                <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' ref="upload_goods" :disabled="isDisable" :file="licenseImgs" limitNum="10">
                </upload>
            </el-form-item>
            <el-form-item class="single" label="资质材料URL:" required>
                <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' ref="upload_zizhi" :disabled="isDisable" :file="certificateImgs" limitNum="10">
                </upload>
            </el-form-item>
            <el-form-item class="single" label="备注:">
                <el-input placeholder="请输入" :disabled="isDisable&&isSuccessEdit" v-model="form.remark" maxlength="25" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item class="commit" v-if="status!=0">
                <el-button class="blackbtn" :loading="loading" @click.native.prevent="commit">提交
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import store from '@/store/index'
    import upload from '@/components/upload'
    import {
        detail,
        edit,
        authedEdit
    } from "@/api/category";
    import {
        validnumber,
    } from '@/utils/validate'
    export default {
        name: 'categoryDetail',
        components: {
            upload
        },
        props: {},
        data() {
            return {
                licenseImgs: [],
                updatePic: true,
                certificateImgs: [],
                category_info_id: '',
                isDisable: false,
                isSuccessEdit: true, //成功时可编辑类目  可编辑-false
                status: 1,
                statusName: '',
                reject_reason: '',
                form: {
                    level1: '',
                    level3: '',
                    level2: '',
                    level3_name: '',
                    remark: ''
                },
                loading: false,
                rules: {
                    level1: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    level2: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    level3: [{
                        required: true,
                        validator: validnumber,
                        trigger: 'blur'
                    }],
                    level3_name:[{
                        required: true,
                        message: '请输入必填项',
                        trigger: 'blur'
                    }]
                }
            };
        },
        watch: {},
        computed: {},
        methods: {
            commit() {
                if (this.status == 1) {
                    //通过时修改
                    if(!this.form.level3_name){
                        this.$message.error('请输入三级类目名称!');
                        return
                    }
                    let params = {
                        category_info_id: this.category_info_id,
                        level3_name: this.form.level3_name,
                        remark: this.form.remark,
                    }
                    this.loading = true
                    authedEdit(params).then(() => {
                        this.$message.success('修改成功');
                        store.commit('REMOVETAB', '类目详情')
                        this.$router.go(-1)
                    }).catch(() => {
                        this.loading = false
                    });
                } else {
                    this.$refs.form.validate(valid => {
                        if (valid) {
                            if (this.licenseImgs.length == 0) {
                                this.$message.error('请选择营业执照或组织机构代码证');
                                return
                            }
                            if (this.certificateImgs.length == 0) {
                                this.$message.error('请选择资质材料');
                                return
                            }
                            let licenseImgs_temp = []
                            this.licenseImgs.forEach(element => {
                                licenseImgs_temp.push(element.url)
                            });
                            let certificateImgs_temp = []
                            this.certificateImgs.forEach(element => {
                                certificateImgs_temp.push(element.url)
                            });
                            let params = {
                                category_info_id: this.category_info_id,
                                certificateImgs: certificateImgs_temp.join(","),
                                level1: this.form.level1,
                                level2: this.form.level2,
                                level3: this.form.level3,
                                licenseImgs: licenseImgs_temp.join(","),
                                level3_name: this.form.level3_name,
                                remark: this.form.remark,
                            }
                            this.loading = true
                            edit(params).then(() => {
                                this.$message.success('修改成功');
                                store.commit('REMOVETAB', '类目详情')
                                this.$router.go(-1)
                            }).catch(() => {
                                this.loading = false
                            });
                        }
                    })
                }
            },
            getDetail() {
                this.isDisable = false
                this.isSuccessEdit = true
                detail({
                    categoryInfoId: this.category_info_id
                }).then(res => {
                    this.status = res.data.status
                    if (this.status == 0) { //审核中全不可编辑
                        this.isDisable = true
                    }
                    if (this.status == 1) { //成功时只能修改三级名称 备注
                        this.isDisable = true
                        this.isSuccessEdit = false
                    }
                    this.reject_reason = res.data.reject_reason
                    this.statusName = res.data.statusName
                    this.form.level1 = res.data.level1
                    this.form.level2 = res.data.level2
                    this.form.level3 = res.data.level3
                    this.form.level3_name = res.data.level3_name
                    this.category_info_id = res.data.category_info_id
                    this.form.remark=res.data.remark
                    this.licenseImgs = []
                    if (res.data.licenseImgs ?.length > 0) {
                        res.data.licenseImgs.forEach(element => {
                            this.licenseImgs.push({
                                url: element
                            })
                        });
                    }
                    this.certificateImgs = []
                    if (res.data.certificateImgs?.length > 0) {
                        res.data.certificateImgs.forEach(element => {
                            this.certificateImgs.push({
                                url: element
                            })
                        });
                    }
                    //刷新子组件
                    this.updatePic = false
                    this.$nextTick(() => {
                        this.updatePic = true
                    })
                })
            },
            commitNew() { // 提交新审核
                this.$router.push({
                    name: "addGoods",
                    params: {
                        isNew: true
                    }
                });
            },
            update() { //更新审核
                this.$router.push({
                    name: "addGoods",
                    params: {
                        outProductId: this.outProductId,
                        isDisable: this.status == 2 ? true : false
                    }
                });
            },
            initPage() {
                this.loading = false
                this.$refs.form.clearValidate()
                this.form={
                    level1: '',
                    level3: '',
                    level2: '',
                    level3_name: '',
                    remark: ''
                }
                if (this.$route.params.category_info_id) {
                    this.category_info_id = this.$route.params.category_info_id
                    store.commit('SET_CATEGORY_INFO_ID',this.category_info_id)
                    this.getDetail()
                }else if(store.getters.getCategory_info_id!=0){
                    this.category_info_id = store.getters.getCategory_info_id
                    this.getDetail()
                }
            }

        },
        created() {},
        activated() {
            this.initPage()
        },
        mounted() {}
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

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

        .status {
            width: 75%;
            display: flex;
            margin-top: 20px;
            flex-direction: column;
            font-size: 14px;
            color: #232323;
            font-weight: bolder;
            font-family: PingFangSC-Regular, PingFang SC;

            .line {
                display: flex;
                margin-top: 20px;
                align-items: center;
            }

            .commitnew {
                margin-left: 40px;
            }

            .label {
                width: 100px;
                text-align: right;
                margin-right: 30px;
            }

            .reason {
                width: 80%;
                word-wrap: break-word;
            }

            .statustext {
                color: #E02020;
            }
        }

        .empty {
            width: 75%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 30px;

            .emptytitle {
                text-align: center;
                color: #999999;
                font-size: 15px;
            }

            .emptyimg {
                width: 400px;
                height: auto;
            }
        }

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

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

            .el-select {
                width: 300px;
            }

            .el-input {
                width: 300px;
            }

            .single {
                width: 100%;

                .el-input {
                    width: 875px;
                }

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

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


    }
</style>