<script setup>
import { ref, watch } from "vue";
import {
    saleOrderListApi,
    cashierinfoDetailsApi,
    cashierinfoWriteoffListApi,
    orderStatusApi,
    orderLadingApi,
    cartListApi,
} from "@/api/store.js";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import mitt from "@/utils/mitt.js";

const userStore = useUserStore();

const list = ref([]);

const payRef = ref(null);

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

const where = ref({
    verify_code: '',
    page_no: 1,
    page_size: 15
});



const loading = ref(false);
const total = ref(0);
const activeStore = ref(0);

const loadEnd = ref(false);
const orderList = ref([]);
const getOrderList = (reload = false) => {
    // return console.log('加载');
    if(loading.value) return;
    loading.value = true;
    if (where.value.verify_code) {
        where.value.verify_code = where.value.verify_code.replace('—', '-');
        where.value.verify_code = where.value.verify_code.replace(/\uFF0D/, '-');
        where.value.verify_code = where.value.verify_code.replace(' ', '');

        cashierinfoDetailsApi({
            verify_code: where.value.verify_code
        })
            .then((res) => {
                orderList.value = [res.data];
                activeStore.value = 0;
                mitt.emit("set-sale-order-detail", orderList.value[0]);
                total.value = res.data.count;
                loading.value = false;
                if (orderList.value[0].is_writeoff) {
                    ElMessage.warning('订单已核销过')
                }
            })
            .catch((err) => {
                loading.value = false;
            });
    } else {
        cashierinfoWriteoffListApi(where.value)
            .then((res) => {
                orderList.value = [...orderList.value, ...res.data.lists];
                if(where.value.page_no == 1) {
                    mitt.emit("set-sale-order-detail", orderList.value[0]);
                }
                total.value = res.data.count;
                where.value.page_no++;
                loading.value = false;
            })
            .catch((err) => {
                loading.value = false;
            });

    }

};

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

const setCode = (code) => {
    where.value.verify_code = code;
    activeStore.value = 0;
    where.value.page_no = 1;
    getOrderList(true);
}

const emit = defineEmits(["backOne"]);

const backOne = () => {
    mitt.emit("set-sale-order-detail", {});
    orderList.value = [];
    emit("backOne");
}

defineExpose({
    setCode,
})
</script>

<template>
    <div class="my-order">
        <div class="header-nav">
            <div class="nav-item">{{ type == 2 ? '核销订单' : '核销记录' }}</div>
            <div class="nav-item-clear">
                <el-button type="primary" size="small" @click="backOne">返回上一页</el-button>
            </div>
        </div>
        <div class="header-input">
            <el-input v-model="where.verify_code" placeholder="请输入核销码" @keydown.enter="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" :infinite-scroll-immediate="false" style="overflow: auto">
            <div class="item" :class="{ 'item-active': activeStore == index }" v-for="(item, index) in orderList"
                :key="index" @click="setForm(item, index)">
                <div class="top">
                    <div class="sn" :class="'cahier'">单号: {{ item.order_id }}</div>
                    <div class="create-time">{{ item.pay_time }}</div>
                </div>
                <div class="shop">
                    <div class="left" v-if="item.product">
                        <el-image v-for="(shop, imgkey) in item.product.slice(0, 5)" :key="imgkey"
                            :src="shop.cart_info.image" class="shop-img"></el-image>
                        <div v-if="item.product.length == 1" class="shop-name">
                            {{ item.product[0].store_name }}
                        </div>
                    </div>
                    <div class="right">
                        <div class="money">¥{{ item.pay_price }}</div>
                        <div class="count">共{{ item.total_num }}款商品</div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="pay">
                        <div v-if="item.paid">
                            {{ item.paid_name }}
                            <spna v-if="item.pay_type_name">({{ item.pay_type_name }})</spna>
                            <span v-else-if="item.pay_type == 9">(微信收款)</span>
                            <span v-else-if="item.pay_type == 17">(现金支付)</span>
                            <span v-else-if="item.pay_type == 13">(支付宝收款)</span>
                            <span v-else-if="item.pay_type == 3">(余额支付)</span>
                            <span v-else-if="item.pay_type == 1">(微信支付)</span>
                        </div>
                        <div v-else style="color: #ff4a00">{{ item.paid_name }}</div>
                    </div>
                    <!-- <div class="cashier" v-if="item.service_info">
                        收银员: {{ item.service_info.nickname }}
                    </div> -->
                    <div class="cashier" v-if="item.is_writeoff == 0">核销码：{{ item.verify_code }}</div>
                    <div class="cashier" v-else style="color: #ff4a00">已核销：{{ item.verify_code }}</div>
                </div>
            </div>
            <div v-if="loadEnd" class="load-end">没有更多了</div>
            <div v-if="loading" class="load-end">加载中...</div>
        </div>
    </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;
        height: 1.5rem;

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

        span {
            color: #ff4a00;
        }

        .nav-item-clear {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            cursor: pointer;
        }
    }

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

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

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

            .top {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .sn {
                    font-weight: bold;
                    font-size: 0.9rem;
                }

                .cahier {
                    &::before {
                        content: "收银";
                        font-weight: 400;
                        font-size: 0.7rem;
                        padding: 0.1rem 0.1rem;
                        margin-right: 0.2rem;
                        border: 1px solid #2ec479;
                        color: #2ec479;
                        border-radius: 0.187rem;
                    }
                }

                .cahier2 {
                    &::before {
                        content: "平台";
                        font-weight: 400;
                        font-size: 0.7rem;
                        padding: 0.1rem 0.1rem;
                        margin-right: 0.2rem;
                        border: 1px solid #ff4a00;
                        color: #ff4a00;
                        border-radius: 0.187rem;
                    }
                }

                .create-time {
                    font-size: 0.8rem;
                }
            }

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

                .right {
                    flex-shrink: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .money {
                        font-size: 1rem;
                        color: #ff4a00;
                        font-weight: bold;
                    }

                    .count {
                        font-size: 0.7rem;
                        color: #999;
                    }
                }

                .left {
                    height: 4.5rem;
                    display: flex;
                    align-items: center;

                    .shop-img {
                        width: 3.5rem;
                        height: 3.5rem;
                        border-radius: 0.3rem;
                        margin-right: 0.4rem;
                    }

                    .shop-name {
                        font-size: 0.9rem;
                        color: #333;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        /* 将文本限制为三行 */
                        -webkit-line-clamp: 3;
                    }
                }
            }

            .bottom {
                display: flex;
                justify-content: space-between;
                font-size: 0.9rem;
                color: #777;

                .manage-btn {
                    color: #fff;
                    background-color: #e6a23c;
                    border-radius: 0.2rem;
                    padding: 0 0.2rem;
                    margin-left: 0.5rem;
                }
            }
        }

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


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