<template>
    <view class="container">
      
	<!-- 	<view class="page-top flex-row flex-y-center">
            <view class="type-btn flex-grow-0 flex-center" @click="onTopBtnTap(3)">
                餐桌类型 <view class="d3"></view>
            </view>
            <uni-search-bar :radius="100" placeholder="搜索" @confirm="search" class="flex-grow-1"></uni-search-bar>
        </view>
		 -->
		
        <view class="list">
            <view class="item" v-for="(item,index) in list" :key="index">
                <view class="top flex flex-y-center box-pack-between">
                    <view class="name">{{item.code}}</view>
                    <view class="flex-y-center">
                        <view class="del" @click="del(item.id)">呼叫入座</view>
                        <view class="del" style="background: #007AFF;" @click="onTypeChange(item.id)">跳过</view>
                        <!-- 	<switch :checked="item.state==1?true:false" @change="onTypeChange" :data-index="index"
							color="#247EFF" class="type-btn" /> -->
                    </view>
                </view>
                <view class="content flex flex-y-center" hover-class="nav-hover">
                    <view class="cell flex flex-y-center">
                        <view class="title">位置类型：</view>
                        <view class="desc">{{item.type_name}}</view>
                    </view>
                    <view class="cell flex flex-y-center">
                        <view class="title">取号数量：</view>
                        <view class="desc">{{item.count}}</view>
                    </view>
                </view>
            </view>

            <view class="no-more">没有更多内容了~</view>
        </view>
        <!-- 	<view class="footer-bar">
			<view class="content flex flex-center">
				<navigator url="/saomaDiancan/editPrinter/editPrinter" class="btn">+新增设备</navigator>
			</view>
		</view> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                admin_id: "",
                list: [],
                page: 1,
                is_bottom: false
            }
        },
        onLoad(options) {
            this.admin_id = uni.getStorageSync("admin_id");
        },

        onShow() {
            this.getData(1)
        },

        onReachBottom() {
            if (!this.is_bottom) {
                this.getData(this.page + 1)
            }
        },
        methods: {

            del(id) {
                uni.showModal({
                    title: '提示',
                    content: '确定要入座？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.request({
                                url: 'Smdcshop/editLineStatus',
                                data: {
                                    id: id,
                                    status: 1,
                                },
                            }).then(res => {
                                console.log(res, "res")
                                if (res.code === 200 || res.code === "200") {
                                    uni.showToast({
                                        title: "入座成功",
                                        icon: "none",
                                    })
                                    setTimeout(() => {
                                        this.getData(1)
                                    }, 2000)
                                }
                            }).catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: "none",
                                })
                            });
                        }
                    },
                    fail: () => {},
                    complete: () => {}
                });
            },

            onTypeChange(id) {
                uni.showModal({
                    title: '提示',
                    content: '确定要跳过？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.request({
                                url: 'Smdcshop/editLineStatus',
                                data: {
                                    id: id,
                                    status: 0
                                },
                            }).then(res => {
                                console.log(res, "res")
                                if (res.code === 200 || res.code === "200") {
                                    uni.showToast({
                                        title: "已跳过",
                                        icon: "none",
                                    })
                                    setTimeout(() => {
                                        this.getData(1)
                                    }, 2000)
                                }
                            }).catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: "none",
                                })
                            });
                        }
                    },
                    fail: () => {},
                    complete: () => {}
                });
            },



            getData(page) {
                if (page == 1) {
                    this.list = []
                    this.page = 1
                    this.is_bottom = false
                }
                this.request({
                    url: 'Smdcshop/getline_list',
                    data: {
                        page,
                        limit: 10,
                        admin_id: this.admin_id
                    }
                }).then(res => {
                    if (res.code == 200 && res.data.length) {
                        this.list = this.list.concat(res.data)
                        this.page = page
                    } else {
                        this.is_bottom = true
                    }
                })
            }

        }
    }
</script>

<style lang="scss">
    @import url("../static/css/common.css");

    .page-top {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 99;
        padding: 10rpx 0;
        box-shadow: 0 5rpx 10rpx #f0f0f0;
        .type-btn{
            font-size: 24rpx;
            padding-left: 24rpx;
        }
        .d3 {
            width: 0;
            height: 0;
            border-width: 12rpx;
            border-style: solid;
            border-color: #000 transparent transparent transparent;
            margin-top: 14rpx;
            margin-left: 10rpx;
        }
    }

    .del {
        height: 44rpx;
        line-height: 44rpx;
        padding: 0 15rpx;
        font-size: 24rpx;
        background-color: #FF5722;
        margin-right: 25rpx;
        color: #fff;
        border-radius: 6rpx;
    }

    page {
        background-color: #F4F5F7;
    }

    .list {
        padding: 30rpx 25rpx;
    }

    .list .item {
        border-radius: 8rpx;
        overflow: hidden;
        padding-left: 30rpx;
        border-left: 8rpx solid #247EFF;
        background-color: #fff;
        margin-bottom: 30rpx;
    }

    .list .item .top {
        height: 80rpx;
        border-bottom: 1rpx solid #f5f5f5;

    }

    .list .item .top .name {
        font-size: 30rpx;
        line-height: 80rpx;
        font-weight: bold;
    }

    .list .item .top .type-btn {
        zoom: 0.7;
        margin-right: 25rpx;
    }

    .list .item .content {
        padding: 20rpx 0 24rpx;
    }

    .list .item .content .cell {
        flex: none;
        width: 50%;
        box-sizing: border-box;
        padding-right: 30rpx;
        font-size: 26rpx;
        line-height: 37rpx;
        color: #666;
    }

    .list .item .content .cell .title {
        color: #99A0AD;
    }
</style>
