<!--用户详情-->
<template>

	<el-tabs v-model="state.page.orderStatus"  @tab-click="handleClick">
		<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
			<el-table :data="state.getList">
				<!--					列表结开始-->
				<el-table-column prop="orderId" label="订单编号" align="center"  width="220"/>
				<el-table-column label="医生" align="center">
					<template #default="{ row }">
						<!-- 点击图片后显示弹框预览 -->
						<el-image
							:src="row.doctors.img"
							fit="cover"
							style="width: 50px;height: 50px"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="doctors.userName" label="医生姓名" align="center" width="120"/>

				<el-table-column prop="country" label="预约状态" align="center" >
					<template #default="{ row }">
						<span v-if="row.orderStatus === 0">已预约</span>
						<span v-else-if="row.orderStatus === 1">已完成</span>
						<span v-else-if="row.orderStatus === 2">已取消</span>
						<span v-else-if="row.orderStatus ===3">已评价</span>
						<span v-else-if="row.orderStatus === 4">未支付</span>
					</template>
				</el-table-column>
				<el-table-column prop="appointmentTime" label="预约时间" align="center" />
				<!--列表结束-->
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button v-if="scope.row.orderStatus === 4" @click="pay(scope.row)" type="success" size="small">重新预约</el-button>
						<el-button v-if="scope.row.orderStatus === 4 ||scope.row.orderStatus === 0" @click="clean(scope.row,2)" type="warning" size="small">取消</el-button>
						<el-button v-if="scope.row.orderStatus === 4 ||scope.row.orderStatus === 0"  @click="to(scope.row.doctors.id)" type="success" size="small">立即沟通</el-button>
						<el-button v-if="scope.row.orderStatus === 2" @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
						<el-button v-if="scope.row.orderStatus === 1 ||scope.row.orderStatus === 3 " @click="view(scope.row.content)" type="success" size="small">病例</el-button>
						<el-button v-if="scope.row.orderStatus === 1" @click="clean(scope.row,3)" type="success" size="small">评价医生</el-button>
						<el-button v-if="scope.row.orderStatus === 2" @click="clean(scope.row,0)" type="danger" size="small">恢复</el-button>
					</template>
				</el-table-column>
				<template v-slot:empty>
					<el-empty description="数据去外太空了~" />
				</template>
			</el-table>
		</el-tab-pane>
	</el-tabs>
	<el-dialog v-model="state.dialogVisibleView" title="查看病例" width="50%">
		<div v-html="state.content"></div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="state.dialogVisibleView = false">确定</el-button>
		</div>
	</el-dialog>
	<el-dialog v-model="state.dialogVisibleScore" title="评价医生" width="30%">
		<el-form :model="state.scoreFrom" label-width="auto" style="max-width: 600px">
			<el-form-item label="医生名称">
				<el-input disabled v-model="state.scoreFrom.doctors.userName" />
			</el-form-item>
			<el-form-item label="评分">
				<el-rate v-model="state.scoreFrom.score" />
			</el-form-item>
			<el-form-item label="评分内容">
				<el-input v-model="state.scoreFrom.scoreContent"   :rows="6"
									type="textarea"/>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="clean('',4)">确定</el-button>
		</div>
	</el-dialog>

</template>
<script setup lang="ts">
import { reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive({
	dialogVisibleView:false,
	dialogVisibleScore:false,
	content:"",
	getOrderStatus: [
		{ name: '已预约', status: 0 },
		{ name: '已完成', status: 1 },
		{ name: '已评价', status: 3 },
		{ name: '已取消', status: 2 },
	],
	getList: [],
	page:{
		page:1,
		limit:999,
		orderStatus:0
	},
	scoreFrom:{}
})

//支付
function pay(data:any) {
	frontRequest.delete(`/api/order/${data.id}`).then(() => {})
	router.push(`/info/${data.itemId}`)
}
/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/medic/${id}`)
}
/**
 * 获取列表数据
 */
function init() {
	frontRequest.get('/api/order/page',{params:state.page}).then(res => {
		state.getList = res.data.list
	})
}

const clean = (data:any,status:number) => {
	if (status === 3) {
		state.dialogVisibleScore = true
		state.scoreFrom = data
		state.scoreFrom.orderStatus = status
		return
	}
	if (status === 4) {
		frontRequest.put("/api/order",state.scoreFrom).then(()=>{
			init()
			ElMessage.success('成功')
			state.dialogVisibleScore = false
		})
		return
	}

	data.orderStatus = status
  frontRequest.put("/api/order",data).then(()=>{
		init()
		ElMessage.success('取消成功')
	})
}
function view(path: string) {
	state.dialogVisibleView = true
	state.content = path
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
	// 根据 tab 的 name 属性更新状态
	const selectedStatus = state.getOrderStatus[tab.index].status;
	state.page.orderStatus = selectedStatus;
	init();
};

const del = (id: number) => {
	frontRequest.delete(`/api/order/${id}`).then(() => {
		ElMessage.success('已经删除')
		init()
	})

}

onMounted(() => {
	init()
})


</script>


<style scoped>

</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
