<template>
    <div class="app-container">
        <!-- <div class="head-container">
            <el-row :gutter="20">
                <el-col :span="3">
                    店铺推送： <el-switch v-model="alldata.allState" :active-value="1" :inactive-value="0"
                        @change="changeEvent(alldata.allState, '')"></el-switch>
                </el-col>
                <el-col :span="3">
                    耗材: <el-switch v-model="alldata.conState" :active-value="1" :inactive-value="0"
                        @change="changeEvent(alldata.conState, 1)"></el-switch>
                </el-col>
                <el-col :span="3">
                    操作商品: <el-switch v-model="alldata.opeState" :active-value="1" :inactive-value="0"
                        @change="changeEvent(alldata.opeState, 2)"></el-switch>
                </el-col>
                <el-col :span="3">
                    商品库存： <el-switch v-model="alldata.stockState" :active-value="1" :inactive-value="0"
                        @change="changeEvent(alldata.stockState, 0)"></el-switch>
                </el-col>
            </el-row>
        </div> -->

        <!-- 查看图片 -->
        <el-button v-if="url" type="primary" @click="dialogVisible = true" style="margin-bottom: 28px;">订阅消息</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div style="width: 100%;text-align: center;">
                <el-image style="width: 200px; height: 200px;" :src="url"></el-image>
            </div>
            <div style="text-align: center;">
                使用微信扫描二维码绑定订阅消息
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="downloadUrl">下载</el-button>
            </span>
        </el-dialog>


        <div class="head-container" id="table_drag">
            <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
                <el-table-column label="头像">
                    <template v-slot="scope">
                        <div class="shop_info">
                            <el-image :src="scope.row.avatar"
                                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
                                <div class="img_error" slot="error">
                                    <i class="icon el-icon-document-delete"></i>
                                </div>
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="昵称" prop="nickname"> </el-table-column>
                <el-table-column label="商品库存预警" prop="createdAt">
                    <template v-slot="scope">
                        <el-switch v-model="scope.row.proState" :active-value="1" :inactive-value="0"
                            @change="changeHot(scope.row.proState, 0, scope.row.openId)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="耗材库存预警" prop="createdAt">
                    <template v-slot="scope">
                        <el-switch v-model="scope.row.conState" :active-value="1" :inactive-value="0"
                            @change="changeHot(scope.row.conState, 1, scope.row.openId)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作商品" prop="createdAt">
                    <template v-slot="scope">
                        <el-switch v-model="scope.row.opeState" :active-value="1" :inactive-value="0"
                            @change="changeHot(scope.row.opeState, 2, scope.row.openId)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template v-slot="scope">
                        <el-popconfirm title="确定解绑吗？" @confirm="delTableHandle(scope.row.openId)">
                            <el-button type="text" slot="reference">解绑</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="head-container">
            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
                @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
</template>

<script>
import { msgall, msginfo, shopState, state, delmsg, subQrCode } from '@/api/notifications'
export default {
    data() {
        return {
            test: "1",
            tableData: {
                data: [],
                page: 1,
                size: 30,
                loading: false,
                total: 0
            },
            alldata: {
                allState: 0,
                conState: 0,
                opeState: 0,
                stockState: 0,
            },
            url: '',
            dialogVisible: false
        }
    },
    mounted() {
        this.getTableData()
        this.getlist()
        this.getsubQrCode()
    },
    methods: {
        downloadUrl() {
            let link = document.createElement("a");
            //创建一个a标签
            link.style.display = "none";
            //将a标签隐藏
            link.href = this.url;
            document.body.appendChild(link);
            //将上面创建的a标签加入到body的尾部
            link.click();
            //执行a标签
            this.dialogVisible = false
        },
        // 二维码
        async getsubQrCode() {
            let res = await subQrCode({
                shopId: localStorage.getItem('shopId')
            })
            this.url = res

        },
        async getlist() {
            let res = await state({
                shopId: localStorage.getItem('shopId'),
            })
            this.alldata = res
        },
        async changeEvent(state, type) {
            let res = await shopState({
                shopId: localStorage.getItem('shopId'),
                type,
                state
            })

        },
        // 设置消息推送
        async changeHot(row, index, openId) {
            // index 0商品库存  1耗材 2操作商品
            let obj = {
                shopId: localStorage.getItem('shopId'),
                type: index,
                state: row, openId
            }
            let res = await msginfo(obj)
            this.$message.success('修改成功!')
            this.getTableData()
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1
            this.getTableData()
        },
        // 获取商品列表
        async getTableData() {
            try {
                this.tableData.loading = true
                const res = await msgall({
                    page: this.tableData.page,
                    size: this.tableData.size,
                    shopId: localStorage.getItem('shopId')
                })
                this.tableData.loading = false
                this.tableData.data = res.records
                this.tableData.total = res.total
            } catch (error) {
                console.log(error)
            }
        },

        // 删除商品
        async delTableHandle(ids) {
            try {
                await delmsg({
                    shopId: localStorage.getItem('shopId'),
                    openId: ids
                })
                this.getTableData()
            } catch (error) {
                console.log(error)
            }
        },
    }
}
</script>

<style scoped lang="scss">
.shop_info {
    display: flex;

    .info {
        flex: 1;
        padding-left: 8px;
        display: flex;
        flex-direction: column;

        .tag_wrap {
            display: flex;
        }
    }
}
</style>