<template>
    <div class="wrapper">
        <div class="title">商品详情</div>
        <div class="status">
            <div class="line">
                <div class="label">申请状态:</div><span :class="status==3?'statustext':''">{{statusName}}</span>
            </div>
            <div class="line" v-if="status==3">
                <div class="label">原因:</div><span class="reason">{{reject_reason}}</span>
            </div>
            <div class="line" v-if="status!=4">
                <div class="label">审核内容:</div>
                <el-button type="text" @click="update">查看审核内容</el-button>
            </div>
            <div class="line" v-if="status==4">
                <el-button class="commitnew blackbtn" @click="commitNew">提交新审核</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="empty" v-if="!form.commodity_id">
            <span class="emptytitle">暂无过审数据</span>
            <img class="emptyimg" src="../../../../static/images/empty.png" />
        </div>
        <el-form class="form" ref="form" :model="form" label-width="80px" v-if="form.commodity_id">
            <el-form-item class="single" label="商品名:" label-width="100px" required>
                <el-input class="pr-50" placeholder="请输入" v-model="form.title" maxlength="60" disabled show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="类目:" label-width="100px" required>
                <el-select v-model="form.third_cat_id" placeholder="请选择" clearable disabled filterable>
                    <el-option v-for="item in categoryList" :key="item.level3" :label="item.level3_name"
                        :value="item.level3">
                    </el-option>
                    <el-option label="无需审核类目" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品ID:" label-width="100px" required>
                <el-input placeholder="请输入" v-model="form.out_product_id" disabled maxlength="9" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="品牌:" label-width="100px" required>
                <el-select v-model="form.brand_id" placeholder="请选择" clearable disabled filterable>
                     <el-option v-for="item in brandList" :key="item.brand_info_id" :label="item.brand_wording"
                        :value="item.brand_info_id">
                    </el-option>
                    <el-option label="无品牌" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品库存:" label-width="100px" required>
                <el-input placeholder="请输入" maxlength="6" show-word-limit disabled v-model="form.stock_num">
                </el-input>
            </el-form-item>
            <el-form-item label="售卖价格:" label-width="100px" required>
                <el-input placeholder="请输入" maxlength="9" show-word-limit disabled v-model="form.sale_price">
                </el-input>
            </el-form-item>
            <el-form-item label="市场价格:" label-width="100px" required>
                <el-input placeholder="请输入" maxlength="9" show-word-limit disabled v-model="form.market_price">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="小程序链接:" label-width="100px" required>
                <el-input class="pr-50" placeholder="请输入" v-model="form.path" disabled maxlength="100" show-word-limit>
                </el-input>
            </el-form-item>
            <el-form-item label="三级类目:" v-if="form.third_cat_id=='-1'" label-width="100px">
                <el-input placeholder="请输入" disabled maxlength="25" v-model="form.third">
                </el-input>
            </el-form-item>
            <el-form-item class="single" label="商品图片:" label-width="100px" required>
                <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' ref="upload_goods" :file="goodsList" limitNum="1" :disabled="true"></upload>
            </el-form-item>
            <el-form-item class="single" label="商品类目图片:" label-width="100px">
                <upload v-if="updatePic" acceptType='.jpg, .jpeg, .png' ref="upload_zizhi" :file="goodszizhiList" limitNum="1" :disabled="true">
                </upload>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import store from '@/store/index'
    import upload from '@/components/upload'
    import {
        getCategoryList
    } from '@/api/category'
    import {
        getBrandList
    } from '@/api/brand'
    import {
        add,
        detail
    } from "@/api/goods";
    export default {
        name: 'goodsDetail',
        components: {
            upload
        },
        props: {},
        data() {
            return {
                categoryList: [],
                brandList: [],
                goodsList: [],
                updatePic: true,
                goodszizhiList: [],
                outProductId: '',
                status: 1,
                statusName: '',
                reject_reason: '',
                form: {
                    title: '',
                    third_cat_audit: '',
                    out_product_id: '',
                    has_brand: '',
                    stock_num: '',
                    sale_price: '',
                    market_price: '',
                    path: '',
                    third_cat_id: '',
                    commodity_id: null,
                    third:''
                },
                loading: false
            };
        },
        watch: {},
        computed: {},
        methods: {
            getDetail() {
                detail({
                    outProductId: this.outProductId
                }).then(res => {
                    if (res.data?.auditInfo?.status) {
                        this.status = res.data.auditInfo.status
                    }
                    this.statusName = res.data.auditInfo.statusName
                    this.form.commodity_id = res.data.commodity_id
                    this.reject_reason = res.data.auditInfo.reject_reason
                    this.form.title = res.data.title
                    this.form.out_product_id = res.data?.auditInfo?.out_product_id
                    this.form.brand_id=res.data.has_brand==0?'-1':res.data.has_brand
                    this.form.third=res.data.third_cat_audit==0?res.data.third_cat_id:''
                    this.form.stock_num = res.data.stock_num
                    this.form.sale_price = res.data.sale_price
                    this.form.market_price = res.data.market_price
                    this.form.path = res.data.path
                    this.form.third_cat_id =res.data.third_cat_audit==0?'-1':res.data.third_cat_id
                    this.goodsList = [{
                        url: res.data.thumb_img
                    }]
                    this.goodszizhiList = []
                    if (res.data.qualificationImgs.length > 0) {
                        res.data.qualificationImgs.forEach(element => {
                            this.goodszizhiList.push({
                                url: element
                            })
                        });
                    }
                    //刷新子组件
                    this.updatePic = false
                    this.$nextTick(() => {
                        this.updatePic = true
                    })
                })
            },
            commitNew() { // 提交新审核
                this.form.goodsList=this.goodsList
                this.form.goodszizhiList=this.goodszizhiList
                this.$router.push({
                    name: "addGoods",
                    params: {
                        isNew: true,
                        data:JSON.stringify(this.form)
                    }
                });
            },
            update() { //更新审核
                this.$router.push({
                    name: "addGoods",
                    params: {
                        outProductId: this.outProductId,
                        isDisable: this.status == 2 ? true : false
                    }
                });
            },
            getCategoryList() { //获取类目列表
                getCategoryList().then(res => {
                    this.categoryList = res.data
                })
            },
            getBrandList() { //获取品牌列表
                getBrandList().then(res => {
                    this.brandList = res.data
                })
            },
            initPage() {
                this.getCategoryList()
                this.getBrandList()
                this.form={
                    title: '',
                    third_cat_audit: '',
                    out_product_id: '',
                    has_brand: '',
                    stock_num: '',
                    sale_price: '',
                    market_price: '',
                    path: '',
                    third_cat_id: '',
                    commodity_id: null,
                    third:''
                }
                if (this.$route.params.outProductId) {
                    this.outProductId = this.$route.params.outProductId
                    store.commit('SET_OUTPRODUCTID',this.outProductId)
                    this.getDetail()
                }else if(store.getters.getOutProductId!=0){
                    this.outProductId = store.getters.getOutProductId
                    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>