<template>
    <div class="orderbox">
        <div class="orderbox_left">
            <div class="demo_tabs" v-if="props.membershow == '0'">
                <div class="demo_tabs_div">
                    <el-input v-model="tableData.phone" placeholder="请输入手机号" @input="inputChange" clearable @focus="
                        global.updateData(false)" @blur="global.updateData(true)" />
                    <el-button style="margin-left: 10px;" type="primary" @click="addMemberHandle">添加</el-button>
                </div>
            </div>
            <el-table :data="tableData.list" style="width: 100%;margin-top: 10px;height:80%;"
                :row-class-name="tableRowClassName" @cell-click="cellclicktableData" v-loading="loading">
                <el-table-column prop="name" label="昵称" />
                <el-table-column prop="telephone" label="手机" width="200px" />
                <el-table-column prop="code" label="编号" width="150px" />
                <el-table-column prop="level" label="等级" />
                <el-table-column prop="levelConsume" label="积分" />
                <el-table-column prop="amount" label="余额" />
            </el-table>
            <el-pagination layout="prev, pager, next, jumper" style="margin-top: 20px;" :total="Number(tableData.total)"
                @current-change="handleCurrentChange" />
        </div>
        <div class="orderbox_right">
            <div class="orderbox_right_top">
                <div class="orderbox_right_topdiv">
                    <span>会员昵称：</span>
                    <span>{{ tableData.list.length != 0 ? tableData.list[datarow].name : '无' }}</span>
                </div>
                <div class="orderbox_right_topdiv">
                    <span>手机号码：</span>
                    <span>{{ tableData.list.length != 0 ? tableData.list[datarow].telephone : '无' }}</span>
                </div>
                <div class="orderbox_right_topdiv">
                    <span>会员编号：</span>
                    <span>{{ tableData.list.length != 0 ? tableData.list[datarow].code : '无' }}</span>
                </div>
                <div class="orderbox_right_topdiv">
                    <span>会员等级：</span>
                    <span>{{ tableData.list.length != 0 ? tableData.list[datarow].level : '无' }}</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">{{ tableData.list.length != 0 ?
                        tableData.list[datarow].levelConsume : '无' }}</div>
                </div>
                <div class="orderbox_right_top_item" @click="dialogRef.show(tableData.list[datarow].id)">
                    <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>{{ tableData.list.length != 0 ? tableData.list[datarow].amount : '无' }}</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_input" style="margin-top:20px ;" v-if="props.membershow == '1'">
                <el-input placeholder="请输入会员手机号或者编号" v-model="tableData.phone" clearable
                    @input="inputChange"></el-input>
            </div>
            <keyboard v-if="props.membershow == '1'" @consumeFees="consumeFees"></keyboard>
            <div class="orderbox_right_button" v-if="props.membershow == '0'">
                <!-- <el-button style="width: 100%;" @click="toHome">创建订单</el-button> -->
                <!-- <el-button style="width: 60%;" type="primary" @click="recharge = true">账户充值</el-button> -->
                <el-button style="width: 100%;" type="primary" @click="menberAddNnum">账户充值</el-button>
            </div>
            <div class="orderbox_right_button" v-if="props.membershow == '1'">
                <router-link to="/" style="width: 35%;">
                    <el-button style="width: 100%;" @click="memberaddshowclose">添加会员</el-button>
                </router-link>
                <el-button style="width: 60%;" type="primary">确认</el-button>
            </div>
        </div>
        <add ref="dialogRef" @refund="refundSuccess" @page-change="MemberAccount" />
        <el-dialog v-model="memberaddshow" title="添加会员" width="600" :before-close="memberaddshowclose"
            @open="membrform = { ...resetMembrform }">
            <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" @focus="
                        global.updateData(false)" @blur="global.updateData(true)" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="membrform.nickName" @focus="
                        global.updateData(false)" @blur="global.updateData(true)" />
                </el-form-item>
                <el-form-item label="生日" prop="birthDay">
                    <el-col :span="11">
                        <el-date-picker v-model="membrform.birthDay" type="date" placeholder="请选择生日" style="width: 100%"
                            @focus="
                                global.updateData(false)" @blur="global.updateData(true)" />
                    </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="membrform.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="等级" prop="level">
                    <el-select v-model="membrform.level" 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-select>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="createMembermemberSubmit">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="recharge" title="会员充值" width="400" :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">{{ moneys ? moneys : '请输入充值金额' }}</div>

                    </div>
                    <div class='keyboard'>
                        <cwxeyboard @confirmEvent="confirmEvent" @consumeFee="consumeFee" btn-color="orange" title="支付">
                        </cwxeyboard>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
    <el-dialog width="500" v-model="payCarddialogVisible" style="padding: 0; " title="会员充值"
        :close-on-click-modal="false">
        <payCard :amount="moneys" :orderId="orderId" :selecttype="1" @paySuccess="paySuccess" />
    </el-dialog>
    <userCharge ref="userChargeRef" :userInfo="tableData.list[datarow]" @paySuccess="asyncqueryMembermember" />
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage, dayjs } from 'element-plus'
import { queryMembermember, createMembermember, memberqueryMemberAccount, accountPaymember } from '@/api/member/index.js'
import { useUser } from "@/store/user.js"
import lodash from 'lodash'
import add from '@/views/member/components/add.vue'
import cwxeyboard from '@/components/cwx-keyboard/cwx-keyboard.vue'
import keyboard from '@/views/home/components/keyboard.vue'
import payCard from '@/components/payCard/payCard.vue'
import { useRouter } from 'vue-router'
import useStorage from '@/utils/useStorage'
import userCharge from './components/userCharge.vue'
import { staffPermission } from '@/api/user.js'

import { useGlobal } from '@/store/global.js'
const global = useGlobal()

const userChargeRef = ref(null)

const router = useRouter()

const store = useUser()

const stored = ref(false)//储值余额

const handleClose = async () => {
    stored.value = !stored.value
}

const dialogRef = ref(null)

const emit = defineEmits('paySuccess')

function paySuccess() {
    payCarddialogVisible.value = false
    recharge.value = false
    moneys.value = 0
    asyncqueryMembermember()
    emit('paySuccess')
}

const props = defineProps({//首页传值
    membershow: {
        type: String,
        default: '0'
    },
    placeholder: {
        type: String,
        default: '提示'
    },
    amount: {
        type: [Number, String],
        default: 0
    }
})

const loading = ref(false)

const flowingwater = reactive({//获取流水初始化
    total: '',
    list: []
})

const consumeFee = (e) => { //接收子组件值  并赋值给父组件
    moneys.value = e
}

const consumeFees = (e) => {
    tableData.phone = e
}

const payCarddialogVisible = ref(false)

const orderId = ref('')

// 添加会员
async function addMemberHandle() {
    try {
        await staffPermission('yun_xu_guan_li_hui_yuan_xin_xi')
        memberaddshow.value = true
    } catch (error) {
        console.log(error);
    }
}

// 账户充值
async function menberAddNnum() {
    try {
        await staffPermission('yun_xu_xiu_gai_hui_yuan_yu_e')
        userChargeRef.value.show()
    } catch (error) {
        console.log(error);
    }
}

// 退款成功
function refundSuccess() {
    asyncqueryMembermember()
    MemberAccount()
}

const confirmEvent = async () => {//子组件  确认按钮
    orderId.value = tableData.list[datarow.value].id
    payCarddialogVisible.value = true
    // try {
    //     let res = await accountPaymember({
    //         shopId: store.userInfo.shopId,
    //         memberId: tableData.list[datarow.value].id,
    //         amount: moneys.value
    //     })
    //     if (res == null) {
    //         recharge.value = false
    //         moneys.value = 0
    //         ElMessage({
    //             message: '充值成功',
    //             type: 'success',
    //         })
    //         resetMembrform.value = { ...membrform.value }
    //         asyncqueryMembermember()
    //     }
    // } catch (error) {

    // }
}

const MemberAccount = async (page = 1) => {//获取流水
    try {
        let res = await memberqueryMemberAccount({
            memberId: tableData.list[datarow.value].id,
            page: page,
            pageSize: 10
        })
        flowingwater.total = res.total
        // flowingwater.list = res.list
    } catch (error) {

    }
}

const recharge = ref(false)//充值

const memberaddshow = ref(false) //添加会员

const memberaddshowclose = () => {
    memberaddshow.value = !memberaddshow.value
}

const tableData = reactive({//表格数据
    list: [],
    page: 1,
    pageSize: 10,
    phone: '',
    total: ''
})

const inputChange = lodash.debounce(function () { //搜索手机号
    asyncqueryMembermember()
}, 500)

const asyncqueryMembermember = async () => {//会员列表数据
    loading.value = true
    let res = await queryMembermember({
        shopId: store.userInfo.shopId,
        page: tableData.page,
        pageSize: 10,
        phone: tableData.phone,
        isFlag: 0
    })
    if (res) {
        setTimeout(() => {
            loading.value = false
        }, 300)
        tableData.list = res.list
        MemberAccount()
        tableData.total = res.total
    }
}

const tableRowClassName = ({ row, rowIndex }) => {//动态给tab加样式
    if (rowIndex === datarow.value) {
        return 'warning-row'
    } return ''
}

const datarow = ref(0) //初始化右边
const cellclicktableData = (row, column, cell, event) => {
    const index = tableData.list.findIndex(item => item.id == row.id)
    datarow.value = index
    MemberAccount()

}

const handleCurrentChange = (val) => { //页码
    tableData.page = val
    datarow.value = 0
    asyncqueryMembermember()
}

const handlerecharge = () => {
    recharge.value = !recharge.value
}

const resetMembrform = ref({})

const membrform = ref({ //membrform  添加会员表单
    phone: '',
    nickName: '',
    level: '',
    birthDay: '',
    sex: '',
    level: ''
})

const formRef = ref(null); //ref  membrform

const rules = reactive({ // membrform验证
    phone: [
        {
            required: true,
            message: "请输入11位手机号码",
            trigger: "blur",
        },
    ],
    nickName: [
        {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
        },
    ],
    sex: [
        {
            required: true,
            message: "请选择性别",
            trigger: 'change',
        },
    ],
    level: [
        {
            required: true,
            message: "请选择等级",
            trigger: 'change',
        },
    ],
    birthDay: [
        {
            type: 'date',
            required: true,
            message: '请选择生日日期',
            trigger: 'change',
        },
    ],
});
const createMembermemberSubmit = async () => { ///添加会员
    formRef.value.validate(async (valid) => {
        console.log(valid)
        if (valid) {

            let res = await createMembermember({
                shopId: store.userInfo.shopId,
                phone: membrform.value.phone,
                nickName: membrform.value.nickName,
                sex: membrform.value.sex,
                level: membrform.value.level,
                birthDay: dayjs(membrform.value.birthDay).format("YYYY-MM-DD")
            })
            if (res == null) {

                memberaddshowclose()
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                asyncqueryMembermember()
            }


        }
    });
}
const moneys = ref('')// 钱数

// 创建会员订单
const toHome = () => {
    // useStorage.set('memberInfo', tableData.list[datarow.value])
    global.setOrderMember(tableData.list[datarow.value])
    router.push({
        name: 'home'
    })
}

onMounted(() => {
    // resetMembrform.value = { ...membrform.value }
    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;
            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: 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: 100%;
            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>