<template>
    <view class="detail-container">
        <scroll-view class="detail-content" scroll-y="true">
            <!-- 工单基本信息 -->
            <view class="info-card">
                <view class="card-header">
                    <text class="card-title">基本信息</text>
                    <view class="status-tag" :class="getStatusClass(workcase.status)">
                        <text class="status-text">{{workcase.statusText}}</text>
                    </view>
                </view>
                
                <view class="info-item">
                    <text class="label">工单标题</text>
                    <text class="value">{{workcase.title}}</text>
                </view>
                
                <view class="info-item">
                    <text class="label">工单编号</text>
                    <text class="value">{{workcase.number}}</text>
                </view>
                
                <view class="info-item">
                    <text class="label">问题分类</text>
                    <text class="value">{{workcase.category}}</text>
                </view>
                
                <view class="info-item">
                    <text class="label">紧急程度</text>
                    <text class="value priority" :class="getPriorityClass(workcase.priority)">
                        {{workcase.priority}}
                    </text>
                </view>
                
                <view class="info-item">
                    <text class="label">联系方式</text>
                    <text class="value">{{workcase.contact}}</text>
                </view>
                
                <view class="info-item">
                    <text class="label">创建时间</text>
                    <text class="value">{{formatDateTime(workcase.createTime)}}</text>
                </view>
            </view>
            
            <!-- 问题描述 -->
            <view class="info-card">
                <view class="card-header">
                    <text class="card-title">问题描述</text>
                </view>
                <text class="description">{{workcase.description}}</text>
            </view>
            
            <!-- 图片附件 -->
            <view class="info-card" v-if="workcase.images && workcase.images.length > 0">
                <view class="card-header">
                    <text class="card-title">相关图片</text>
                </view>
                <view class="image-gallery">
                    <image 
                        class="gallery-image"
                        v-for="(image, index) in workcase.images"
                        :key="index"
                        :src="image"
                        mode="aspectFill"
                        @tap="previewImage(index)"
                    />
                </view>
            </view>
            
            <!-- 处理进度 -->
            <view class="info-card" v-if="workcase.status === 'processing'">
                <view class="card-header">
                    <text class="card-title">处理进度</text>
                    <text class="progress-text">{{workcase.progress}}%</text>
                </view>
                <view class="progress-container">
                    <view class="progress-bar">
                        <view class="progress-fill" :style="'width: ' + workcase.progress + '%'"></view>
                    </view>
                </view>
                <text class="progress-desc">{{getProgressDesc(workcase.progress)}}</text>
            </view>
            
            <!-- 处理记录 -->
            <view class="info-card">
                <view class="card-header">
                    <text class="card-title">处理记录</text>
                </view>
                <view class="timeline">
                    <view 
                        class="timeline-item"
                        v-for="(record, index) in workcase.records"
                        :key="index"
                    >
                        <view class="timeline-dot" :class="getRecordDotClass(record.type)"></view>
                        <view class="timeline-content">
                            <text class="record-title">{{record.title}}</text>
                            <text class="record-desc" v-if="record.description">{{record.description}}</text>
                            <view class="record-meta">
                                <text class="record-time">{{formatDateTime(record.time)}}</text>
                                <text class="record-operator">{{record.operator}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 客服评价 -->
            <view class="info-card" v-if="workcase.rating">
                <view class="card-header">
                    <text class="card-title">服务评价</text>
                </view>
                <view class="rating-section">
                    <view class="stars">
                        <text 
                            class="star"
                            v-for="i in 5"
                            :key="i"
                            :class="{active: i <= workcase.rating.score}"
                        >★</text>
                    </view>
                    <text class="rating-text">{{workcase.rating.comment}}</text>
                </view>
            </view>
        </scroll-view>
        
        <!-- 底部操作栏 -->
        <view class="bottom-actions">
            <button 
                class="action-btn secondary"
                @tap="contactService"
            >
                联系客服
            </button>
            <button 
                class="action-btn primary"
                v-if="workcase.status === 'pending'"
                @tap="cancelWorkcase"
            >
                取消工单
            </button>
            <button 
                class="action-btn primary"
                v-if="workcase.status === 'processing'"
                @tap="confirmComplete"
            >
                确认完成
            </button>
            <button 
                class="action-btn primary"
                v-if="workcase.status === 'completed' && !workcase.rating"
                @tap="showRating"
            >
                服务评价
            </button>
        </view>
        
        <!-- 评价弹窗 -->
        <view class="rating-modal" v-if="showRatingModal">
            <view class="modal-content">
                <view class="modal-header">
                    <text class="modal-title">服务评价</text>
                    <view class="close-btn" @tap="hideRating">
                        <text class="close-icon">×</text>
                    </view>
                </view>
                
                <view class="rating-form">
                    <text class="form-label">请为本次服务打分</text>
                    <view class="star-rating">
                        <text 
                            class="rating-star"
                            v-for="i in 5"
                            :key="i"
                            :class="{active: i <= ratingScore}"
                            @tap="setRating(i)"
                        >★</text>
                    </view>
                    
                    <text class="form-label">评价内容</text>
                    <textarea 
                        class="rating-textarea"
                        v-model="ratingComment"
                        placeholder="请输入您的评价内容..."
                        maxlength="200"
                    />
                    <text class="char-count">{{ratingComment.length}}/200</text>
                </view>
                
                <view class="modal-actions">
                    <button class="modal-btn cancel" @tap="hideRating">取消</button>
                    <button 
                        class="modal-btn confirm" 
                        @tap="submitRating"
                        :disabled="ratingScore === 0"
                    >提交</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 接口定义
interface Workcase {
    id: string
    number: string
    title: string
    category: string
    priority: string
    status: 'pending' | 'processing' | 'completed' | 'cancelled'
    statusText: string
    description: string
    contact: string
    progress: number
    createTime: Date
    updateTime: Date
    images?: string[]
    records: ProcessRecord[]
    rating?: Rating
}

interface ProcessRecord {
    type: string
    title: string
    description?: string
    time: Date
    operator: string
}

interface Rating {
    score: number
    comment: string
}

// 响应式数据
const workcaseId = ref<string | null>(null)
const workcase = ref<Workcase>({} as Workcase)
const showRatingModal = ref<boolean>(false)
const ratingScore = ref<number>(0)
const ratingComment = ref<string>('')

// 生命周期
onMounted(() => {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    workcaseId.value = currentPage.options?.id || '1'
    loadWorkcaseDetail()
})

// 方法定义
async function loadWorkcaseDetail() {
    try {
        // 模拟获取工单详情
        workcase.value = getMockWorkcase()
        
        // 设置页面标题
        uni.setNavigationBarTitle({
            title: workcase.value.title
        })
    } catch (error) {
        uni.showToast({
            title: '加载失败',
            icon: 'error'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
    }
}

function getMockWorkcase(): Workcase {
    return {
        id: workcaseId.value || '1',
        number: `WC2024${String(workcaseId.value || '1').padStart(4, '0')}`,
        title: '小区公园路灯不亮需要维修',
        category: '设施报修',
        priority: '紧急',
        status: 'processing',
        statusText: '处理中',
        description: '小区公园内的路灯已经连续三天不亮了，影响居民夜间出行安全。路灯位置在公园主干道上，希望能够尽快派人维修。',
        contact: '138****5678',
        progress: 65,
        createTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
        updateTime: new Date(),
        images: [
            '/static/workcase1.jpg',
            '/static/workcase2.jpg'
        ],
        records: [
            {
                type: 'create',
                title: '工单创建',
                description: '用户提交工单，问题已记录',
                time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
                operator: '系统'
            },
            {
                type: 'accept',
                title: '工单受理',
                description: '客服已受理，安排相关人员处理',
                time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000),
                operator: '客服小王'
            },
            {
                type: 'processing',
                title: '现场勘查',
                description: '维修人员已到达现场，正在检查路灯故障原因',
                time: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
                operator: '维修师傅张三'
            },
            {
                type: 'processing',
                title: '配件采购',
                description: '故障原因确认为灯泡损坏，正在采购替换配件',
                time: new Date(Date.now() - 12 * 60 * 60 * 1000),
                operator: '维修师傅张三'
            }
        ]
    }
}

// 获取状态样式
function getStatusClass(status: string) {
    return {
        'status-pending': status === 'pending',
        'status-processing': status === 'processing',
        'status-completed': status === 'completed',
        'status-cancelled': status === 'cancelled'
    }
}

// 获取优先级样式
function getPriorityClass(priority: string) {
    return {
        'priority-normal': priority === '一般',
        'priority-urgent': priority === '紧急',
        'priority-emergency': priority === '非常紧急'
    }
}

// 获取记录点样式
function getRecordDotClass(type: string) {
    return {
        'dot-create': type === 'create',
        'dot-accept': type === 'accept',
        'dot-processing': type === 'processing',
        'dot-complete': type === 'complete'
    }
}

// 获取进度描述
function getProgressDesc(progress: number): string {
    if (progress < 25) {
        return '刚刚开始处理'
    } else if (progress < 50) {
        return '正在积极处理中'
    } else if (progress < 75) {
        return '处理进展顺利'
    } else if (progress < 100) {
        return '即将完成处理'
    } else {
        return '处理已完成'
    }
}

// 格式化日期时间
function formatDateTime(date: Date): string {
    const d = new Date(date)
    const year = d.getFullYear()
    const month = String(d.getMonth() + 1).padStart(2, '0')
    const day = String(d.getDate()).padStart(2, '0')
    const hour = String(d.getHours()).padStart(2, '0')
    const minute = String(d.getMinutes()).padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${minute}`
}

// 预览图片
function previewImage(index: number) {
    uni.previewImage({
        current: index,
        urls: workcase.value.images || []
    })
}

// 联系客服
function contactService() {
    uni.showActionSheet({
        itemList: ['拨打电话', '在线客服'],
        success: (res) => {
            if (res.tapIndex === 0) {
                uni.makePhoneCall({
                    phoneNumber: '400-123-4567'
                })
            } else {
                uni.navigateTo({
                    url: '/pages/index/index'
                })
            }
        }
    })
}

// 取消工单
function cancelWorkcase() {
    uni.showModal({
        title: '确认取消',
        content: '确定要取消此工单吗？取消后无法恢复。',
        success: (res) => {
            if (res.confirm) {
                workcase.value.status = 'cancelled'
                workcase.value.statusText = '已取消'
                
                // 添加取消记录
                workcase.value.records.push({
                    type: 'cancel',
                    title: '工单取消',
                    description: '用户主动取消工单',
                    time: new Date(),
                    operator: '用户'
                })
                
                uni.showToast({
                    title: '工单已取消',
                    icon: 'success'
                })
            }
        }
    })
}

// 确认完成
function confirmComplete() {
    uni.showModal({
        title: '确认完成',
        content: '确认问题已经得到解决？',
        success: (res) => {
            if (res.confirm) {
                workcase.value.status = 'completed'
                workcase.value.statusText = '已完成'
                workcase.value.progress = 100
                
                // 添加完成记录
                workcase.value.records.push({
                    type: 'complete',
                    title: '工单完成',
                    description: '用户确认问题已解决',
                    time: new Date(),
                    operator: '用户'
                })
                
                uni.showToast({
                    title: '工单已完成',
                    icon: 'success'
                })
            }
        }
    })
}

// 显示评价弹窗
function showRating() {
    showRatingModal.value = true
    ratingScore.value = 0
    ratingComment.value = ''
}

// 隐藏评价弹窗
function hideRating() {
    showRatingModal.value = false
}

// 设置评分
function setRating(score: number) {
    ratingScore.value = score
}

// 提交评价
function submitRating() {
    if (ratingScore.value === 0) {
        uni.showToast({
            title: '请选择评分',
            icon: 'none'
        })
        return
    }
    
    workcase.value.rating = {
        score: ratingScore.value,
        comment: ratingComment.value || '用户未填写评价内容'
    }
    
    hideRating()
    
    uni.showToast({
        title: '评价提交成功',
        icon: 'success'
    })
}
</script>

<style lang="scss" scoped>
@import './detail.scss';
</style>
