<template>
    <el-card shadow="never" class="!border-none">
        <el-form :model="formData" inline>
            <el-form-item label="订单编号">
                <el-input class="ls-input" v-model="formData.sn" placeholder="请输入订单编号" />
            </el-form-item>
            <el-form-item label="用户信息">
                <el-input class="ls-input" v-model="formData.userInfo" placeholder="请输入用户信息" />
            </el-form-item>
            <el-form-item label="服务名称">
                <el-input class="ls-input" v-model="formData.goodsName" placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="师傅信息">
                <el-input class="ls-input" v-model="formData.staffInfo" placeholder="请输入师傅信息" clearable />
            </el-form-item>
            <el-form-item label="支付状态">
                <el-select v-model="formData.payStatus" placeholder="请选择" class="ls-input">
                    <el-option v-for="option in optionMap.payStatusOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="派单状态">
                <el-select v-model="formData.isDispatch" placeholder="请选择" class="ls-input">
                    <el-option v-for="option in optionMap.dispatchOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
                <data-picker
                    class="ls-input"
                    style="width: 280px"
                    v-model:startTime="formData.orderTimeStart"
                    v-model:endTime="formData.orderTimeEnd"
                ></data-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetPage">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never" class="mt-4 !border-none">
        <el-tabs class="-mt-2" v-model="formData.orderStatus" @tab-change="resetPage">
            <el-tab-pane :label="`全部(${countData?.totalCount || '0'})`" name="" />
            <el-tab-pane :label="`待支付(${countData?.waitPayCount || '0'})`" :name="0" />
            <el-tab-pane :label="`预约中(${countData?.reserveCount || '0'})`" :name="1" />
            <el-tab-pane :label="`服务中(${countData?.servicingCount || '0'})`" :name="2" />
            <el-tab-pane :label="`已完成(${countData?.finishedCount || '0'})`" :name="3" />
            <el-tab-pane :label="`退款单(${countData?.closeCount || '0'})`" :name="4" />
        </el-tabs>
        <div class="mt-4">
            <el-table ref="tableData" size="large" :data="pager.lists" v-loading="pager.loading">
                <el-table-column property="sn" label="订单编号" min-width="200" />
                <el-table-column label="用户信息" min-width="120">
                    <template #default="scope">
                        <el-popover placement="top-start" width="200px" trigger="hover">
                            <div class="flex">
                                <span class="flex-none mr-2">头像：</span>
                                <el-image :src="scope.row.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
                            </div>
                            <div class="flex mt-2">
                                <span class="flex-none mr-2">昵称：</span>
                                <span>{{ scope.row.nickname }}</span>
                            </div>
                            <div class="flex mt-2">
                                <span class="flex-none mr-2">编号：</span>
                                <span>{{ scope.row.userSn }}</span>
                            </div>
                            <template #reference>
                                <router-link :to="`/user/userList/detail?id=${scope.row.userId}`">
                                    <div class="pointer normal text-primary">
                                        {{ scope.row.nickname }}
                                    </div>
                                </router-link>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="服务名称" min-width="260">
                    <template #default="{ row }">
                        <div class="flex items-center goods-box">
                            <div class="w-[60px] h-[60px]">
                                <el-image
                                    style="width: 60px; height: 60px"
                                    :src="row.goodsImage"
                                    :preview-src-list="[row.goodsImage]"
                                    :hide-on-click-modal="true"
                                    :preview-teleported="true"
                                    :fit="'contain'"
                                />
                            </div>
                            <router-link :to="`/service/lists/edit?id=${row.goodsId}`" class="ml-2 xs">
                                <div class="goods-name truncate w-44">{{ row.goodsName }}</div>
                                <div class="form-tips">{{ row.goodsPrice }} {{ row.unitName }}</div>
                            </router-link>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="实付金额" min-width="100">
                    <template #default="scope">¥{{ scope.row.orderAmount }}</template>
                </el-table-column>
                <el-table-column label="预约日期" min-width="160">
                    <template #default="scope">
                        {{ scope.row.appointTime }} {{ scope.row.weekDay }} {{ scope.row.appointTimeStartStr }}-{{ scope.row.appointTimeEndStr }}
                    </template>
                </el-table-column>
                <el-table-column property="contact" label="联系人" min-width="100" />
                <el-table-column property="staffName" label="服务师傅" min-width="100">
                    <template #default="{ row }">{{ parseEmpty(row, 'staffName') }}</template>
                </el-table-column>
                <el-table-column label="订单状态" min-width="100">
                    <template v-slot="{ row }">
                        <span
                            :class="{
                                error: setStatusColor(row.orderStatusName)
                            }"
                        >
                            {{ row.orderStatusName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="派单状态" width="100" prop="isDispatchName">
                    <template v-slot="{ row }">
                        <el-tag type="success" v-if="row.isDispatch === 1">已派单</el-tag>
                        <el-tag type="danger" v-if="row.isDispatch === 0">未派单</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="140" fixed="right">
                    <template #default="scope">
                        <router-link
                            class="mr-2"
                            :to="{
                                path: 'lists/detail',
                                query: {
                                    id: scope.row.id
                                }
                            }"
                        >
                            <el-link type="primary" :underline="false">详情</el-link>
                        </router-link>
                        <operation
                            btnStyle="text"
                            :id="scope.row.id"
                            :verificationCode="scope.row.verificationCode"
                            :cancelBtn="scope.row.cancelBtn"
                            :deleteBtn="scope.row.deleteBtn"
                            :verificationBtn="scope.row.verificationBtn"
                            :orderRemarks="scope.row.orderRemarks ?? ''"
                            @refresh="resetPage"
                            @cancelOrder="handleCancelOrder(scope.row, resetPage)"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-card>
</template>

<script lang="ts" setup name="orderList">
import { apiOrderLists, apiOrderStatis } from '@/api/order/lists'
import { reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { OrderMode } from '@/enums/modeEnum'
import Operation from './components/operation.vue'
import Pagination from '@/components/pagination/index.vue'
import DataPicker from '@/components/daterange-picker/index.vue'
import cancelOrderDialog from './components/cancelOrderDialog.vue'
import { usePaging } from '@/hooks/usePaging'
import { parseEmpty } from '@/utils/util'
import { optionMap } from '@/config/status'
import { useCancelOrderAction } from './hook'

interface formDataObj {
    sn: string //否	string	订单编号
    userInfo: string //否	string	用户信息
    goodsName: string //否	string	服务名称
    payStatus: string | number //否	int	支付状态;0-待支付;1-已支付;
    orderTimeStart: string //否	string	开始时间
    orderTimeEnd: string //否	string	结束时间
    orderStatus: string | number //否	int	订单状态;0-待支付;1-预约中;2-服务中;3-已完成;4-已取消
    staffInfo: string // 否 师傅信息
    isDispatch: string | number // 否 int 派单状态;0-委派单;1-已派单
}

const route = useRoute()
const orderMode: any = reactive<any>(OrderMode)
const formData = reactive<formDataObj>({
    sn: '',
    userInfo: '',
    goodsName: '',
    payStatus: '',
    orderTimeStart: '',
    orderTimeEnd: '',
    orderStatus: '',
    staffInfo: route.query.staffInfo ?? '',
    isDispatch: ''
})
const getOrderAmount = async () => {
    countData.value = await apiOrderStatis(formData)
}
const setStatusColor = computed(() => {
    return function (val: string) {
        return val === '待支付' || val === '已退款' || val === '退款中'
    }
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiOrderLists,
    params: formData,
    nextFetchFun: getOrderAmount
})

const countData = ref<any>({})

getLists()
getOrderAmount()

onMounted(initParams)

const { handleCancelOrder } = useCancelOrderAction(cancelOrderDialog)

/**设置路由传递过来的参数 */
function initParams() {
    if (Object.keys(route.query).length === 0) return
    formData.staffInfo = JSON.parse(route.query.staffInfo)
}
/**页面缓存 */
onActivated(() => {
    getLists()
})
</script>

<style lang="scss" scoped>
:deep() .el-tabs__content {
    padding: 0;
}

.ls-input {
    width: 280px;
}

.error {
    color: #db2828;
}

.goods-box {
    .goods-name {
        color: #333333;
    }
}

.goods-box:hover {
    .goods-name {
        color: #4a5dff;
        text-decoration: underline;
    }
}

a {
    text-decoration: none !important; //去掉原有链接文字下划线
}

.el-tabs__nav-wrap::after {
    height: 1px !important;
}
</style>
