<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import {
    userListsApi
} from "@/api/user.js";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import mitt from "@/utils/mitt.js";
import moment from "moment";

const userStore = useUserStore();
const dialogVisible = ref(false);

const where = ref({
    page_no: 1,
    page_size: 20,
    mobile: "",
});

const emit = defineEmits(['setUser'])
const loading = ref(false);
const total = ref(0);

const loadEnd = ref(false);
const orderList = ref([]);
const getOrderList = (reload = false) => {
    if (reload) where.value.page_no = 1;
    else if (loadEnd.value || loading.value) return;
    loading.value = true;
    userListsApi(where.value)
        .then((res) => {
            if (reload) orderList.value = res.data.lists;
            else orderList.value = [...orderList.value, ...res.data.lists];
            if (res.data.lists.length < where.value.page_size) loadEnd.value = true;
            else where.value.page_no++;
            total.value = res.data.count;
            loading.value = false;
        })
        .catch((err) => {
            loadEnd.value = true;
            loading.value = false;
        });
};

const setForm = (item, index) => {
    emit("setUser", item);
    dialogVisible.value = false;
};

const open = (uid=null) => {
    if(!uid) where.value.mobile = "";
    dialogVisible.value = true;
    getOrderList(true);
};

defineExpose({
    open
})


</script>

<template>
    <el-dialog v-model="dialogVisible" title="选择用户" width="800">
        <div class="check-user-list">
            <div class="header-input">
                <el-input v-model="where.mobile" placeholder="搜索手机号/ID" @keydown.enter="getOrderList(true)"
                    @clear="getOrderList(true)" clearable>
                    <template #append>
                        <el-button type="primary" style="
                            background-color: #1890ff;
                            color: #fff;
                            border-radius: 0 0.315rem 0.315rem 0;
                            " @click="getOrderList(true)">搜索</el-button>
                    </template>
                </el-input>
            </div>
            <div class="order-lists" v-loading="loading" v-infinite-scroll="getOrderList"
                :infinite-scroll-distance="300" :infinite-scroll-delay="500" style="overflow: auto">
                <div class="item" v-for="(item, index) in orderList" :key="index" @click="setForm(item, index)">
                    <el-avatar class="avatar" :src="item.avatar" />
                    <div style="display: flex; flex-direction: column; justify-content: space-around;flex:1;">
                        <div class="top">
                            <div>
                                <span class="bold">{{ item.nickname }}</span><span>{{ ' (ID:' + item.id
                                + ')' }}</span>
                            </div>
                            <div class="flex-between">
                                <div class="mr-2">手机号: {{ item.mobile || item.account }}</div>
                                <el-tag type="primary" v-if="item.user_ship != 1">{{ item.user_ship_name }}</el-tag>
                                <el-tag type="success" v-else>{{ item.user_ship_name }}</el-tag>
                            </div>
                        </div>
                        <div class="bottom flex" style="justify-content: space-between;">
                            <div>采购款: <span class="red">{{ item.purchase_funds }}</span></div>
                            <div>礼品券: <span class="red">{{ item.get_frozen }}</span></div>
                        </div>
                    </div>
                </div>
                <div v-if="loadEnd" class="load-end">没有更多了</div>
                <div v-if="loading" class="load-end">加载中...</div>
            </div>
        </div>
    </el-dialog>

</template>

<style scoped lang="scss">
.check-user-list {
    border-radius: 1.2rem;
    height: 70vh;
    background-color: #fff;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .header-nav {
        display: flex;
        justify-content: space-between;
        padding: 1rem;

        span {
            color: #ff4a00;
        }

        .nav-item {
            font-weight: bold;
        }

    }

    .header-input {
        padding: 1rem;
        padding-top: 0;
        border-bottom: 1px solid #eee;
    }

    .order-lists {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .item {
            width: 45%;
            height: 6rem;
            border-radius: 0.5rem;
            cursor: pointer;
            box-sizing: border-box;
            padding: 1rem;
            margin: 0.5rem;
            background-color: #F5F5F5;
            display: flex;

            .avatar {
                height: 4rem;
                width: 4rem;
                border-radius: 50%;
                margin-right: 1rem;
                flex-shrink: 0;
            }

            .flex-between{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .flex {
                display: flex;
                flex-wrap: wrap;
            }

            .bold {
                font-weight: bold;
            }

            .r-1 {
                margin-right: 1rem;
            }

            .bottom {
                &>div{
                    flex: 1;
                }
            }

            .red {
                color: #ff4a00;
            }

        }

        .item-active {
            background-color: #efefef;
        }
    }

    .load-end {
        text-align: center;
        padding: 1rem;
        color: #333;
        font-size: 0.8rem;
        width: 100%;
        height: 100%;
    }
}
</style>
