<template>
    <el-dialog title="选择用户" top="3vh" v-model="showDialog" width="80%">
        <el-form inline>
            <el-form-item>
                <el-input placeholder="请输入手机号搜索用户" v-model="tableData.phone" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="tableData.isVips" placeholder="是否为会员" style="width: 150px;" @change="changeIsVips">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="是" :value="1"></el-option>
                    <el-option label="否" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getMemberList">搜索</el-button>
                <el-button @click="resetTable">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData.list" height="400px" border stripe v-loading="tableData.loading">
            <el-table-column prop="nickName" label="昵称" width="200px">
                <template #default="scope">
                    <div class="center">
                        <el-avatar :src="scope.row.headImg" :size="20"></el-avatar>
                        <span>{{ scope.row.nickName }}</span>
                        <el-tag type="success" size="small" disable-transitions v-if="scope.row.new">新</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机" width="150px" />
            <!-- <el-table-column prop="code" label="编号" width="150px" /> -->
            <el-table-column prop="level" label="等级">
                <template #default="scope">
                    <span v-if="scope.row.isVip">
                        <span v-if="scope.row.memberLevelName">
                            {{ scope.row.memberLevelName }}
                        </span>
                        <span v-else>是</span>
                    </span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column prop="pointBalance" label="积分" />
            <el-table-column prop="amount" label="余额" width="120px">
                <template v-slot="scope">
                    ￥{{ formatDecimal(scope.row.amount) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120px" fixed="right">
                <template v-slot="scope">
                    <el-button type="primary" @click="toHomeMember(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next, total" background style="margin-top: 20px;"
            :total="Number(tableData.total)" v-model:current-page="tableData.page" @current-change="getMemberList" />
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { shopUserList } from "@/api/account.js";
import { formatDecimal } from '@/utils/index.js'

const props = defineProps({
    amount: {
        type: Number,
        default: 0
    }
})

const emits = defineEmits(['success'])
const showDialog = ref(false)
const tableData = reactive({
    phone: '',
    isVips: "",
    loading: false,
    list: [],
    page: 1,
    size: 10,
    total: 0
})

// 选择会员去下单
async function toHomeMember(row) {
    try {
        emits('success', { ...row })
    } catch (error) {
        console.log(error);
    }
    showDialog.value = false
}

// 重置表格
function resetTable() {
    tableData.phone = ''
    tableData.isVips = ''
    tableData.page = 1
    getMemberList()
}

function changeIsVips() {
    tableData.page = 1
    getMemberList()
}

// 获取会员列表
async function getMemberList() {
    try {
        tableData.loading = true
        const res = await shopUserList({
            key: tableData.phone,
            isVips: tableData.isVips,
            page: tableData.page,
            size: tableData.size,
            amount: props.amount
        })
        tableData.list = res.records
        tableData.total = res.totalRow
    } catch (error) {
        console.log(error);
    }
    setTimeout(() => {
        tableData.loading = false
    }, 500);
}

// 显示选择会员弹窗
function show() {
    showDialog.value = true
    getMemberList()
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.center {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>