<template>
    <div class="container">
        <div class="left_content">
            <div class="query_wrap">
                <div class="form">
                    <el-input v-model="queryForm.key" placeholder="请输入昵称或手机号查询" style="width: 230px;"
                        @input="phoneInput"></el-input>
                    <el-select v-model="queryForm.isVip" placeholder="是否为会员" style="width: 150px;"
                        @change="getUserList">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                    <div class="btns">
                        <el-button type="primary" @click="queryHandle">查询</el-button>
                        <el-button @click="resetHandle">重置</el-button>
                    </div>
                </div>
                <!-- <el-button type="warning">添加会员</el-button> -->
            </div>
            <div class="table_wrap">
                <el-table ref="tableRef" :data="tableData.list" v-loading="tableData.loading" border strip height="100%"
                    highlight-current-row @current-change="handleCurrentChange">
                    <el-table-column label="昵称" prop="nickName" width="200">
                        <template v-slot="scope">
                            <div class="info">
                                <el-image :src="scope.row.headImg"
                                    style="width: 40px;height: 40px;flex-shrink: 0;"></el-image>
                                <span>{{ scope.row.nickName }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机" prop="phone" width="150"></el-table-column>
                    <el-table-column label="性别" prop="sex">
                        <template v-slot="scope">
                            {{ scope.row.sex == 1 ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="会员" prop="isVip" width="200">
                        <template v-slot="scope">
                            <div v-if="scope.row.isVip == 0">未成为会员</div>
                            <div v-else>
                                会员编号：{{ scope.row.code }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="账户积分" prop="pointBalance" width="150"></el-table-column>
                    <el-table-column label="钱包余额" prop="amount" width="150"></el-table-column>
                    <el-table-column label="消费累计" prop="consumeAmount" width="150"></el-table-column>
                    <el-table-column label="消费次数累计" prop="consumeCount" width="150"></el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background v-model:current-page="queryForm.page" v-model:page-size="queryForm.size"
                    :page-sizes="[10, 30, 50, 100]" layout="sizes, pager, jumper, total" :total="tableData.total"
                    @size-change="getUserList" @current-change="getUserList"></el-pagination>
            </div>
        </div>
        <div class="right_content">
            <div class="row_wrap">
                <div class="top_info">
                    <div class="row">
                        <span>会员昵称：</span>
                        <span v-if="currentRow">{{ currentRow.nickName || '' }}</span>
                    </div>
                    <div class="row">
                        <span>手机号码：</span>
                        <span v-if="currentRow">{{ currentRow.phone || '' }}</span>
                    </div>
                    <div class="row">
                        <span>会员编号：</span>
                        <span v-if="currentRow">{{ currentRow.code || '' }}</span>
                    </div>
                    <div class="row">
                        <span>会员生日：</span>
                        <span v-if="currentRow">{{ currentRow.birthDay || '' }}</span>
                    </div>
                    <div class="row">
                        <div class="fit_row">
                            <div class="flex">
                                <span>会员积分：</span>
                                <span v-if="currentRow">{{ currentRow.accountPoints || 0 }}</span>
                                <span v-else>0</span>
                            </div>
                        </div>
                    </div>
                    <div class="row" @click="RecordDialogRef.show(currentRow)">
                        <div class="fit_row">
                            <div class="flex">
                                <span>储值余额：￥ </span>
                                <span v-if="currentRow">{{ currentRow.amount || 0 }}</span>
                                <span v-else>0</span>
                            </div>
                            <el-icon class="icon">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn_wrap">
                <div class="btn">
                    <el-button type="success" style="width: 100%;" @click="StoreWineManagementRef.show()">存酒管理</el-button>
                </div>
                <div class="btn">
                    <el-button type="warning" style="width: 100%;" @click="UserChargeRef.show()">账户充值</el-button>
                </div>
                <div class="btn">
                    <el-button type="primary" style="width: 100%;" @click="AddUserDrawerRef.show()">添加会员</el-button>
                </div>
            </div>
        </div>
    </div>
    <!-- 会员余额充值 -->
    <UserCharge ref="UserChargeRef" :user-info="currentRow" @pay-success="getUserList" />
    <!-- 充值记录 -->
    <RecordDialog ref="RecordDialogRef" @refund="getUserList" />
    <!-- 添加会员 -->
    <AddUserDrawer ref="AddUserDrawerRef" @success="queryHandle" />
    <!-- 存酒管理 -->
    <StoreWineManagement ref="StoreWineManagementRef" :user-info="currentRow" />
</template>

<script setup>
import _ from 'lodash'
import { ref, onMounted } from 'vue'
import { shopUserList } from '@/api/account.js'
import UserCharge from './components/userCharge.vue'
import RecordDialog from './components/recordDialog.vue'
import AddUserDrawer from './components/addUserDrawer.vue'
import StoreWineManagement from './components/storeWineManagement.vue'

const UserChargeRef = ref(null)
const RecordDialogRef = ref(null)
const AddUserDrawerRef = ref(null)
const StoreWineManagementRef = ref(null)

const queryForm = ref({
    key: '',
    isVip: '',
    page: 1,
    size: 10
})

const resetQueryForm = ref({})

const tableRef = ref(null)
const tableData = ref({
    total: 0,
    loading: false,
    list: []
})

const currentRow = ref({})

// 当前选中的表格row
function handleCurrentChange(e) {
    currentRow.value = e
}

// 设置选中表格
function setCurrent(row) {
    currentRow.value = { ...row }
    tableRef.value.setCurrentRow(row)
}

// 重置页码查询
function queryHandle() {
    queryForm.value.page = 1
    getUserList()
}

// 重置
function resetHandle() {
    queryForm.value = { ...resetQueryForm.value }
    getUserList()
}

// 输入
const phoneInput = _.debounce(function (e) {
    getUserList()
}, 800)

// 获取用户列表
async function getUserList() {
    try {
        tableData.value.loading = true
        const res = await shopUserList(queryForm.value)
        tableData.value.list = res.records
        tableData.value.total = +res.totalRow

        if (res.records.length) {
            console.log('有数据');
            // 有数据要设置默认选中的会员
            setCurrent(res.records[0])
        } else {
            console.log('没有数据');
            currentRow.value = {}
        }
    } catch (error) {
        console.log(error);
    }
    tableData.value.loading = false
}

onMounted(() => {
    resetQueryForm.value = { ...queryForm.value }
    getUserList()
})
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;

    .left_content {
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        padding: var(--el-font-size-base);

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

            .form {
                display: flex;
                gap: 10px;

                .btns {
                    display: flex;
                }
            }
        }

        .table_wrap {
            width: calc(100vw - 440px);
            padding: var(--el-font-size-base) 0;
            height: calc(100vh - 140px);

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

                span {
                    margin-left: 10px;
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
        }
    }

    .right_content {
        width: 300px;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-left: var(--el-font-size-base);
        padding: var(--el-font-size-base);
        display: flex;
        flex-direction: column;

        .row_wrap {
            flex: 1;

            .top_info {
                background-color: var(--primary-color);
                padding: var(--el-font-size-base);
                color: #fff;
                border-radius: 6px;

                .flex {
                    display: flex;
                }

                .row {
                    display: flex;

                    &:not(:last-child) {
                        margin-bottom: 10px;
                    }

                    .fit_row {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        padding: 8px 10px;
                        border-radius: 4px;
                        justify-content: space-between;
                        color: var(--primary-color);
                        background-color: #fff;
                    }
                }
            }
        }

        .btn_wrap {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .btn {
                flex: 1;
            }
        }
    }
}
</style>