<template>
    <view class="home-wrap">
        <view class="amountWrap flex">
            <view class="amountLeft flex">
                <view class="amountName">库存件数</view>
                <view class="remain">{{ storage_count || 0 }}</view>
            </view>
            <view class="amountRight flex">
                <view class="amountName">出库件数</view>
                <view class="outbound">{{ delivery_count || 0 }}</view>
            </view>
        </view>
        <view class="patientTab">
            <view :class="'notActive ft32' + (status == '1' ? ' active PfScMedium' : '')" @click="changeWaitType('1')">
                库存列表</view>
            <view :class="'notActive ft32' + (status == '2' ? ' active PfScMedium' : '')" @click="changeWaitType('2')">
                出库列表
            </view>
        </view>

        <scroll-view class="patient-type-tab1" @scrolltolower="onScroll" scroll-y>
            <view class="bed-wait-container">
                <view class="bed-wait-list">
                    <view class="bed-wait-item" v-for="(item, index) in bedWaitList" :key="index"
                        @click="lookDetail(item)">

                        <view class="bed-wait-info">

                            <view class="bed-wait-name PfScMedium">{{ item.coin_name }}</view>
                            <view class="bed-sex">{{ item.year }}年</view>

                            <view :class="'bed-desc'">
                                {{ item.rating_code }}
                            </view>
                        </view>

                        <view class="bed-wait-time flex-between">
                            <view class="bed-visit-time">{{ item.operate_time }}</view>
                            <view class="bed-checkin-time">{{ item.rating_department }}</view>
                        </view>

                    </view>

                </view>
            </view>
            <view v-if="loading" class="loading-text">加载中...</view>
            <view v-if="noMore" class="no-more-text">没有更多数据了</view>
            <view class="page-padding" v-show="bedWaitList && bedWaitList.length && bedWaitList.length > 0">
            </view>
        </scroll-view>

        <view class="qrcode_wrap">
            <img :src="cssUrl + 'qrcode_get.png'" alt="" @click="scanQrcode">
        </view>

        <PopUpCommon ref="coinsPopup" :showClose="true" zIndex="top">
            <view class="popWrap">
                <view class="pop-title PfScMedium">{{ titleType[scanCodeDetail.ancient_coin_status] }}</view>
                <view class="content">
                    <CoinsDetail :scanCodeDetail="scanCodeDetail" />
                </view>
                <PageBottomBtn :text="btnText[scanCodeDetail.ancient_coin_status]" cancelTxt="取消" @click="onConfirm"
                    @cancelClick="onCancel" :show-cancel="true" />
            </view>
        </PopUpCommon>
    </view>

</template>
<script>
import ListBox from '@/components/listBox.vue';
import PopUpCommon from '@/components/common/popUpCommon.vue';
import CoinsDetail from '../coinsDetail';
import PageBottomBtn from '@/components/pageBottomBtn.vue'

export default {
    options: { styleIsolation: "shared" },
    components: {
        PopUpCommon,
        PageBottomBtn,
        ListBox,
        CoinsDetail
    },
    data() {
        return {
            cssUrl: this.cssUrl,
            status: '1',
            bedWaitList: [],
            titleType: {
                0: '扫码入库',
                '1': '扫码出库',
                '2': '出库信息',
            },
            btnText: {
                0: '入库',
                '1': '出库',
                '2': '再次入库',
            },
            detailItem: {
                name: '北京公博二部',
                num: '1310684212',
                count: 'AU 58',
                size: '24.0*1.1mm，3.5g',
                operate: '泅渡'
            },
            code: '',
            state: '',
            storage_count: '',
            delivery_count: '',
            scanCodeDetail: {
                ancient_coin_status: 0,
                ancient_coin_status_desc: "未入库",
                coin_name: "机制光绪通宝",
                format: "库平一钱满汉广",
                grade: "AU 58",
                rating_agency_id: "1",
                rating_code: "1310684212",
                rating_department: "北京公博二部",
                size: "24.0*1.1mm,3.5g",
                year: "1889"
            },
            loading: false,
            noMore: false,
            page: 1,
            pagesize: 7

        }
    },
    onLoad(option) {
        // var token = uni.getStorageSync("u_token");
        // 初始化情求
        this.getCoinsList()
        // this.$refs.coinsPopup.openPop();
    },
    onPullDownRefresh() {
        this.bedWaitList = [];
        this.page = 1;
        this.getCoinsList()
    },
    onReachBottom() {
        if (!this.noMore && !this.loading) {
            this.page++;
            this.getCoinsList();
        }
    },
    methods: {
        onScroll() {
            if (!this.noMore && !this.loading) {
                this.page++;
                this.getCoinsList();
            }
        },
        getCoinsList() {
            this.loading = true;
            // 获取列表信息
            this.$http.req('/api/getlist', { status: this.status, page: this.page, pagesize: this.pagesize }, 'POST').then(data => {
                uni.stopPullDownRefresh();
                this.loading = false;
                if (data.list.length === 0 || data.length == 0) {
                    this.noMore = true;
                    uni.showToast({ title: '没有更多数据了', icon: 'none' });
                    return;
                }
                // 如果是第一页直接替换，否则追加
                if (this.page === 1) {
                    this.bedWaitList = data.list;
                } else {
                    this.bedWaitList = [...this.bedWaitList, ...data.list];
                }
                this.storage_count = data.storage_count;
                this.delivery_count = data.delivery_count;
            }).catch(res => {
                this.loading = false;
            });
        },
        lookDetail(item) {
            uni.setStorageSync('detail', JSON.stringify(item))
            let url = `/pages/coinsDetail/index?id=${item.rating_code}`
            this.$nav.navToPath(url)
        },
        changeWaitType(type) {
            this.status = type;
            // 调用列表查询接口
            this.getCoinsList()
        },
        changeWaitType(type) {
            this.status = type;
            this.page = 1;
            this.bedWaitList = [];
            // 调用列表查询接口
            this.getCoinsList()
        },
        async scanQrcode() {
            // #ifdef MP-WEIXIN

            uni.scanCode({
                success: (res) => {
                    this.getScanQrcode(res.result)
                },
                complete(res) {
                    if (res.errMsg === 'scanCode:ok') {
                        console.log('扫码成功11:', res.result, this);
                    } else if (res.errMsg === 'scanCode:fail cancel') {
                        console.log('用户取消扫码');
                    } else {
                        uni.showToast({
                            title: '扫码失败' + JSON.stringify(res.errMsg),
                            icon: 'none'
                        })
                    }
                }
            })
            // #endif
        },
        getScanQrcode(result) {
            this.$http.req('/api/get_scan_code_detail', {
                url: result
            }, 'POST').then(data => {
                console.log(data, 'data===data');
                if(data == -1)return
                this.scanCodeDetail = data;
                this.$set(this, 'scanCodeDetail', data)
                setTimeout(() => {
                    console.log(this.scanCodeDetail, '222');
                    this.$refs.coinsPopup.openPop();
                }, 500)
            }).catch(res => {
            });
        },
        async onConfirm() {
            // 确认入库
            let url = '/api/operate'//入库
            let operate = ''
            // 根据当前钱币状态，切换url 或者 参数信息
            let status = this.scanCodeDetail.ancient_coin_status;
            if (status == 0 || status == 2) {
                operate = '1'
            } else {
                operate = '2'
            }
            // 确认出库
            this.$http.req(url, {
                scan_code_detail: JSON.stringify(this.scanCodeDetail),
                operate: operate
            }, 'POST').then(data => {
                // 根据当前列表状态-切换状态
                // 未入库、已出库
                if (status == 0 || status == '2') {
                    if (this.status != '1') this.status = '1'
                } else {
                    if (this.status != '2') this.status = '2'
                }
                this.bedWaitList = [];
                this.page = 1;
                // 更新数据
                this.getCoinsList()
                this.$refs.coinsPopup.closePop()
            }).catch(res => {
                this.loading = false;
            });



        },
        onCancel() {
            this.$refs.coinsPopup.closePop()
        },
    }
}
</script>
<style lang="scss" scoped>
.flex-between{
    display: flex;
    justify-content: space-between;
}
.home-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .amountWrap {
        gap: 16rpx;
        padding: 36rpx 24rpx;
        box-sizing: border-box;
        background: #fff;

        .amountName {
            display: flex;
            align-items: center;
            gap: 12rpx;
            color: #666;
            font-size: 26rpx;
        }

        img {
            width: 20rpx;
            height: 32rpx;
        }

        .amountLeft,
        .amountRight {
            flex: 1;
            padding: 18rpx;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 12rpx;
            background: #F8FFF7;

            .add,
            .use {
                font-size: 40rpx;
            }
        }

        .amountLeft {
            background: #F0F7FD;
        }

    }

    .patientTab {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 120rpx;
        align-items: center;
        margin-top: 20rpx;
        padding: 0 62rpx;
        box-sizing: border-box;
        justify-content: space-between;
        background: white;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.15);
        // box-shadow: 0px 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);

        .notActive {
            width: 269rpx;
            height: 100%;
            text-align: center;
            font-weight: 400;
            color: #666666;
            font-size: 32rpx;
            line-height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .wait-bed-num {
                padding: 0px 14rpx;
                box-sizing: border-box;
                width: auto;
                height: 38rpx;
                min-width: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 60rpx;
                background: #FFEBEB;
                font-size: 28rpx;
                color: #FF1818;
                margin-left: 10rpx;
            }
        }

        .active {
            font-weight: 500;
            color: #4DC56D;
            box-sizing: border-box;
            border-bottom: 4rpx solid #4DC56D;
        }
    }

    .remain,
    .outbound {
        font-weight: 500;
        color: #00A2E2;
        line-height: 56rpx;
        margin-top: 6rpx;
        font-size: 40rpx;
    }

    .outbound {
        color: #4DC56D;
    }

    .patient-type-tab1 {
        height: 0;
        width: 100%;
        background: white;
        flex: 1;

        .bed-wait-container {
            padding: 0rpx 42rpx;
            background: white;
            box-sizing: border-box;
        }

        .bed-wait-item {
            padding: 36rpx 0rpx;
            border-bottom: 2rpx solid #F1F1F1;
            position: relative;
        }

        .bed-wait-info {
            display: flex;

            .bed-wait-name {
                font-size: 30rpx;
                color: #000000;
                margin-right: 24rpx;
                font-weight: 500;
            }

            .bed-visit-type-desc {
                padding: 0 18rpx;
                height: 40rpx;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                line-height: normal;
                border-radius: 6rpx;
                margin-left: 24rpx;
                background: #F7FCFF;
                color: #007FD0;
                border: 1rpx solid #5FA1CB;

                &.ml-auto {
                    margin-left: auto;
                }
            }

            .bed-desc {
                color: #999999;
                font-size: 28rpx;
                margin-left: auto;

                &.active {
                    color: #4DC56D;
                }
            }

            .bed-sex,
            .bed-age {
                font-size: 28rpx;
                font-weight: normal;
                line-height: 44rpx;
                color: #242833;
                letter-spacing: 0.86rpx;
            }

            .bed-age {
                margin-left: 24rpx;
            }
        }

        .bed-wait-time {
            display: flex;
            column-gap: 24rpx;
            margin-top: 16rpx;

            view {
                font-size: 24rpx;
                color: #999999;
            }
        }
    }

    .list-wrap {
        padding: 20rpx 18rpx;
    }

    .qrcode_wrap {
        // position: relative;
        // background: #fff;
        // height: 166rpx;
        // box-shadow: 0px -2rpx 116rpx 0px rgba(181, 181, 181, 0.26);

        background: #fff;
        height: 166rpx;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        box-shadow: 0px -2rpx 116rpx 0px rgba(181, 181, 181, 0.26);

        img {
            width: 122rpx;
            height: 142rpx;
            position: absolute;
            top: -42rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .content {
        max-height: 850rpx;
        margin-bottom: 145rpx;
        overflow-y: auto;
    }

    .pop-title {
        height: 40rpx;
        text-align: center;
        padding: 42rpx 0 22rpx 0;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        text-align: center;
        letter-spacing: 2rpx;
        color: #000000;
        background: #fff;
        // background: #F6F6F8;
    }

    .cancle-button {
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 92rpx;
        text-align: center;
        width: 100%;
        height: 92rpx;
        background: #F1F2F3;
        border-radius: 12rpx;
    }

    .page-padding {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        width: 100%;
        height: 206rpx;
    }

    .loading-text,
    .no-more-text {
        text-align: center;
        padding: 20rpx;
        color: #999;
    }
}
</style>