<template>
    <div class="orderbox">
        <div class="orderbox_left">
            <div class="demo_tabs">
                <div class="demo_tabs_div">
                    <el-input v-model="firstinput" placeholder="请输入手机号或编号" clearable />
                    <el-button style="margin-left: 10px;" type="primary" @click="memberaddshow = true">添加</el-button>
                </div>
            </div>
            <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 class="orderbox_right_top_item">
                    <div class="orderbox_right_top_item_one">
                        <el-icon :size="24" style="color:#00b58d ;">
                            <CopyDocument />
                        </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_button">
                <el-button style="width: 100%;" type="primary" @click="recharge = true">会员充值</el-button>
                <el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger">取消</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="memberaddshow" title="添加会员" width="600" :before-close="memberaddshowclose">
            <el-form ref="formRef" :rules="rules" :model="membrform" label-width="70px" hide-required-asterisk>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="membrform.phone" />
                </el-form-item>

                <el-form-item label="生日" prop="date1">
                    <el-col :span="11">
                        <el-date-picker v-model="membrform.date1" type="date" placeholder="请选择生日" style="width: 100%" />
                    </el-col>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="membrform.resource">
                        <el-radio label="男" />
                        <el-radio label="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="等级">
                    <el-select v-model="membrform.region" placeholder="请选择等级">
                        <el-option label="等级1" value="1" />
                        <el-option label="等级2" value="2" />
                        <el-option label="等级3" value="3" />
                        <el-option label="等级4" value="4" />
                        <el-option label="等级5" value="5" />
                        <el-option label="等级6" value="6" />
                        <el-option label="等级7" value="7" />
                        <el-option label="等级8" value="8" />

                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="onSubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
            <div class="recharge_footer">
                <div class="recharge_footer_item">
                    <div class="recharge_footer_items" v-for="(item, index) in 6" :key="index">
                        <div>充1000送300</div>
                        <div>充1000.00到13000.00</div>
                    </div>
                </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 class='keyboard' @click.stop='_handleKeyPress'>
                        <div class='key-row'>
                            <div class='key-cell cell_b' data-num='7'>7</div>
                            <div class='key-cell cell_b' data-num='8'>8</div>
                            <div class='key-cell cell_b' data-num='9'>9</div>
                            <div class='key-cell cell_b' data-num='-1'></div>
                        </div>
                        <div class='key-row'>
                            <div class='key-cell cell_b' data-num='4'>4</div>
                            <div class='key-cell cell_b' data-num='5'>5</div>
                            <div class='key-cell cell_b' data-num='6'>6</div>
                            <div class='key-cell cell_b' data-num='-1'></div>
                        </div>
                        <div class='key-row'>
                            <div class='key-cell cell_b' data-num='1'>1</div>
                            <div class='key-cell cell_b' data-num='2'>2</div>
                            <div class='key-cell cell_b' data-num='3'>3</div>
                            <div class='key-cell cell_b' data-num='-1'></div>
                        </div>
                        <div class="key-zero-and-point">
                            <div class="a cell_b zero" data-num='0'>0</div>
                            <div class="a cell_b point" data-num='.'>.</div>
                        </div>

                        <div @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
                            <text data-num='D'>C</text>
                        </div>

                        <div class='key-confirm' style="background:green">
                            <div data-num='S'>
                                <div data-num='S' class="title">确认</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

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

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
import { queryMembermember } from '@/api/member/index.js'
import { useUser } from "@/store/user.js"
const route = useRoute()//vue-router
const store = useUser()
const firstinput = ref('')//搜索输入框
const stored = ref(false)//储值余额
const handleClose = () => {
    stored.value = !stored.value
}
const recharge = ref(false)//充值
const memberaddshow = ref(true) //添加会员
const memberaddshowclose = () => {
    memberaddshow.value = !memberaddshow.value
}
const asyncqueryMembermember = async () => {
    let res = await queryMembermember({
        shopId: store.userInfo.shopId
    })
    console.log(res,'1111111')
}
const handlerecharge = () => {
    recharge.value = !recharge.value
}
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: '1s',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: '1s',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: '1s',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: '1s',
    },
]
const membrform = reactive({ //membrform  添加会员表单
    phone: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const formRef = ref(null); //ref  membrform
const rules = reactive({ // membrform验证
    phone: [
        {
            required: true,
            message: "请输入11位手机号码",
            trigger: "blur",
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: '请选择生日日期',
            trigger: 'change',
        },
    ],
    name: [
        {
            required: true,
            message: "请输入登录密码",
            trigger: "blur",
        },
    ],
});
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        console.log(valid)
        if (valid) {
            // const params = {
            //     serialNumber: RandomNumBoth(1000, 9999),
            //     clientType: 'pc',
            //     loginName: form.phone,
            //     password: form.password
            // }

            // store.userlogin(params).then((res) => {
            //     loading.value = true;
            //     ElMessage.success("登录成功");
            //     setTimeout(() => {
            //         router.replace({
            //             name: "home",
            //         });
            //     }, 1000);
            // }).catch(err => {
            //     loading.value = false
            // });
        }
    });
    console.log(membrform.name)
    console.log('submit!')
}
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;
        //清空键
        case 'C':
            _handleClearKey();
            break;
        //确认键
        case 'S':
            _handleConfirmKey();
            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
    }
    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);
}

//处理清空键
const _handleClearKey = () => {
    moneys.money = '';
}
const _handleConfirmKey = () => {
    let S = moneys.money;
    //未输入
    if (!S.length || S == 0) {
        ElMessage({
            message: '请输入正确的数值',
            type: 'warning',
        })
        return false;
    }
    //将 8. 这种转换成 8.00
    if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
        S = Number(S.substring(0, S.length - 1)).toFixed(2);
    //保留两位
    S = Number(S).toFixed(2);
    this.$emit('confirmEvent', S);    //提交参数
}
onMounted(() => {
      asyncqueryMembermember()
})
</script>

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

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

        .demo_tabs {
            .demo_tabs_div {
                padding: 0 20px;
                display: flex;
            }

            .demo_tabs_box {
                width: 100%;
                padding: 10px 20px;

                .demo_tabs_boxitem {
                    width: 100%;
                    padding: 6px 16px;
                    border-radius: 6px;
                    display: flex;
                    justify-content: space-between;
                    // background: #eeeeee;
                    border-bottom: 1px solid #ccc;

                    .demo_tabs_boxitem_one {
                        display: flex;
                        justify-content: flex-start;

                        .demo_tabs_boxitem_oneone {
                            display: flex;
                            margin-left: 20px;
                            flex-direction: column;
                            height: 70px;
                            justify-content: space-around;
                        }

                        .demo_tabs_boxitem_onetow {
                            display: flex;
                            margin-left: 20px;
                            flex-direction: column;
                            height: 70px;
                            justify-content: space-around;
                        }
                    }
                }

                .demo_tabs_boxitem_tow {
                    display: flex;
                    flex-direction: column;
                    height: 70px;
                    justify-content: space-around;
                    align-items: flex-end;

                }
            }

        }

    }

    .orderbox_right {
        position: relative;
        width: 40%;
        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_button {
            position: absolute;
            width: 90%;
            left: 50%;
            bottom: 16px;
            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: 60%;
            background: #f2f2f2;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            flex-flow: wrap;

            .recharge_footer_items {
                background: #187ead;
                padding: 16px 22px;
                width: 45%;
                height: fit-content;
                text-align: center;
                border-radius: 10px;

                div:nth-child(1) {
                    color: #fff;
                    font-size: 20px;
                }

                div:nth-child(2) {
                    color: #bad9e7;
                    font-size: 14px;

                }
            }
        }

        .recharge_footer_itemright {
            padding-left: 20px;
            width: 40%;
            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;
                }
            }

            .keyboard {
                width: 100%;
                height: 40vh;
                background: #FFFFFF;

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


                }
            }


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

            .keyboard .key-confirm {
                position: absolute;
                text-align: center;
                height: 30vh;
                width: 25%;
                line-height: 30vh;
                color: #FFFFFF;
                z-index: 5;
                right: 0;
                bottom: 0;

                display: flex;
                justify-content: center;
                align-items: center;
            }

            .keyboard .key-confirm2 {
                position: absolute;
                height: 10vh;
                width: 25%;
                line-height: 10vh;
                z-index: 9999;
                right: 0;
                top: 60px;
                font-size: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .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>