<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.orderSn" placeholder="请输入订单编号" />
            </el-form-item>
            <el-form-item label="用户信息">
                <el-input class="ls-input" v-model="formData.userMobile" 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="师傅工号/师傅姓名" />
            </el-form-item>
            <el-form-item label="申请时间">
                <daterange-picker
                    class="w-[385px]"
                    type="datetimerange"
                    format="YYYY-MM-DD HH:mm:ss"
                    v-model:startTime="formData.createTimeStart"
                    v-model:endTime="formData.createTimeEnd"
                />
            </el-form-item>
            <el-form-item label="改派结果">
                <el-select v-model="formData.status" placeholder="请选择" class="ls-input">
                    <el-option
                        v-for="option in optionMap.reassignOptions"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="flex">
                    <el-button type="primary" @click="getLists">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never" class="mt-4 !border-none">
        <el-button type="primary" @click="handleNavigate">设置退单扣分规则</el-button>
        <div class="mt-3">
            <el-table :data="pager.lists" style="width: 100%" v-loading="pager.loading">
                <el-table-column property="sn" label="订单编号" min-width="110">
                    <template #default="scope">{{ scope.row.sn }}</template>
                </el-table-column>
                <el-table-column label="用户信息" min-width="200">
                    <template #default="scope">
                        <div class="flex items-center">
                            <el-image
                                style="width: 60px; height: 60px; border-radius: 50%"
                                :src="scope.row.avatar"
                                :preview-src-list="[scope.row.avatar]"
                                :hide-on-click-modal="true"
                                :preview-teleported="true"
                                :fit="'cover'"
                            />
                            <div class="ml-2">{{ scope.row.mobile ? scope.row.mobile : scope.row.nickname }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="goodsName" label="服务名称" min-width="220">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.goodsName" placement="top">
                            <div class="ml-2 truncate">{{ scope.row.goodsName }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column property="staffSn" label="师傅工号" min-width="110"></el-table-column>
                <el-table-column property="staffName" label="师傅姓名" min-width="110"></el-table-column>
                <el-table-column property="createTime" label="申请时间" min-width="110"></el-table-column>
                <el-table-column property="status" label="改派结果" min-width="110">
                    <template #default="{ row }">
                        <el-tag :type="parseTagType(row.status)">{{ StaffRefundEnumMap[row.status] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="148" fixed="right">
                    <template #default="{ row }">
                        <div class="flex">
                            <router-link
                                class="mr-2"
                                :to="{
                                    path: '/order/lists/detail',
                                    query: {
                                        id: row.orderId
                                    }
                                }"
                            >
                                <el-link type="primary" :underline="false">详情</el-link>
                            </router-link>
                        </div>
                    </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="masterList">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { StaffRefundEnum, StaffRefundEnumMap, tagFields } from '@/enums/modeEnum'
import { optionMap } from '@/config/status'
import { apiStaffCancelOrderList } from '@/api/master_worker'

const router = useRouter()

const formData = ref<any>({
    orderSn: '',
    userMobile: '',
    staffInfo: '',
    status: '',
    createTimeStart: '',
    createTimeEnd: '',
    goodsName: ''
})
const parseTagType = computed(() => (status: StaffRefundEnum) => tagFields[status])

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiStaffCancelOrderList,
    params: formData.value
})

getLists()

/**地址跳转 */
const handleNavigate = () => {
    router.push('/master_worker/cancelOrderRule')
}
</script>

<style lang="scss" scoped>
.ls-input {
    width: 280px;
}

.method {
    cursor: pointer;
}

:deep(.custom-btn) {
    flex: 1;
    overflow: hidden;
    margin-left: 10px;

    &.el-button:hover {
        color: #4a5dff;
        background-color: transparent;
    }

    span {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
}

.strong {
    color: var(--color-red);
}
</style>
