<template>
    <div class="orderbox">
        <div class="orderbox_left">
            <el-table :data="tableData" height="90%" style="width: 100%;margin-top: 10px;">
                <el-table-column prop="date" label="昵称" width="" />
                <el-table-column prop="name" label="手机" width="" />
                <el-table-column prop="address" label="编号" />
                <el-table-column prop="address" label="等级" />

                <el-table-column prop="address" label="积分" />
                <el-table-column prop="address" label="余额" />

            </el-table>
        </div>
        <div class="orderbox_right">
            <div class="orderbox_right_top">
                <div class="orderbox_right_topdiv">
                    <span>会员昵称：</span>
                    <span>admin</span>
                </div>
                <div class="orderbox_right_topdiv">
                    <span>手机号码：</span>
                    <span>1999999999999</span>
                </div>
                <div class="orderbox_right_topdiv">
                    <span>会员编号：</span>
                    <span>1245</span>
                </div>
                <div class="orderbox_right_topdiv">
                    <span>会员等级：</span>
                    <span>未设置</span>
                </div>
                <div class="orderbox_right_top_item">
                    <div class="orderbox_right_top_item_one">
                        <el-icon :size="24" style="color:#ffbc42 ;">
                            <Money />
                        </el-icon>
                        <span class="orderbox_right_top_item_onespan">会员积分</span>
                    </div>
                    <div class="orderbox_right_top_item_tow">0</div>
                </div>
                <div class="orderbox_right_top_item" @click="stored = true">
                    <div class="orderbox_right_top_item_one">
                        <el-icon :size="24" style="color:#00b58d ;">
                            <Box />
                        </el-icon>
                        <span class="orderbox_right_top_item_onespan">储值余额</span>
                    </div>
                    <div class="orderbox_right_top_item_tow">
                        <span>0</span>
                        <el-icon size="10">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
            <div class="orderbox_right_input">
                <el-input placeholder="请输入会员手机号或者编号" v-model="moneys.money" clearable @input="inputChange"></el-input>
            </div>
            <div class="orderbox_right_inputkeyboard">
                <div class='keyboard'>
                    <div class='key-row'>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='1'>1</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='2'>2</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='3'>3</el-button>
                    </div>
                    <div class='key-row'>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='4'>4</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='5'>5</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='6'>6</el-button>
                    </div>
                    <div class='key-row'>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='7'>7</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='8'>8</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='9'>9</el-button>
                    </div>
                    <div class='key-row'>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='.'>.</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='0'>0</el-button>
                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
                            data-num='D'>c</el-button>
                    </div>
                </div>
            </div>
            <div class="orderbox_right_button">
                <el-button style="width: 35%;"  @click="recharge = true">添加会员</el-button>
                <el-button style="width: 60%;" type="primary"
                    @click="onSubmit">确认</el-button>

            </div>
        </div>
        <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
            <div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
                <div class="dialog_footer_left">
                    <span>微信用户</span>
                    <span>2021-02-22 18:05:53</span>
                </div>
                <div class="dialog_footer_right">
                    <span>19000</span>
                    <span>26300</span>
                </div>
            </div>

        </el-dialog>
        <el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
            <div class="recharge_footer">
                <div class="recharge_footer_item">
                    qq
                </div>
                <div class="recharge_footer_itemright">
                    <div class="recharge_footer_itemright_input">
                        <div>充值金额：</div>
                        <div v-if="moneys.money">{{ moneys.money ? moneys.money : '请输入充值金额' }}</div>

                    </div>

                </div>

            </div>

        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
import lodash_ from 'lodash'

const route = useRoute()


const stored = ref(false)//储值余额
// const inputChange = lodash_.debounce(function (e) {
//     productqueryCommodityInfoAjax()
// }, 500)
const handleClose = () => {
    stored.value = !stored.value
}
const recharge = ref(false)//充值

const onSubmit = () => {
    ElMessage({
        message: '请输入订单号查询',
        type: 'warning',
    })
}
const handlerecharge = () => {
    recharge.value = !recharge.value
}
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: '1',
    },
]
const moneys = reactive({
    money: ''
})
const _handleKeyPress = (e) => {
    console.log('点击传e', e.target.dataset.num);
    let num = e.target.dataset.num;
    console.log(num)
    //不同按键处理逻辑
    // -1 代表无效按键，直接返回
    if (num == -1) return false;
    switch (String(num)) {
        //小数点
        case '.':
            _handleDecimalPoint();
            break;
        //删除键
        case 'D':
            _handleDeleteKey();
            break;
        default:
            _handleNumberKey(num);
            break;
    }
}
watch(() => moneys.money, (newVal, oldVal) => {
    console.log(`New: ${newVal}, Old: ${oldVal}`)
})
//处理数字
const _handleNumberKey = (num) => {
    if (moneys.money.length == 10) {
        return
    }
    console.log(num, 247)
    let S = moneys.money;
    //如果有小数点且小数点位数不小于2
    if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
        moneys.money = S + num;
    //没有小数点
    if (!(S.indexOf('.') > -1)) {
        //如果第一位是0，只能输入小数点
        if (num == 0 && S.length == 0)
            moneys.money = '0.';
        else {
            if (S.length && Number(S.charAt(0)) === 0) return;
            moneys.money = S + num;
        }
    }
}
//处理小数点函数
const _handleDecimalPoint = () => {
    //如果包含小数点，直接返回
    if (moneys.money.indexOf('.') > -1) return false;
    //如果小数点是第一位，补0
    if (!moneys.money.length) {
        moneys.money = '0.';
    } else {
        //如果不是，添加一个小数点
        moneys.money = moneys.money + '.';
    }
}
//处理删除键
const _handleDeleteKey = () => {
    let S = moneys.money;
    //如果没有输入，直接返回
    if (!S.length) return false;
    //否则删除最后一个
    moneys.money = S.substring(0, S.length - 1);
}
</script>

<style scoped lang="scss">
.orderbox {
    display: flex;
    height: 100%;

    .orderbox_left {
        width: 70%;
        height: 100%;
        background: #fff;
        border-radius: 10px;
        padding: 16px 0;

    }

    .orderbox_right {
        position: relative;
        width: 30%;
        padding: 20px;
        margin-left: 10px;
        background: #fff;
        border-radius: 10px;

        .orderbox_right_top {
            color: #fff;
            width: 100%;
            background: #8b008b;
            padding: 10px;
            border-radius: 10px;

            .orderbox_right_topdiv:nth-child(1) {
                margin-top: 0px;
            }

            .orderbox_right_topdiv {
                display: flex;
                margin-top: 10px;
                justify-content: space-between;
            }

            .orderbox_right_top_item {
                position: relative;
                background: #fff;
                padding: 6px 10px;
                display: flex;
                margin-top: 10px;
                border-radius: 10px;
                justify-content: space-between;
                align-items: center;

                .orderbox_right_top_item_one {
                    display: flex;
                    align-items: center;

                    .orderbox_right_top_item_onespan {
                        color: black;
                        margin-left: 10px;
                        font-size: 16px;
                    }
                }

                .orderbox_right_top_item_tow {
                    color: black;
                    margin-left: 10px;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }

        .orderbox_right_input {
            margin-top: 10px;
        }

        .orderbox_right_inputkeyboard {
            margin-top: 20px;

            .keyboard {
                width: 100%;
                background: #FFFFFF;

                .key-row {
                    display: flex;
                    display: -webkit-flex;
                    position: relative;
                    height: 8vh;
                    line-height: 8vh;
                }
            }

            .keyboard .key-cell {
                flex: 1;
                -webkit-box-flex: 1;
                font-size: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .orderbox_right_button {
            position: absolute;
            width: 90%;
            left: 50%;
            bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transform: translateX(-50%) !important;
        }
    }

    .dialog_footer:nth-child(1) {
        margin-top: 0;
    }

    .dialog_footer {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;

        .dialog_footer_left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            span:nth-child(1) {
                font-size: 18px;
                font-weight: 500;

            }

            span:nth-child(2) {
                margin-top: 10px;
                color: #333;
            }
        }

        .dialog_footer_right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            span:nth-child(1) {
                color: #fc3d3d;
                font-size: 16px;

            }

            span:nth-child(2) {
                margin-top: 10px;
                font-size: 14px;
            }
        }
    }

    .recharge_footer {
        display: flex;
        justify-content: space-between;

        .recharge_footer_item {
            width: 50%;
        }

        .recharge_footer_itemright {
            width: 50%;
            position: relative;
            bottom: 0;
            left: 0;

            .recharge_footer_itemright_input {
                width: 100%;
                background: #333333;
                border-radius: 10px;
                padding: 0 6px;
                display: flex;
                height: 60px;
                justify-content: space-between;
                align-items: center;

                div:nth-child(1) {
                    color: #56792e;
                    font-size: 16px;
                }

                div:nth-child(2) {
                    color: #88937c;
                    font-size: 20px;
                }
            }

            .key-zero-and-point {
                display: flex;
                height: 10vh;
                justify-content: center;
                align-items: center;
                width: 75%;
                font-size: 30px;

                .zero {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 66.66%;
                    font-size: 30px;
                    text-align: center;
                    height: 100%;
                }

                .point {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 33.33%;
                    font-size: 30px;
                    text-align: center;
                    height: 100%;
                }
            }

            .key-cell:active {
                color: white;
                background: black; //黑色
                opacity: 0.1; //这里重要，就是通过这个透明度来设置
            }

            .a:active,
            .key-confirm2:active {
                color: white;
                background: black; //黑色
                opacity: 0.1; //这里重要，就是通过这个透明度来设置
            }
        }
    }
}
</style>