<template>
    <div>
        <!-- <div class="filter-container">
            <el-button v-permission="['POST /admin/snow/create']" class="filter-item" type="primary" icon="el-icon-edit"
                @click="handleCreate">添加直播间</el-button>

        </div> -->
        <!-- <div style="line-height: 32px;color: red;">列表支持拖动已调整商品顺序</div> -->
        <el-tabs v-model="listQuery.talentId" @tab-click="getList">
            <el-tab-pane v-for="item in talents" :key="item.talentId" :label="'【' + item.nickName + '】的房间'"
                :name="item.talentId" />
        </el-tabs>

        <!-- 查询结果 -->
        <div style="display: flex;flex-direction: column;">
            <el-table v-loading="listLoading" class="draggable-table" :data="list" element-loading-text="正在查询中。。。" border
                fit highlight-current-row :row-class-name="tableRowClassName">
                <el-table-column align="center" label="商品ID" prop="goodsId" />
                <el-table-column align="center" label="商品" prop="goodsName">
                    <template slot-scope="scope">
                        <span style="font-weight:600 ;">{{ scope.row.goodsName }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center" label="图片" prop="sort">
                    <template slot-scope="scope">
                        <img :src="scope.row.shareUrl" width="40">
                    </template>
                </el-table-column> -->

                <el-table-column align="center" label="几号商品" prop="sort">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.sort > 0"><b style="font-size: 28px;">{{
                            scope.row.sort }}</b></el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="商品可用库存" prop="goodsStock">
                    <template slot-scope="scope">
                        {{ (scope.row.goodsStock - scope.row.goodsSales) <= 0 ? '无限库存' : (scope.row.goodsStock -
                            scope.row.goodsSales) }} <el-tag type="warning" v-if="scope.row.isSaldOut">卖光了</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品已售" prop="goodsSales">
                    <template slot-scope="scope">
                        {{ scope.row.goodsSales }}
                    </template>
                </el-table-column>


                <el-table-column align="center" label="置顶" prop="isTop">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.isTop ? 'success' : ''">
                            <img v-if="scope.row.isTop"
                                src="https://mall.zhaijieshi.cc/file/jzmall/storage/8ms4gt7xmd0z5ys0q83z.gif" width="30"
                                height="20" style="margin-right: 3px;" />{{ scope.row.isTop ? '讲解中' : '否' }}</el-tag>
                    </template>
                </el-table-column>


                <el-table-column align="center" label="操作" width="360" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <div v-if="scope.row.deleted == false" style="width: 240px; display: inline-block;">
                            <el-button icon="el-icon-top" type="text" size="mini" v-if="!scope.row.isTop"
                                v-permission="['POST /admin/snow/top']"
                                @click="handleTop(scope.row, scope.$index)">置顶讲解</el-button>
                            <el-button icon="el-icon-bottom" type="text" size="mini"  style="color: #999;" v-if="scope.row.isTop"
                                v-permission="['POST /admin/snow/top']"
                                @click="handleCancelTop(scope.row, scope.$index)">取消置顶</el-button>
                            <el-button icon="el-icon-plus" type="text" style="color: #1e1e20;" size="mini"
                                v-permission="['POST /admin/snow/append']"
                                @click="handleAppend(scope.row, scope.$index)">加库存</el-button>
                            <el-button icon="el-icon-alarm-clock" type="text" style="color: #eb3434;" size="mini"
                                v-permission="['POST /admin/snow/saldOut']" v-if="scope.row.goodsStock > 0 && scope.row.isSaldOut == false"
                                @click="handleSaldOut(scope.row, scope.$index)">卖光了</el-button>
                        </div>

                        <el-button icon="el-icon-close" style="color: red;" type="text" size="mini"
                            v-if="scope.row.deleted == false" v-permission="['POST /admin/snow/delete']"
                            @click="handleDelete(scope.row, scope.$index)">直播下架</el-button>

                        <el-button icon="el-icon-check" style="color: green;" type="text" v-else size="mini"
                            v-permission="['POST /admin/snow/delete']"
                            @click="handleEnable(scope.row, scope.$index)">直播上架</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="padding: 10px 0;text-align: right;">
                <el-button v-permission="['POST /admin/snow/create']" class="filter-item" type="primary" icon="el-icon-edit"
                    @click="handleCreate">追加商品</el-button>
            </div>

            <!-- <div class="preview ac">
                <div class="preview-content">
                    <div class="top">小雪花</div>

                    <div class="tool">
                        <i class="iconfont icon-voice" style="color: #333; font-size: 18px; margin-left: 0;" />
                        <div class="chat-input" />
                        <div class="tool-right">
                            <i class="iconfont icon-emoji" style="color: #333; font-size: 18px" />
                            <i class="iconfont icon-add" style="color: #333; font-size: 18px" />
                        </div>
                    </div>
                </div>
            </div> -->

        </div>

        <el-dialog title="新增商品选择" :visible.sync="addVisible" width='900px'>
            <div class="filter-container">
                <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 300px"
                    placeholder="请输入商品名" />
                <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getGoods">查找</el-button>
            </div>
            <el-table :data="goodsList" element-loading-text="正在查询中。。。" height="600px"
                @selection-change="handleSelectionChange" border fit highlight-current-row>
                <el-table-column type="selection" width="55" />
                <el-table-column align="center" label="商品ID" prop="id" />
                <el-table-column align="center" label="商品" prop="name" width="250px" />
                <el-table-column align="center" label="商品价格" prop="retailPrice" />
                <el-table-column align="center" label="初始库存" prop="stock" width="230px">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.stock" clearable class="filter-item" style="width: 200px"
                            placeholder="请输入初始库存 0不限制" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图片" prop="picUrl">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.picUrl" style="width:50px;height: 50px;" />
                    </template>
                </el-table-column>
            </el-table>
            <div style="float: right;padding:10px 0;color:red">选中了{{ multipleSelection.length }}个商品</div>
            <!-- <div style="padding: 7px;"><span>直播达人：</span><el-select placeholder="请选择直播达人"></el-select></div> -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="configCreateSnow()">新增商品</el-button>
            </div>
        </el-dialog>

        <!-- 追加库存 -->
        <el-dialog :visible.sync="appendVisible" :title="appendTitle" width="550px">
            <el-form ref="appendForm" :rules="addRules" :model="appendForm" status-icon label-position="left"
                label-width="100px" style="width:400px; margin-left:50px;">

                <div style="line-height: 36px;font-size: 12px;">可用库存数：{{ appendForm.stock }}</div>
                <el-form-item label="追加库存" prop="goodsStock">
                    <el-input v-model="appendForm.goodsStock" clearable class="filter-item" style="width: 80%;"
                        type="number" placeholder="请输入追加库存数量" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="appendVisible = false">取消</el-button>
                <el-button type="primary" v-if="appendTitle == '追加库存'" @click="confirmAppend()">确认加库存</el-button>
                <el-button type="primary" v-else @click="confirmEnable()">直播上线</el-button>
            </div>

        </el-dialog>

    </div>
</template>


<script>
import { listSnow, createSnow, snowSaldOut, topSnow, deleteSnow, listGoods, listAllTalents, listSnowTalents, snowAppend, enableSnow } from "@/api/snow"
import moment from "moment";
import Sortable from 'sortablejs' //引入插件
import formatDate from "@/utils/date";
let vm;
export default {
    name: "dySnow",
    components: {},
    filters: {

    },
    data() {
        return {
            total: 0,
            list: [],
            listLoading: true,
            goodsList: [],
            snowTalentsList: [],//已开直播间的达人 
            multipleSelection: '',
            appendTitle: '追加库存',
            listQuery: {
                talentId: ''
            },
            talents: [],//所有达人
            addForm: {
                goodsId: '',
                goodsName: '',
                goodsPic: ''
            },
            addVisible: false,
            addRules: {
                planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
                goodsStock: [{ required: true, message: '请输入追加库存数量', trigger: 'blur' }],
            },
            appendVisible: false,
            appendForm: {
                id: '',
                goodsStock: '',
                stock: ''//已有库存数量
            }

        };
    },
    created() {
        this.getTalents();
    },
    mounted() {

    },
    methods: {
        getList() {
            listSnow(this.listQuery).then(res => {
                this.list = res.data.data
            })

            this.listLoading = false
        },
        getTalents() {
            console.info('getTalents')
            if (this.talents && this.talents.length > 0) return;
            listAllTalents().then(res => {
                this.talents = res.data.data.list;
                if (this.talents.length > 0) {
                    this.listQuery.talentId = this.talents[0].talentId;
                    this.getList();
                }
            })
        },
        handleCreate() {
            this.addVisible = true;
            //this.getTalents();
            this.getGoods();
        },
        handleTop(row, oldIndex) {
            this.$confirm('确定将商品【' + row.goodsName + '】置顶讲解，调整后客户端可见, 是否继续?', '提示', {
                confirmButtonText: '置顶讲解中',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(res => {
                row.isTop = !row.isTop;
                topSnow(row).then(res => {
                    this.list = res.data.data;
                })
            });
        },
        handleCancelTop(row) {
            this.$confirm('确定将商品【' + row.goodsName + '】取消置顶，调整后客户端可见, 是否继续?', '提示', {
                confirmButtonText: '置顶取消',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(res => {
                row.isTop = !row.isTop;
                topSnow(row).then(res => {
                    this.list = res.data.data;
                })
            });
        },
        handleSaldOut(row) {
            this.$confirm('确定将商品【' + row.goodsName + '】设置为卖光了，是否继续?', '提示', {
                confirmButtonText: '置顶卖光了',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(res => {
                row.isSaldOut = true;
                snowSaldOut(row).then(res => {
                    this.list = res.data.data;
                })
            });
        },
        configCreateSnow() {
            if (this.multipleSelection.length == 0) {
                this.$notify.warning({
                    title: '提醒',
                    message: "请选择商品"
                })
                return;
            }

            let snows = [];
            this.multipleSelection.forEach(item => {
                let snow = {
                    dyTalentId: this.listQuery.talentId,
                    goodsId: item.id,
                    goodsName: item.name,
                    goodsPic: item.picUrl,
                    goodsStock: item.stock
                }
                snows.push(snow);
            })
            createSnow(snows).then(res => {
                this.$notify.success({
                    title: "成功",
                    message: "追加成功",
                });

                this.addVisible = false;
                this.getList();
            })


        },
        handleAppend(row) {//加库存
            this.appendVisible = true;
            this.appendForm.id = row.id;
            this.appendForm.stock = row.goodsStock - row.goodsSales;
            this.appendForm.goodsStock = 0;//追加数量 
            this.appendTitle = "追加库存";
        },
        confirmAppend() {
            if (this.appendForm.goodsStock <= 0) {
                this.$notify.error({
                    title: '失败',
                    message: "请输入需要追加的数量 "
                })
                return;
            }
            snowAppend(this.appendForm).then(res => {
                for (const v of this.list) {
                    if (v.id === this.appendForm.id) {
                        v.goodsStock = res.data.data;
                        v.isSaldOut = false;
                        break
                    }
                }
                this.appendVisible = false;

                this.$notify.success({
                    title: "成功",
                    message: "追加成功",
                });
            })

        },
        handleDelete(row, index) {
            let msg = '确定将商品【' + row.goodsName + '】下架，下架商品后面的商品将自动重新排序，是否继续?';
            if (this.list.length == index + 1)
                msg = '确定将商品【' + row.goodsName + '】下架，是否继续?';

            this.$confirm(msg, '提示', {
                confirmButtonText: '继续下架',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(res => {
                deleteSnow(row).then(res => {
                    this.list = res.data.data;
                })
            });
        },
        handleEnable(row) {//启用
            this.appendVisible = true;
            this.appendForm.id = row.id;
            this.appendForm.stock = row.goodsStock;
            this.appendForm.goodsStock = 0;//追加数量  

            this.appendTitle = "商品上架-追加库存";
        },
        confirmEnable() {
            enableSnow(this.appendForm).then(res => {
                this.list = res.data.data;
                this.appendVisible = false;
                this.$notify.success({
                    title: "成功",
                    message: "上架成功",
                });
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getGoods() {
            listGoods(this.listQuery).then(res => {
                this.goodsList = res.data.data
            })
        },
        getSnowTalents() {
            listSnowTalents().then(res => {
                this.snowTalentsList = res.data.data
                if (this.snowTalentsList.length > 0) {
                    this.listQuery.talentId = this.snowTalentsList[0].dyTalentId;
                    this.getList();
                }
            })
        },
        tableRowClassName({ row, index }) {
            if (row.deleted) {
                return "cancel";
            }
            return "";
        },
        rowDrop() {
            let that = this
            const tbody = document.querySelector(".draggable-table .el-table__body-wrapper tbody");
            new Sortable(tbody, {
                animation: 150,
                // 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
                onEnd: ({ newIndex, oldIndex }) => {
                    this.$confirm('确定调整排序，调整后客户端可见, 是否继续?', '提示', {
                        confirmButtonText: '调整',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(res => {
                        that.list.splice(newIndex, 0, that.list.splice(oldIndex, 1)[0])
                        const newArray = that.list.slice(0)

                        that.list = []
                        that.$nextTick(function () {
                            that.list = newArray
                        })
                    })

                },
            });
        },
    }
};
</script>

<style>
.el-table .cancel {
    background-color: #bebbbb;

    :hover {
        background-color: #bebbbb;
    }
}
</style>


<style lang="scss" scoped>
.preview {
    width: 362px;
    min-width: 362px;
    height: 636px;
    border-radius: 38px;
    padding: 15px 10px;
    line-height: 1.25;
    position: relative;
    background: #f5f5f5;
    padding: 42px 26px;
    background-image: url('../../assets/image/phone-background.png');
    background-size: 360px 636px;
    margin-top: 50px;

    .preview-custom-dom {
        overflow: auto;
        height: 100%;
    }

    .preview-content {
        height: 100%;

        .top {
            font-weight: 600;
            padding-bottom: 10px;
        }

        .small {
            font-size: 10px;
        }

        .time {
            font-size: 12px;
            color: #aaa;
            transform: scale(0.8);
            padding: 10px 0 5px;
        }

        .msg-ul {
            margin: 0;
            padding: 0;
            max-height: 90%;
            overflow: auto;
        }

        .msg-li {
            margin-bottom: 10px;

            .msg-img {
                /deep/ img {
                    max-width: 120px;
                }
            }
        }

        .msg {
            min-height: 28px;
            background-color: #fff;
            border: 1px solid #e4e6e9;
            display: inline-block;
            position: relative;
            text-align: left;
            font-size: 14px;
            line-height: 22px;
            padding: 3px 6px;
            border-radius: 4px;
            max-width: 90%;
            min-width: 24px;
            box-sizing: border-box;
            word-break: break-all;
            white-space: pre-line;
            margin-left: 10px;

            &:before {
                content: ' ';
                display: block;
                position: absolute;
                left: -6px;
                border-width: 4px 6px;
                border-left: 0;
                width: 0;
                border-style: solid;
                border-color: transparent;
                border-right-color: #fff;
                top: 10px;
                z-index: 888;
            }
        }
    }

    .tool {
        position: absolute;
        bottom: 18px;
        display: flex;
        width: calc(100% - 52px);

        img {
            width: 20px;
        }

        .chat-input {
            background: #fff;
            flex: 1;
            margin: 0 0 0 5px;
        }

        .tool-right {
            width: 42px;
            display: flex;
            justify-content: space-between;
        }
    }
}

.el-avatar {
    flex: none;
    background: none;

    /deep/ img {
        width: 100%;
    }
}

video {
    width: 70px;
    height: 70px;
}

.msg-item {
    position: relative;
    width: calc(100% - 35px);
}

.video-layer {
    position: absolute;
    top: 25px;
    left: 25px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #8080801a;

    i {
        color: #fff;
        line-height: 28px;
        text-align: center;
    }
}

.msg-video {
    width: fit-content;
}

.msg-item-image {
    width: fit-content;

    .el-image /deep/ img {
        max-width: 54px;
        max-height: 70px;
    }
}

.msg-card {
    width: 100%;
    display: flex;
    background: #fff;
    padding: 5px;
    border-radius: 5px;

    .el-image {
        width: 45px;
        height: 45px;
        border-radius: 3px;
    }

    .msg-card-info {
        width: calc(100% - 45px);
        text-align: left;
        margin-right: 5px;
    }

    .msg-card-title {
        font-size: 12px;
        line-height: 14px;
        color: #333;
        display: -webkit-box !important;
        overfLow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .msg-card-desc {
        font-size: 10px;
        line-height: 12px;
        margin-top: 4px;
        color: #999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>