{extend name="PatientAPP/layout" /}

{block name="css"}
<link rel="stylesheet" href="/PatientAPP/Order/order.css" />
{/block}

{block name="app"}
<div id="app" v-cloak>
    <!-- 头部区域 -->
    <div class="header-section">
        <div class="header-top">
            <div class="page-title">我的订单</div>
            <div class="header-actions">
                <div class="icon-btn" @click="onSearch">
                    <van-icon name="search" size="17" />
                </div>
            </div>
        </div>

        <!-- Tab标签栏 -->
        <van-tabs v-model:active="activeTab" swipeable sticky :offset-top="0" color="#fff" line-width="20" line-height="3">
            <van-tab title="全部" name="all"></van-tab>
            <van-tab title="待接单" name="pending"></van-tab>
            <van-tab title="进行中" name="ongoing"></van-tab>
            <van-tab title="已完成" name="completed"></van-tab>
            <van-tab title="已取消" name="cancelled"></van-tab>
        </van-tabs>
    </div>

    <!-- 订单列表 -->
    <div class="order-list-wrapper">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="order-card" v-for="(order, index) in filteredOrders" :key="order.id" @click="viewOrder(order)">
                    <!-- 卡片头部：状态 + 订单号 + 时间 -->
                    <div class="oc-top">
                        <div class="oc-top-left">
                            <span class="oc-status-dot" :class="'dot-' + order.status"></span>
                            <span class="oc-status-text" :class="'text-' + order.status">{{ order.statusText }}</span>
                            <span class="oc-no">{{ order.orderNo }}</span>
                        </div>
                        <span class="oc-time">{{ order.createTime }}</span>
                    </div>

                    <!-- 核心信息区 -->
                    <div class="oc-main">
                        <!-- 左侧服务类型图标 -->
                        <div class="oc-service-icon" :class="'icon-' + order.status">
                            <van-icon :name="serviceIcon(order.serviceType)" size="24" />
                        </div>
                        <!-- 右侧详情 -->
                        <div class="oc-detail">
                            <div class="oc-title-row">
                                <span class="oc-service-type">{{ order.serviceType }}</span>
                                <van-tag v-if="order.status === 'ongoing'" type="primary" size="medium" round>服务中</van-tag>
                                <van-tag v-if="order.status === 'pending'" color="#fef4ec" text-color="#e08c28" size="medium" round>等待接单</van-tag>
                            </div>
                            <div class="oc-meta-row">
                                <div class="oc-meta-item">
                                    <van-icon name="clock-o" size="14" />
                                    <span>{{ order.serviceTime }}</span>
                                </div>
                            </div>
                               <div class="oc-meta-row">
                                
                            </div>
                            <div class="oc-meta-row">
                                <div class="oc-meta-item">
                                    <van-icon name="location-o" size="14" />
                                    <span class="oc-location">{{ order.location }}</span>
                                </div>
                            </div>
                            <!-- 护工信息条 -->
                            <div class="oc-nurse-bar" v-if="order.nurseName" @click.stop="togglePhone(order)">
                                <div class="nurse-avatar-sm">
                                    <van-icon name="contact" size="14" />
                                </div>
                                <span class="nurse-name-sm">{{ order.nurseName }}</span>
                                <span class="nurse-exp-sm">· {{ order.nurseExp }}年经验</span>
                                <span class="nurse-phone-sm">
                                    {{ order.showPhone ? order.nursePhone : order.nursePhoneHidden }}
                                    <van-icon :name="order.showPhone ? 'eye-o' : 'closed-eye'" size="12" style="margin-left:4px;vertical-align:middle;" />
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- 备注预览 -->
                    <div class="oc-remark" v-if="order.remark">
                        <!-- <van-icon name="chat-o" size="13" /> -->
                        <span style="color: #cc6600;font-weight: 600;">订单备注：</span>
                        <span>{{ order.remark }}</span>
                    </div>

                    <!-- 底部操作栏 -->
                    <div class="oc-bottom">
                        <div class="oc-price-block">
                            <span class="oc-price-label">实付金额</span>
                            <div class="oc-price-value">
                                <span class="oc-yen">&yen;</span>
                                <span class="oc-amount">{{ order.totalAmount }}</span>
                            </div>
                        </div>
                        <div class="oc-actions">
                            <van-button
                                v-if="order.status === 'pending'"
                                size="small"
                                round
                                plain
                                hairline
                                @click.stop="cancelOrder(order)"
                            >取消订单</van-button>
                            <template v-if="order.status === 'ongoing'">
                                <van-button
                                    size="small"
                                    round
                                    plain
                                    hairline
                                    type="primary"
                                    @click.stop="extendOrder(order)"
                                >延长服务</van-button>
                                <van-button
                                    size="small"
                                    round
                                    type="primary"
                                    @click.stop="contactNurse(order)"
                                >联系护工</van-button>
                            </template>
                            <template v-if="order.status === 'completed' && !order.reviewed">
                                <van-button
                                    size="small"
                                    round
                                    plain
                                    hairline
                                    @click.stop="viewOrder(order)"
                                >查看详情</van-button>
                                <van-button
                                    size="small"
                                    round
                                    type="success"
                                    @click.stop="reviewOrder(order)"
                                >去评价</van-button>
                            </template>
                            <template v-if="order.status === 'completed' && order.reviewed">
                                <van-button
                                    size="small"
                                    round
                                    plain
                                    hairline
                                    @click.stop="viewReview(order)"
                                >查看评价</van-button>
                            </template>
                            <template v-if="order.status === 'cancelled'">
                                <van-button
                                    size="small"
                                    round
                                    plain
                                    hairline
                                    @click.stop="reorder(order)"
                                >再次下单</van-button>
                            </template>
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <van-empty
                    v-if="!loading && filteredOrders.length === 0"
                    description="暂无订单记录"
                    image="search"
                >
                    <van-button round type="primary" size="small" class="empty-btn" @click="goPublish">立即下单</van-button>
                </van-empty>
            </van-list>
        </van-pull-refresh>
    </div>

    <!-- 搜索弹窗 -->
    <van-popup v-model:show="showSearch" position="top" :style="{ height: 'auto' }">
        <van-search
            v-model="searchKeyword"
            placeholder="搜索订单号/服务类型/地点"
            shape="round"
            show-action
            @search="doSearch"
            @cancel="showSearch = false"
        >
            <template #action>
                <div @click="doSearch">搜索</div>
            </template>
        </van-search>
    </van-popup>

    <!-- 底部栏 -->
    {include file="PatientAPP/Component/van-tabbar" /}
</div>
{/block}

{block name="js"}
<script>
    const app = Vue.createApp({
        data() {
            return {
                activeTab: 'all',
                showSearch: false,
                searchKeyword: '',
                refreshing: false,
                loading: false,
                finished: true,
                stats: { pending: 2, ongoing: 1, completed: 8 },
                orderList: [
                    {
                        id: 1, orderNo: 'MC20260509001', status: 'ongoing', statusText: '进行中',
                        createTime: '2026-05-08 14:30', serviceType: '住院陪护',
                        serviceTime: '2026-05-08 15:00 ~ 2026-05-11 15:00 (3天)',
                        location: '北京协和医院 住院部12楼1205病房',
                        nurseName: '张秀芳', nurseExp: 8, nurseRating: 4.9,
                        nursePhone: '13812345678', nursePhoneHidden: '138****5678', showPhone: false,
                        remark: '术后护理，需要协助翻身、拍背，注意引流管',
                        totalAmount: 2448, reviewed: false,
                    },
                    {
                        id: 2, orderNo: 'MC20260508002', status: 'pending', statusText: '待接单',
                        createTime: '2026-05-09 10:00', serviceType: '门诊陪护',
                        serviceTime: '2026-05-10 08:30 ~ 12:30 (半天)',
                        location: '北京大学第一医院 门诊楼3层',
                        nurseName: '', nurseExp: '', nurseRating: '',
                        remark: '陪同就诊，协助挂号、缴费、取药',
                        totalAmount: 196, reviewed: false,
                    },
                    {
                        id: 3, orderNo: 'MC20260507003', status: 'pending', statusText: '待接单',
                        createTime: '2026-05-07 16:20', serviceType: '居家陪护',
                        serviceTime: '2026-05-10 09:00 ~ 17:00 (1天)',
                        location: '北京市朝阳区建国路88号院3号楼2单元501',
                        nurseName: '', nurseExp: '', nurseRating: '',
                        remark: '老人日常照料，做饭、打扫卫生、陪同散步',
                        totalAmount: 520, reviewed: false,
                    },
                    {
                        id: 4, orderNo: 'MC20260505004', status: 'completed', statusText: '已完成',
                        createTime: '2026-05-03 09:15', serviceType: '住院陪护',
                        serviceTime: '2026-05-03 10:00 ~ 2026-05-06 10:00 (3天)',
                        location: '中日友好医院 住院部8楼802病房',
                        nurseName: '李国华', nurseExp: 10, nurseRating: 4.8,
                        nursePhone: '13987654321', nursePhoneHidden: '139****4321', showPhone: false,
                        remark: '重症监护后转普通病房的康复期护理',
                        totalAmount: 2700, reviewed: true,
                    },
                    {
                        id: 5, orderNo: 'MC20260430005', status: 'completed', statusText: '已完成',
                        createTime: '2026-04-28 11:40', serviceType: '母婴护理',
                        serviceTime: '2026-04-29 08:00 ~ 2026-05-13 08:00 (14天)',
                        location: '北京妇产医院 家庭住所（朝阳区望京）',
                        nurseName: '王美玲', nurseExp: 5, nurseRating: 4.9,
                        nursePhone: '13666668888', nursePhoneHidden: '3666668888', showPhone: false,
                        remark: '月子期间母婴护理，新生儿照料和产妇恢复',
                        totalAmount: 11200, reviewed: true,
                    },
                    {
                        id: 6, orderNo: 'MC20260425006', status: 'completed', statusText: '已完成',
                        createTime: '2026-04-23 15:00', serviceType: '门诊陪护',
                        serviceTime: '2026-04-25 07:30 ~ 13:00 (半天)',
                        location: '首都医科大学附属北京天坛医院',
                        nurseName: '陈建国', nurseExp: 6, nurseRating: 4.7,
                        nursePhone: '15811112222', nursePhoneHidden: '158****2222', showPhone: false,
                        remark: '陪同做核磁共振检查，老人行动不便需轮椅辅助',
                        totalAmount: 232, reviewed: false,
                    },
                    {
                        id: 7, orderNo: 'MC20260420007', status: 'cancelled', statusText: '已取消',
                        createTime: '2026-04-18 09:30', serviceType: '居家陪护',
                        serviceTime: '2026-04-20 14:00 ~ 18:00 (4小时)',
                        location: '北京市海淀区中关村大街1号',
                        nurseName: '', nurseExp: '', nurseRating: '',
                        remark: '临时有事取消了',
                        totalAmount: 240, reviewed: false,
                    },
                    {
                        id: 8, orderNo: 'MC20260415008', status: 'completed', statusText: '已完成',
                        createTime: '2026-04-13 10:20', serviceType: '住院陪护',
                        serviceTime: '2026-04-15 08:00 ~ 2026-04-18 08:00 (3天)',
                        location: '中国人民解放军总医院(301医院) 住院部东楼608',
                        nurseName: '赵文斌', nurseExp: 12, nurseRating: 4.8,
                        nursePhone: '17799887766', nursePhoneHidden: '177****7766', showPhone: false,
                        remark: '心脏手术后康复护理，监测生命体征',
                        totalAmount: 2880, reviewed: true,
                    },
                    {
                        id: 9, orderNo: 'MC20260410009', status: 'completed', statusText: '已完成',
                        createTime: '2026-04-08 14:00', serviceType: '门诊陪护',
                        serviceTime: '2026-04-10 09:00 ~ 11:30 (2.5小时)',
                        location: '北京安贞医院 心脏中心',
                        nurseName: '刘晓红', nurseExp: 3, nurseRating: 4.6,
                        remark: '陪同复查心电图和超声心动图',
                        totalAmount: 138, reviewed: true,
                    },
                    {
                        id: 10, orderNo: 'MC20260405010', status: 'completed', statusText: '已完成',
                        createTime: '2026-04-02 16:45', serviceType: '居家陪护',
                        serviceTime: '2026-04-05 09:00 ~ 18:00 (连续5天)',
                        location: '北京市丰台区方庄南路18号院',
                        nurseName: '周明辉', nurseExp: 7, nurseRating: 4.7,
                        remark: '脑梗塞后遗症患者居家康复训练和生活照料',
                        totalAmount: 2250, reviewed: false,
                    },
                ],
            };
        },
        computed: {
            filteredOrders() {
                let list = this.orderList;
                if (this.activeTab !== 'all') {
                    list = list.filter(o => o.status === this.activeTab);
                }
                if (this.searchKeyword) {
                    const kw = this.searchKeyword.toLowerCase();
                    list = list.filter(o =>
                        o.orderNo.toLowerCase().includes(kw) ||
                        o.serviceType.includes(kw) ||
                        o.location.includes(kw) ||
                        (o.nurseName && o.nurseName.includes(kw))
                    );
                }
                return list;
            },
        },
        methods: {
            onSearch() { this.showSearch = true; },
            doSearch() { this.showSearch = false; vant.showToast({ message: `搜索: ${this.searchKeyword}`, position: 'top' }); },
            switchTab(tab) { this.activeTab = tab; },
            onRefresh() { setTimeout(() => { this.refreshing = false; vant.showToast('刷新成功'); }, 1000); },
            onLoad() { this.loading = false; this.finished = true; },
            togglePhone(order) { order.showPhone = !order.showPhone; },
            viewOrder(order) { vant.showDialog({ title: '订单详情', message: `订单号: ${order.orderNo}\n服务: ${order.serviceType}\n时间: ${order.serviceTime}\n金额: ¥${order.totalAmount}\n状态: ${order.statusText}` }); },
            cancelOrder(order) {
                vant.showConfirmDialog({ title: '确认取消', message: '确定要取消该订单吗？取消后需重新下单。' }).then(() => {
                    order.status = 'cancelled';
                    order.statusText = '已取消';
                    this.stats.pending--;
                    vant.showToast({ message: '订单已取消', icon: 'success' });
                }).catch(() => {});
            },
            contactNurse(order) {
                vant.showDialog({ title: '联系护工', message: `正在呼叫 ${order.nurseName}...\n电话: 138****8888` });
            },
            extendOrder(order) {
                vant.showConfirmDialog({ title: '延长服务', message: '确定要延长当前服务时长吗？护工将收到延长时间通知。' }).then(() => {
                    vant.showToast({ message: '已发送延长请求', icon: 'success' });
                }).catch(() => {});
            },
            reviewOrder(order) {
                vant.showDialog({ title: '服务评价', message: '评价功能开发中...' });
            },
            viewReview(order) {
                vant.showToast('查看评价详情');
            },
            reorder(order) {
                vant.showToast({ message: '正在跳转到下单页面...', icon: 'success' });
            },
            goPublish() {
                vant.showToast('跳转到发布订单页');
            },
            serviceIcon(type) {
                const map = { '住院陪护': 'hotel-o', '门诊陪护': 'guide-o', '居家陪护': 'home-o', '母婴护理': 'like-o' };
                return map[type] || 'service-o';
            },
        },
        watch: {
            activeTab(val) { if (val !== 'orders') { onTabBarChange(val); } },
        },
    });
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount('#app');
</script>
{/block}