<template>
    <!-- Header Start -->
    <el-card class="!border-none mt-4" shadow="never">
        <el-page-header content="订单详情" @back="$router.back()" />
    </el-card>
    <!-- Header End -->

    <div class="order-detail-main">
        <!-- 订单信息 Start -->
        <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
            <template #header>
                <div class="card-header">
                    <span class="font-medium nr">订单信息</span>
                </div>
            </template>
            <!-- 订单信息 -->
            <el-form :inline="true" :model="formData" label-width="auto">
                <el-form-item label="订单状态: ">
                    <div class="content text-warning">{{ formData.orderStatusName || '-' }}</div>
                </el-form-item>
                <el-form-item label="支付状态: ">
                    <div class="content">{{ formData.payStatusName || '-' }}</div>
                </el-form-item>
                <el-form-item label="订单编号: ">
                    <div class="content">{{ formData.sn || '-' }}</div>
                </el-form-item>
                <el-form-item label="支付方式: ">
                    <div class="content">{{ formData.payWayName || '-' }}</div>
                </el-form-item>
                <el-form-item label="下单时间: ">
                    <div class="content">{{ formData.createTime || '-' }}</div>
                </el-form-item>
                <el-form-item label="支付时间: ">
                    <div class="content">{{ formData.payTime || '-' }}</div>
                </el-form-item>
                <el-form-item label="用户昵称: ">
                    <div class="content">{{ formData.nickname || '-' }}</div>
                </el-form-item>
                <el-form-item label="用户备注: ">
                    <div class="content">{{ formData.userRemark || '-' }}</div>
                </el-form-item>
                <el-form-item label="核销码: ">
                    <div class="content">{{ formData.verificationCode || '-' }}</div>
                </el-form-item>
                <el-form-item label="核销状态: ">
                    <div class="content">
                        <span class="warning" v-if="formData.verificationStatusName">{{
                            formData.verificationStatusName
                        }}</span>
                        <span v-else>-</span>
                    </div>
                </el-form-item>
                <el-form-item label="完成时间: ">
                    <div class="content break-words">{{ formData.finishTime || '-' }}</div>
                </el-form-item>
                <el-form-item label="商家备注: ">
                    <div class="w-[300px] break-words">{{ formData.orderRemarks || '-' }}</div>
                </el-form-item>
            </el-form>
            <!-- Button Group Start -->
            <div class="button-group">
                <operation
                    btnStyle="primary"
                    :id="id"
                    :cancelBtn="formData.cancelBtn"
                    :verificationBtn="formData.verificationBtn"
                    :verificationStatus="formData.verificationStatus"
                    :verificationCode="formData.verificationCode"
                    :orderRemarks="formData.orderRemarks"
                    @refresh="getOrderDetail"
                />
            </div>
            <!-- Button Group End -->
        </el-card>
        <!-- 订单信息 End -->

        <!-- 服务师傅 Start -->
        <el-card
            class="!border-none mt-4"
            shadow="never"
            style="padding: 0 20px"
            v-if="formData.orderStatus !== 0"
        >
            <template #header>
                <span class="font-medium nr">服务师傅</span>
            </template>
            <!-- 服务师傅 -->
            <el-form :inline="true" :model="formData" label-width="auto">
                <el-form-item label="服务师傅">
                    <div v-if="formData.orderStatus == 1">
                        <div v-if="!formData.staffId && btnStatus == 0">
                            <el-button
                                v-perms="['order:dispatch']"
                                type="primary"
                                @click="handleDispatch"
                                >指派师傅</el-button
                            >
                        </div>

                        <div v-if="btnStatus == 1" class="flex items-center">
                            <!-- 选择地区列表 -->
                            <el-cascader
                                :options="options"
                                :props="props2"
                                @change="handleSelect"
                            />
                            <!-- 选择师傅列表 -->
                            <el-select
                                v-model="selStaff"
                                class="mx-2"
                                value-key="id"
                                @change="handleChange"
                            >
                                <el-option
                                    v-for="item in staffData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item"
                                >
                                    <div class="flex items-center">
                                        <el-image
                                            style="width: 30px; height: 30px; border-radius: 50%"
                                            :src="item.avatarUrl"
                                            :fit="'cover'"
                                        />
                                        <div class="mx-2">
                                            {{ item.name }}
                                        </div>
                                    </div>
                                </el-option>
                            </el-select>
                            <el-button @click="handleCancel">取消</el-button>
                            <el-button type="primary" @click="handleConfirm">确认指派</el-button>
                        </div>

                        <div v-if="btnStatus == 2" class="flex items-center">
                            <div class="flex items-center">
                                <el-image
                                    style="width: 44px; height: 44px; border-radius: 50%"
                                    :src="formData.staffImage"
                                    :fit="'cover'"
                                />
                                <div class="mx-2">
                                    {{ formData.staffName }}
                                </div>
                            </div>

                            <el-button type="primary" @click="handleReDispatch">重新指派</el-button>
                        </div>
                    </div>
                    <div
                        v-if="formData.staffId && formData.orderStatus !== 1"
                        class="flex items-center"
                    >
                        <div class="flex items-center">
                            <el-image
                                style="width: 44px; height: 44px; border-radius: 50%"
                                :src="formData.staffImage"
                                :fit="'cover'"
                            ></el-image>
                            <div class="mx-2">
                                {{ formData.staffName }}
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 服务师傅 End -->

        <!-- 预约信息 Start -->
        <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
            <template #header>
                <span class="font-medium nr">预约信息</span>
            </template>
            <!-- 预约信息 -->
            <el-form :inline="true" :model="formData" label-width="auto">
                <el-form-item label="预约时间: ">
                    <div class="content">
                        {{ formData.appointTime }} {{ formData.weekDay }}
                        {{ formData.appointTimeStartStr }}-{{ formData.appointTimeEndStr }}
                    </div>
                </el-form-item>
                <el-form-item label="联系人: ">
                    <div class="content">{{ formData.contact || '-' }}</div>
                </el-form-item>
                <el-form-item label="手机号码: ">
                    <div class="content">{{ formData.mobile || '-' }}</div>
                </el-form-item>
                <el-form-item label="预约地址: ">
                    <div class="content">
                        {{
                            formData.province +
                                formData.city +
                                formData.district +
                                formData.address || '-'
                        }}
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 预约信息 End -->

        <!-- 服务信息 Start -->
        <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
            <template #header>
                <span class="font-medium nr">服务信息</span>
            </template>
            <!-- 服务信息 -->
            <el-table ref="tableDataRef" :data="goodsData" style="width: 100%">
                <el-table-column label="服务名称" width="400">
                    <template #default="scope">
                        <div class="flex items-center">
                            <el-image
                                style="width: 58px; height: 58px"
                                :src="scope.row.goodsImage"
                                :fit="'cover'"
                            ></el-image>
                            <div class="justify-center ml-2">{{ scope.row.goodsName }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="goodsPrice" label="价格" width="300" />
                <el-table-column property="unitName" label="单位" width="300" />
                <el-table-column property="goodsNum" label="数量" width="300" />
                <el-table-column
                    property="totalPayPrice"
                    label="实付金额"
                    width="120"
                    fixed="right"
                />
            </el-table>
        </el-card>
        <!-- 服务信息 End -->

        <!-- 订单日志 Start -->
        <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
            <template #header>
                <span class="font-medium nr">订单日志</span>
            </template>
            <!-- 订单日志 -->
            <el-table ref="tableDataRef" :data="formData.orderLogList" style="width: 100%">
                <el-table-column property="operatorName" label="操作人" max-width="300" />
                <el-table-column property="content" label="操作事件" max-width="300" />
                <el-table-column property="operateTime" label="操作时间" max-width="300" />
            </el-table>
        </el-card>
        <!-- 订单日志 End -->
    </div>
</template>

<script lang="ts" setup>
import { apiOrderDetail, apiMasterLists, apiDispatchStaff } from '@/api/order/lists'
import { ref } from 'vue'
import Operation from './components/operation.vue'
import area from '@/utils/area'
import feedback from '@/utils/feedback'

const route = useRoute()
const id = ref<any>(route.query.id)

const formData = ref<any>({})
const staffData = ref<any>([])
const selStaff = ref('') // 当前选中的师傅
const region = ref<any>(null) // 当前选中地区
const btnStatus = ref(0) // 0-显示指派 1-显示确认和取消 2-显示重新指派
const staff = ref<any>({})
const options = ref<any>(area) // 地区列表
const props2 = {
    checkStrictly: true
}
const goodsData = ref<any>([
    {
        goodsId: '',
        goodsImage: '',
        goodsName: '',
        goodsNum: 0,
        goodsPrice: '',
        unitName: '',
        totalPayPrice: ''
    }
])

// 获取订单详情
const getOrderDetail = async (val?: string): Promise<void> => {
    const res = await apiOrderDetail({ id: id.value })
    formData.value = res
    if (formData.value.staffId && formData.value.orderStatus == 1) {
        btnStatus.value = 2
    }
    for (const k in goodsData.value[0]) {
        goodsData.value[0][k] = formData.value[k]
    }
    if (val === '') formData.value.orderRemarks = val
}

// 记录所选中的数据对象
const handleChange = (val: any) => {
    staff.value = val
    return val
}

// 选中不同地区的师傅列表
const handleSelect = async (val: number[]) => {
    // 记录所选地区
    region.value = val[val.length - 1]
    const params = {
        provinceId: val[0],
        cityId: val[1],
        districtId: val[2]
    }
    const { lists } = await apiMasterLists({ ...params })
    staffData.value = lists
}

// 指派师傅
const handleDispatch = async () => {
    getOrderDetail()
    btnStatus.value = 1
}

// 确认指派
const handleConfirm = async () => {
    if (!region.value) {
        feedback.msgError('请选择地区')
        return
    } else if (!selStaff.value) {
        feedback.msgError('请选择师傅')
        return
    }
    await apiDispatchStaff({ id: formData.value.id, staffId: staff.value.id })
    feedback.msgSuccess('操作成功')
    btnStatus.value = 2
    selStaff.value = ''
    getOrderDetail()
}

// 重新指派
const handleReDispatch = () => {
    btnStatus.value = 1
    selStaff.value = ''
}

// 取消指派
const handleCancel = () => {
    btnStatus.value = 2
    selStaff.value = ''
    getOrderDetail()
}

if (id.value) getOrderDetail()
onMounted(async () => {
    setTimeout(() => {
        /*if (formData.value.staffId && formData.value.orderStatus == 1) {
            btnStatus.value = 2
        }*/
    }, 200)
})
</script>

<style lang="scss">
.order-detail-main .el-card__header,
.order-detail-main .el-card__body {
    padding: calc(var(--el-card-padding) - 2px) 0;
}
.content {
    width: 24vw;
}
.button-group {
    border-top: 1px solid #f2f2f2;
}
</style>
