<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import {
    userListsApi,
    userShipApi
} 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";
import add from './add.vue';

const userStore = useUserStore();
const props = defineProps({
    isSystem: {
        type: Boolean,
        default: false,
    },
    source: {
        type: Number,
        default: 1,
    },
});

const lists = ref([]);

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

const loading = ref(false);
const total = ref(0);
const activeStore = 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;
    if(where.value.mobile == '' && where.value.user_ship == ''){
        where.value.store_id = userStore.userInfo.store_id;
    } else where.value.store_id = null;
    userListsApi(where.value)
        .then((res) => {
            if (reload) orderList.value = res.data.lists;
            else orderList.value = [...orderList.value, ...res.data.lists];
            if (where.value.page_no == 1 && orderList.value.length > 0) mitt.emit("set-user-detail", orderList.value[0]);
            if (res.data.lists.length < where.value.page_size) loadEnd.value = true;
            else where.value.page_no++;
            activeStore.value = 0;
            total.value = res.data.count;
            loading.value = false;
        })
        .catch((err) => {
            loadEnd.value = true;
            loading.value = false;
        });
};

const setForm = (item, index) => {
    activeStore.value = index;
    mitt.emit("set-user-detail", item);
};

const dialogVisible = ref(false);
const addRef = ref(null);
const addUser = () => {
    addRef.value?.addUser();
}

const addSuccess = () => {
    dialogVisible.value = false;
    getOrderList(true);
}

const userShip = ref([])
const getUserShip = () => {
    userShipApi().then(res => {
        userShip.value = res.data.lists;
    })
}
getUserShip()

const resetWhere = ()=>{
    where.value.mobile = "";
    where.value.user_ship = "";
    getOrderList(true);
}

onMounted(() => {
    mitt.on('re-load-user-list', (e) => {
        if(e) getOrderList(true);
    })
})
onUnmounted(() => {
    mitt.off('re-load-user-list');
})
</script>

<template>
    <div class="my-order">
        <div class="header-nav">
            <div class="nav-item">
                {{ "用户列表" }}
            </div>
            <el-button type="primary" @click="dialogVisible = true"><el-icon>
                    <Plus />
                </el-icon> 添加用户</el-button>
        </div>
        <div class="header-row">
            <div class="label">用户类型</div>
            <el-select v-model="where.user_ship" @change="getOrderList(true)" placeholder="请选择用户类型" style="flex: 1">
                <el-option v-for="item in userShip" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
            <el-button @click="resetWhere" style="margin-left: 1rem;">重置</el-button>
        </div>
        <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" :class="{ 'item-active': activeStore == index }" 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 flex">
                        <div class="r-1"><span class="bold">{{ item.nickname }}</span><span>{{ ' (ID:' + item.id
                                +')'}}</span>
                        </div>
                        <div>手机号: {{ item.mobile }}</div>
                    </div>
                    <div class="bottom flex" style="justify-content: space-between;">
                        <!-- <div class="r-1">积分: <span class="red">55</span></div> -->
                        <div>余额: <span class="red">{{ item.now_money }}</span></div>
                        <div>采购款: <span class="red">{{ item.purchase_funds }}</span></div>
                        <div>返还金: <span class="red">{{ item.return_money?.toFixed(2) }}</span></div>
                        <div>礼品券: <span class="red">{{ item.get_frozen?.toFixed(2) }}</span></div>
                        <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>
            </div>
            <div v-if="loadEnd" class="load-end">没有更多了</div>
            <div v-if="loading" class="load-end">加载中...</div>
        </div>
        <el-dialog v-model="dialogVisible" title="添加用户" width="600">
            <add ref="addRef" @close="addSuccess"></add>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.my-order {
    border-radius: 1.2rem;
    height: 100%;
    background-color: #fff;
    width: 30rem;
    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-row{
        display: flex;
        padding: 0 1rem 1rem 1rem;
        align-items: center;
        .label{
            flex-shrink: 0;
            margin-right: 1rem;
            font-size: 0.9rem;
        }
    }

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

    .order-lists {
        flex: 1;
        overflow-y: auto;

        .item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            display: flex;

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

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

            .bold {
                font-weight: bold;
            }

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

            .bottom>div {
                margin-left: 0.5rem;
            }

            .red {
                color: #ff4a00;
            }

        }

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

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