<template>
<!-- 切换模式卡片 -->
<uni-popup type="center" ref="refSwitchModel" @maskClick="emits('makClose')">
    <view class="switch-model">
            <view class="title">切换模式</view>
            <view class="sun-text">如需设置收银机兼容 请点击设置按钮设置</view>
            <view class="sub-title">独立收银模式：<view class="model-tag" v-if="!vdata.pos">当前正在使用</view>
            </view>
            <view class="tips">接入电源后即可使用，后屏输入收款金额，前屏支持刷脸支付和扫码支付。</view>
            <view class="sub-title">POS模式：<view class="model-tag" v-if="vdata.pos">当前正在使用</view>
            </view>
            <view class="tips">需要连接收银机或PC使用，即插即用，收款将会进入您的现有收银软件账户。</view>
            <view class="pay-model" hover-class="hover-model" hover-stay-time="50" @tap="switchFaceMdoel">
                <image src="/static/iconImg/switch-model-ali.svg" mode="scaleToFill" />
                切换至{{ !vdata.pos ? 'POS' : '独立收银' }}模式
            </view>
        </view>
</uni-popup>
</template>

<script setup>

import { ref, reactive } from "vue"
import storageManage from '@/commons/utils/storageManage.js'
const emits = defineEmits(['open', 'makClose', 'switch', 'update:value'])
const refSwitchModel = ref(null)
const vdata = reactive({
    pos: false
})
const open = () => {
    if (storageManage.faceModel() == 'pos') {
        vdata.pos = true
    } else {
        vdata.pos = false
    }
    refSwitchModel.value.open()
}
const switchFaceMdoel = () => {
    uni.showModal({
        title: '提示',
        content: `是否切换为${!vdata.pos ? 'POS' : '独立收银'}模式？`,
        showCancel: true,
        success: ({ confirm, cancel }) => {
            if (confirm) {
                if (!vdata.pos) {
                    storageManage.faceModel('pos')
                    emits('update:value', 'pos')
                } else {
                    storageManage.faceModel('cashier')
                    emits('update:value', 'cashier')
                }
                refSwitchModel.value.close()
            }
        }
    })
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.switch-model {
    padding: 0.1rpx 20rpx;
    padding-bottom: 30rpx;
    width: 75vw;
    min-height: 300rpx;
    border-radius: 14rpx;
    background-color: #fff;

    .title {
        margin: 30rpx 0;
        text-align: center;
        font-weight: 600;
        font-size: 32rpx;
    }
.sun-text{
    margin: 15rpx 0;
    margin-bottom: 30rpx;
    font-size: 22rpx;
    text-align: center;
    color: #666;
}
    .sub-title {
        font-size: 28rpx;
        font-weight: 600;

        .model-tag {
            float: right;
            background-color: $v-primary;
            color: #fff;
            padding: 5rpx 10rpx;
            border-radius: 5rpx;
            font-size: 14rpx;
        }
    }

    .tips {
        color: #595959;
        font-size: 15rpx;
        margin: 20rpx 0;
        line-height: 2;
    }

    .pay-model {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        height: 60rpx;
        border: 1rpx solid $v-primary;
        border-radius: 5rpx;
        background-color: rgba(241, 255, 245, .3);
        ;
        color: $v-primary;
        font-size: 18rpx;
        letter-spacing: 2rpx;

        image {
            margin-right: 8rpx;
            width: 20rpx;
            height: 20rpx;
        }
    }

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