<template>
	<el-container>
		<el-main v-loading="mainLoading">
			<!-- <el-card header="流程" style="position:relative">
				<work-step v-if="ticketDetail.state" ref="workStep" :ticket="ticketDetail"></work-step>
			</el-card> -->
			<!-- <el-card style="margin-top: 4px">
				<el-descriptions title="工单信息" :column="3">
					<el-descriptions-item label="工单流水号:">
						{{ticketDetail.sn }}
					</el-descriptions-item>
					<el-descriptions-item label="所属流程:">
						<span v-if="ticketDetail.workflow">{{ticketDetail.workflow_.name }}</span>
					</el-descriptions-item>
					<el-descriptions-item label="创建时间:">
						{{ticketDetail.create_time }}
					</el-descriptions-item>
					<el-descriptions-item label="工单标题:" :span="3">
						{{ticketDetail.title }}
					</el-descriptions-item>
				</el-descriptions>
			</el-card> -->
			<el-card style="margin-top: 4px" shadow="never" v-if="cateType==='visit'">
				<el-descriptions title="来访信息" :column="3">
					<el-descriptions-item label="来访概述:">
						{{visitDetail.name }}
					</el-descriptions-item>
					<el-descriptions-item label="来访级别:">
						{{levelOptions[visitDetail.level] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访事由:">
						{{purpose_[visitDetail.purpose] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访人数:">
						<el-tag size="small">{{ visitDetail.count_people }}人</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="来访人员:">
						<el-tag v-for="item in visitDetail.visitors_" :key='item.id' size="small">
							{{ item.visitor_.name }}
						</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="状态:">
						{{state_[visitDetail.state] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访时间:">
						{{visitDetail.visit_time }}
					</el-descriptions-item>
					<el-descriptions-item label="离访时间:">
						{{visitDetail.leave_time }}
					</el-descriptions-item>
					<el-descriptions-item label="接待人:" v-if="visitDetail.receptionist_">
						{{ visitDetail.receptionist_.name }}
					</el-descriptions-item>
				</el-descriptions>
				<div style="text-align: center">
					<el-link type="primary" @click="showMoreVisit"> 更多信息</el-link>
				</div>
				<visit-dialog v-if="visitShow" ref="visitDialog"></visit-dialog>
			</el-card>
			<el-card style="margin-top: 4px" shadow="never" v-if="cateType==='rpj'">
				<el-descriptions title="入厂项目" :column="3">
					<el-descriptions-item label="相关方:">
						{{rpjDetail.rparty_name}}
					</el-descriptions-item>
					<el-descriptions-item label="入厂项目:">
						{{rpjDetail.name }}
					</el-descriptions-item>
					<el-descriptions-item label="项目类型:">
						<el-tag size="small">{{rpjType_[rpjDetail.type]}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="合同编号:">
						{{rpjDetail.contract_number }}
					</el-descriptions-item>
					<el-descriptions-item label="状态:">
						{{state_[rpjDetail.state] }}
					</el-descriptions-item>
					<el-descriptions-item label="进厂时间:">
						{{rpjDetail.come_time }}
					</el-descriptions-item>
					<el-descriptions-item label="离厂时间:">
						{{rpjDetail.leave_time }}
					</el-descriptions-item>
					<el-descriptions-item label="所属部门:">
						{{rpjDetail.belong_dept_name }}
					</el-descriptions-item>
				</el-descriptions>
				<div style="text-align: center">
					<el-link type="primary" @click="showMore"> 更多信息</el-link>
				</div>
				<show-dialog v-if="rpjShow" ref="showDialog"></show-dialog>
			</el-card>
			<el-card style="margin-top: 4px" shadow="never" v-if="cateType==='opl'">
				<el-descriptions title="作业票详情" :column="3">
					<el-descriptions-item label="所属作业:">
						<span v-if="oplDetail.operation">{{oplDetail.operation_.name }}</span>
					</el-descriptions-item>
					<el-descriptions-item label="许可证类型:">
						{{oplDetail.cate_name }}
					</el-descriptions-item>
					<el-descriptions-item label="作业区域:">
						<span v-if="oplDetail.operation">{{oplDetail.operation_.area_.name}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="作业状态:">
						<span v-if="oplDetail.operation">{{state2_[oplDetail.operation_.state]}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="生产状态:">
						<span v-if="oplDetail.operation">{{oplDetail.operation_.state_work }}</span>
					</el-descriptions-item>
					<el-descriptions-item label="开始时间:">
						{{oplDetail.start_time }}
					</el-descriptions-item>
					<el-descriptions-item label="结束时间:">
						{{oplDetail.end_time }}
					</el-descriptions-item>
				</el-descriptions>
				<!-- <div style="text-align: center">
					<el-link type="primary" @click="showMoreInfo"> 作业许可证详情</el-link>
				</div> -->
				<show-dialog v-if="rpjShow" ref="showDialog"></show-dialog>
			</el-card>
			<el-card shadow="never" style="margin-top: 4px" header="处理日志">
				<work-details ref="workDetails" :ticket="ticketId"></work-details>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import workDetails from "./../wf/details.vue";
	import workStep from "./../wf/steps.vue";
	export default {
		components: {
			workDetails,
			workStep,
		},
		name: "ticketdetail",
		props: {
			//工单id
			ticketId: {
				type: String,
			},
			//对应项目的id
			projectId: {
				type: String,
			},
			cateType: {
				type: String,
			},
		},
		data() {
			return {
				mainLoading: false,
				userName: "",
				rpjDetail: {},
				oplDetail: {},
				ticketDetail: {},
				visitDetail: {},
				employeeLists: [],
				operationBtn: [],
				rpjShow: false,
				visitShow: false,
				limitedUserSelect: false,
				purpose_: {
					10: "参观",
					20: "拜访",
					30: "面试",
					40: "开会"
				},
				rpjType_: {
					10: "建筑施工",
					20: "设备设施检维修",
					30: "保安保洁服务",
					40: "其他",
				},
				state_: {
					10: "创建中",
					20: "审批中",
					30: "待入厂",
					40: "进行中",
					50: "已完成",
					60: "已关闭"
				},
				state2_: {
					10: "创建中",
					20: "审批中",
					30: "待作业",
					40: "作业中",
					50: "已结束",
				},
				levelOptions: {
					10: "一般",
					20: "重要"
				},
				noteOption: [
					{id: 10, name: '作业正常结束'},
					{id: 20, name: '因计划改变停止作业'},
					{id: 30, name: '因发生异常终止作业'},
					{id: 40, name: '其他'},
				],
				dosOption: [],
				submitLoading: false,
			};
		},
		mounted() {
			debugger;
			console.log(this.ticketId);
			console.log(this.projectId);
			console.log(this.cateType);
			if (this.cateType === 'visit') {
				this.getVisit();
			} else if (this.cateType === 'rpj') {
				this.getRpj();
			} else {
				this.getOpl();
			}
			this.getticketItem(this.ticketId);
			// this.getBtns();
		},
		methods: {
			//关闭工作
			getCloseDos() {
				this.$API.system.dict.list
					.req({page: 0, type__code: "close_options"})
					.then((res) => {
						let dosOption = res.filter(item => {
							return item.is_used
						});
						this.dosOption = dosOption.slice(0, 3)
					});
			},
			showMore() {
				this.rpjShow = true;
				this.$nextTick(() => {
					this.$refs.showDialog.open().setData({id: this.projectId});
				})
			},
			showMoreVisit() {
				this.visitShow = true;
				this.$nextTick(() => {
					this.$refs.visitDialog.open('show').setData({id: this.projectId});
				})
			},
			//工单详情
			getticketItem(ticketId) {
				this.mainLoading = true;
				let that = this;
				this.$API.wf.ticket.ticketItem.req(ticketId).then((res) => {
					that.mainLoading = false;
					debugger;
					that.ticketDetail = res;
					if(that.ticketDetail.state_.key == 'opl_close'){
						// 如果是作业关闭,展示需要提交的表单
						that.getCloseDos()
					}
				}).catch(e=>{that.mainLoading = false});
			},
			// //获取应有的流转
			// getBtns() {
			// 	this.$API.wf.ticket.ticketTransitions.req(this.ticketId).then(res => {
			// 		this.operationBtn = res;
			// 	})
			// },

			//访客详情
			getVisit() {
				this.$API.vm.visit.read.req(this.projectId).then((res) => {
					this.visitDetail = res;
				});
			},

			//入厂项目详情
			getRpj() {
				this.$API.rpm.rpj.item.req(this.projectId).then((res) => {
					debugger;
					this.rpjDetail = res;
				});
			},
			//许可证详情
			getOpl() {
				this.$API.opm.opl.read.req(this.projectId).then((res) => {
					debugger;
					this.oplDetail = res;
				});
			},
		},
	};
</script>

<style scoped>
	.ticketRetry {
		right: 20px;
		top: 30px;
		position: absolute;
	}
</style>
