<template>
    <div class="conatiner">
        <div class="pageTitle">
            <span>
                商品管理
            </span>

            <div class="right">
                <el-button type="primary" plain size="mini" @click="goNext('productInfo')">添加商品</el-button>
                <el-button type="warning" v-if="!changeSelf" plain size="mini" @click="changeSelf=true">上下架</el-button>
                <el-button type="warning" v-else size="mini" @click="changeSelf=false">取消上下架</el-button>
                <el-select v-model="onShelf" @change='getProduct' clearable placeholder="筛选" size="mini" style="width:80px;margin-left:20px;">
                    <el-option v-for="item in onShelfList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>

        <div class="content">
            <template v-if="goodsList.length>0">
                <div class="goodsList">
                    <div class="goods-item" v-for="(item,index) in goodsList" @click="choose(item)">
                        <img :src="item.image+'?x-oss-process=image/resize,m_fill,h_100,w_176'" alt="">
                        <div class="title">{{item.title}}</div>
                        <div class="price">
                            <span>¥{{item.price}}</span>
                            <small>
                                <span style="color:#666">已售</span>
                                <span>{{item.salesVolume}}</span>
                            </small>
                        </div>
                        <template v-if="changeSelf">
                            <div class="colorContent" v-if='item.onShelf=="Y"'>
                                <span>已上架</span>
                            </div>
                            <div class="colorContent wei" v-else>
                                <span>未上架</span>
                            </div>

                            <div class="box">
                                <el-button type="warning" @click="changeSelfEvent(index,'Y')" class="btn" v-if='item.onShelf=="N"' icon="el-icon-upload2" circle></el-button>
                                <el-button type="primary" @click="changeSelfEvent(index,'N')" class="btn" v-else icon="el-icon-download" circle></el-button>
                            </div>
                        </template>

                    </div>
                </div>
            </template>
            <div v-else class="nothing">
                <img src="../assetsPre/nothingImg.png" alt="">
                <p>{{myStoreInfo.storeName}}还没有商品哦</p>
            </div>
            <div style="padding:20px " v-if="totalProduct>8">
                <el-pagination background @current-change="productCurrentChange" :current-page="productCurrent" :page-size="8" layout="total, prev, pager, next" :total="totalProduct">
                </el-pagination>
            </div>
            <div class="bottom" v-if="changeSelf">
                <el-button type="warning" plain @click="changeSelfEvent(0,'Y','all')">一键上架全部</el-button>
                <el-button type="primary" plain @click="changeSelfEvent(0,'N','all')">一键下架全部</el-button>
            </div>
        </div>

    </div>
</template>

<script>
import { mapState } from 'vuex'
import setStoreInfo from '../pagesPre/SetStoreInfo'
export default {
    name: 'order',
    data() {
        return {
            orderList: [],
            onShelf: '',
            onShelfList: [{
                value: 'Y',
                label: '上架'
            }, {
                value: 'N',
                label: '下架'
            }],
            goodsList: [],
            productCurrent: 1,
            totalProduct: 0,
            changeSelf: false
        }
    },
    computed: {
        ...mapState(['userInfo', 'myStoreInfo']),
    },
    mounted() {
        this.getProduct()

    },
    methods: {
        getProduct() {
            this.goodsList = []
            this.$http.get({
                url: '/productInfo/page',
                data: {
                    storeId: this.myStoreInfo.id,
                    onShelf: this.onShelf,
                    useFlag: 'Y',
                    currentPage: this.productCurrent,
                }
            }).then(res => {
                if (res.success) {
                    this.goodsList = res.data.pp
                    this.totalProduct = res.data.page.totalNumber
                }
            }).catch(e => {
                console.log(e)
            })
        },
        productCurrentChange(page) {
            this.productCurrent = page;
            this.getProduct();
        },
        goNext(str) {
            this.$router.push({
                name: str
            })
        },
        choose(item) {
            if (!this.changeSelf) {
                this.$router.push({
                    name: 'productInfo',
                    query: {
                        id: item.id
                    }
                })
            }

        },
        changeSelfEvent(index, value, style) {
            if (index >= this.goodsList.length) {
                this.$message.success((value == 'Y' ? '上架' : '下架') + '成功')
                this.getProduct()
                return
            }
            this.$http.post({
                url: '/productInfo/update',
                data: {
                    id: this.goodsList[index].id,
                    onShelf: value
                }
            }).then(res => {
                if (res.success) {
                    if (style) {
                        this.changeSelfEvent(index + 1, value, style)
                    }
                    else {
                        this.$message.success((value == 'Y' ? '上架' : '下架') + '成功')
                        this.goodsList[index].onShelf = value
                    }

                } else {
                    this.$message.warning('失败')
                }
            })
        },

    },
    components: {
        setStoreInfo
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    background: #fff;
    padding: 0 6px 0 13px;

    .goodsList{
        min-height: 500px;
    }

    .pageTitle {
        height: 47px;
        font-size: 14px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 47px;
        border-bottom: 1px solid rgba(234, 234, 234, 1);
        margin-bottom: 10px;

        .right {
            float: right;
            margin-right: 18px;
        }
    }

    .nothing {
        padding: 136px auto;

        img {
            width: 167px;
            height: 167px;
            display: block;
            margin: auto;
        }

        p {
            font-size: 14px;
            text-align: center;
            color: rgba(51, 51, 51, 1);
            line-height: 19px;
            margin-top: 24px;
        }
    }
    .goodsList {
        .goods-item {
            padding: 20px;
            border: 1px solid #ebebeb;
            border-radius: 4px;
            width: 176px;
            display: inline-block;
            margin-right: 30px;
            margin-bottom: 39px;
            position: relative;
            cursor: pointer;
            overflow: hidden;

            img {
                display: block;
                border-radius: 4px;
            }

            .title {
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(51, 51, 51, 1);
                line-height: 19px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 8px;
            }

            .price {
                font-size: 20px;
                font-family: MicrosoftYaHei;
                color: rgba(251, 110, 8, 1);
                line-height: 26px;
                margin-top: 7px;

                small {
                    font-size: 12px;
                }
            }

            .colorContent {
                background-color: #fb6e08;
                width: 100px;
                height: 100px;
                position: absolute;
                right: -50px;
                top: -50px;
                transform: rotate(45deg);
                color: #fff;
                z-index: 3;
                span {
                    position: absolute;
                    bottom: 5px;
                    left: 23px;
                }

                &.wei {
                    background-color: #666;
                }
            }
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            text-align: center;
            line-height: 203px;
            z-index: 2;
            .btn {
                display: inline-block;
                vertical-align: middle;
            }
        }
    }
    .bottom {
        padding: 10px;
        border-top: 1px solid #ebebeb;
    }
}
</style>
