<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-11-14 10:05:26
 * @FilePath: \housekeeping-uniapp\src\pages\order\components\order-list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <z-paging
        auto-show-back-to-top
        ref="paging"
        v-model="dataList"
        @query="queryList"
        :fixed="false"
        height="100%"
    >
        <block v-for="(item, index) in dataList" :key="index">
            <order-card :orderInfo="item" @refresh="refresh">
                <!-- 客户订单处，当前后台并没有发来师傅的手机号，只能进去详细处查看,故不传入:mobile, 只能到订单详情中，联系师傅 -->
                <order-footer
                    :orderId="item?.id"
                    :orderSn="item.sn"
                    :orderStatus="item.orderStatus"
                    :cancel="item.cancelBtn"
                    :contract="item.customerServiceBtn"
                    :evaluate="item.commentBtn"
                    :pay="item.payBtn"
                    :del="item?.delBtn"
                    :type="2"
                    :order_amount="item.orderAmount"
                    :isDispatch="item.isDispatch"
                    :staffMobile="item.staffMobile"
                    :goodsId="item?.orderGoodsDetailVo?.goodsId"
                    @refresh="queryList"
                    @contact="handleContact"
                />
            </order-card>
        </block>
    </z-paging>
    <ContactModal ref="contact" />
</template>

<script lang="ts" setup>
import { ref, shallowRef, watch } from 'vue'
import orderCard from './order-card.vue'
import orderFooter from '@/components/order-footer/index.vue'
import { apiOrderLists } from '@/api/order'
import ContactModal from '@/components/widgets/my-service/components/customer-service.vue'

const props = withDefaults(
    defineProps<{
        orderStatus: string | number
        refresh: boolean
    }>(),
    {
        orderStatus: '',
        refresh: false
    }
)

const paging = shallowRef<any>(null)
const dataList = ref<any>([])
const contact = ref()

watch(
    () => props.refresh,
    val => {
        val && paging.value?.reload()
    }
)

const queryList = async (pageNo = 1, pageSize = 10) => {
    try {
        const { lists } = await apiOrderLists({
            orderStatus: props.orderStatus,
            pageNo,
            pageSize
        })
        if (paging.value) {
            paging.value.complete(lists)
        } else {
            queryList()
        }
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}
const getStatueName = orderInfo => {
    // 1:预约中且已派单，还是显示已派单更好
    if (orderInfo.orderStatus == 1 && orderInfo.isDispatch == 1) {
        return '已预约'
    }

    return orderInfo.orderStatusName
}
const refresh = () => {
    paging.value?.reload()
}
/**联系客服 */
const handleContact = () => {
    contact.value.open()
}
</script>

<style scoped></style>
