<template>
	<el-container>
		<el-main class="nopadding">
			<el-card style="margin-bottom: 10px">
				<work-step ref="workStep"></work-step>
			</el-card>
			<el-card style="margin-left: 10px; margin-bottom: 10px" v-if="cateType==='visit'">
				<el-descriptions title="来访信息" :column="3">
					<el-descriptions-item label="工单流水号:">
						{{ticketDetail.sn }}
					</el-descriptions-item>
					<el-descriptions-item label="来访概述:">
						{{visitDetail.name }}
					</el-descriptions-item>
					<el-descriptions-item label="来访单位:">
						{{visitDetail.company }}
					</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="来访事由:">
						{{purpose_[visitDetail.purpose] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访详述:">
						{{visitDetail.description }}
					</el-descriptions-item>
					<el-descriptions-item label="接待人:" v-if="visitDetail.receptionist_">
						{{ visitDetail.receptionist_.name }}
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
			<el-card style="margin-left: 10px; margin-bottom: 10px" v-if="cateType==='rparty'">
				<el-descriptions title="入厂项目" :column="3">
					<el-descriptions-item label="工单流水号:">
						{{ticketDetail.sn }}
					</el-descriptions-item>
					<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-left: 10px; margin-bottom: 10px" v-else>
				<el-descriptions title="作业许可证" :column="3">
					<el-descriptions-item label="工单流水号:">
						{{ticketDetail.sn }}
					</el-descriptions-item>
					<el-descriptions-item label="作业名称:">
						{{oplDetail.name }}
					</el-descriptions-item>
					<el-descriptions-item label="作业地点:">
						{{oplDetail.place}}
					</el-descriptions-item>
					<el-descriptions-item label="作业状态:">
						{{state_[oplDetail.state]}}
					</el-descriptions-item>
					<el-descriptions-item label="生产状态:">
						{{oplDetail.state_work }}
					</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 style="margin-left: 10px; margin-bottom: 10px" v-if="type!=='show'">
				<scTitle title="处理"></scTitle>
				<el-form :model="form" ref="addForm" label-width="100px" label-position="left">
					<el-form-item label="处理意见">
						<el-input v-model="form.suggestion" clearable></el-input>
					</el-form-item>
				</el-form>
				<div v-if="ticketDetail.in_add_node" style="text-align: right">
					<el-button v-if="ticketDetail.in_add_node" class="filter-item" type="primary" @click="addNodeHandler('2')">加签处理</el-button>
				</div>
				<div v-else style="display: flex;justify-content: space-between;">
					<div>
						<el-button type="primary" @click="addNode">加签</el-button>
						<el-button v-if="ticketDetail.state_&&ticketDetail.state_.enable_deliver" type="primary" plain @click="deliverNode">转交</el-button>
					</div>
					<div>
						<el-button v-for="item in operationBtn" :key="item.id" class="filter-item" :type="item.attribute_type===2?'danger':'primary'" @click="operationSubmit(item.id)">{{item.name}}</el-button>
					</div>
				</div>
			</el-card>
			<el-card style="margin-left: 10px; margin-bottom: 10px" v-if="type!=='show'">
				<scTitle title="作业票关闭"></scTitle>
				<el-form :model="form" ref="addForm" label-width="100px" label-position="left">
					<el-form-item label="关闭原因：">
						<el-select v-model="form.reason" placeholder="选择关闭原因">
							<el-option
								v-for="item in reasonOption"
								:key="item"
								:label="item"
								:value="item"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="关闭确认：">
						<el-checkbox-group v-model="form.review">
							<el-checkbox
								v-for="(item, index) in reviewOption"
								:key="index"
								:label="item"
							>{{ item }}
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="处理意见">
						<el-input v-model="form.suggestion" clearable></el-input>
					</el-form-item>
				</el-form>
				<div v-if="ticketDetail.in_add_node" style="text-align: right">
					<el-button v-if="ticketDetail.in_add_node" class="filter-item" type="primary" @click="addNodeHandler('2')">加签处理</el-button>
				</div>
				<div v-else style="display: flex;justify-content: space-between;">
					<div>
						<el-button type="primary" @click="addNode">加签</el-button>
						<el-button v-if="ticketDetail.state_&&ticketDetail.state_.enable_deliver" type="primary" plain @click="deliverNode">转交</el-button>
					</div>
					<div>
						<el-button v-for="item in operationBtn" :key="item.id" class="filter-item" :type="item.attribute_type===2?'danger':'primary'" @click="operationSubmit(item.id)">{{item.name}}</el-button>
					</div>
				</div>
			</el-card>
			<el-card style="margin-left: 10px;">
				<work-details ref="workDetails" :ticket="ticketId"></work-details>
			</el-card>
		</el-main>
	</el-container>
	<el-dialog v-model="limitedAdd" title="加签">
		<el-form ref="Form" :model="addForm" label-width="100px" label-position="right">
			<el-form-item label="处理人">
				<el-input style="width: 50%;" v-model="userName" disabled placeholder="选择处理人"></el-input>
				<scUserSelect v-model="addForm.toadd_user" :closable="true" :multiple="false" @handlerSubmit="addNodeHandlerSubmit"></scUserSelect>
			</el-form-item>
			<el-form-item label="加签原因">
				<el-input type="textarea" :rows="3" v-model="addForm.suggestion" placeholder="加签原因"/>
			</el-form-item>
		</el-form>
		<div style="text-align: center">
			<el-button class="filter-item" type="" @click="addCancel">取消</el-button>
			<el-button class="filter-item" type="primary" @click="addNodeHandler('1')">确定</el-button>
		</div>
	</el-dialog>
	<el-dialog v-model="limitedDeliver" title="转交工单">
		<el-form ref="Form" :model="deliverForm" label-width="100px" label-position="right">
			<el-form-item label="转交人">
				<el-input style="width: 50%;" v-model="userName" disabled placeholder="选择转交人"></el-input>
				<scUserSelect :closable="true" :multiple="false" @handlerSubmit="deliverHandlerSubmit"></scUserSelect>
			</el-form-item>
			<el-form-item label="转交原因">
				<el-input type="textarea" :rows="3" v-model="deliverForm.suggestion" placeholder="转交原因"/>
			</el-form-item>
		</el-form>
		<div style="text-align: center">
			<el-button class="filter-item" type="" @click="deliverCancel">取消</el-button>
			<el-button class="filter-item" type="primary" @click="deliverNodeHandler('1')">确定</el-button>
		</div>
	</el-dialog>
	<el-drawer :size="'50%'" v-model="showLimited" title="作业许可证详情">
		<sc-fire :id="projectId"></sc-fire>
	</el-drawer>
</template>

<script>
	import workDetails from "./details.vue";
	import workStep from "./steps.vue";
	import showDialog from "./../rpm/rpj_show.vue";
	import selectUser from '@/layout/components/userselect'

	export default {
		components: {
			workDetails,
			workStep,
			selectUser,
			showDialog
		},
		name: "visitdetail",
		data() {
			return {
				ticketId: "",//工单id
				projectId: "",//对应项目的id
				userName: "",
				rpjDetail: {},
				oplDetail: {},
				ticketDetail: [],
				visitDetail: [],
				employeeLists: [],
				operationBtn: [],
				form:{
					suggestion:'',
					reason:'',
					review:'',
				},
				addForm:{
					suggestion:'',
					toadd_user:'',
				},
				deliverForm:{
					suggestion:'',
					target_user:'',
				},
				rpjShow:false,
				limitedAdd:false,
				showLimited:false,
				limitedDeliver:false,
				limitedUserSelect:false,
				purpose_: {
					10: "参观",
					20: "拜访",
					30: "面试",
					40: "开会"
				},
				rpjType_: {
					10: "建筑施工",
					20: "设备设施检维修",
					30: "保安保洁服务",
					40: "其他",
				},
				state_: {
					10: "创建中",
					20: "审批中",
					30: "待入厂",
					40: "进行中",
					50: "已完成",
				},
				reasonOption:['作业正常结束','因计划改变停止作业','因发生异常终止作业','其他'],
				reviewOption:['现场已清理','人员已清点','火种已熄灭','其他'],
				// reviewOption:['现场已清理','人员已清点','火种已熄灭','其他'],
			};
		},
		created(){
			this.ticketId = this.$route.query.id;
			this.type = this.$route.query.type;
			this.projectId = this.$route.query.projectId;
			this.cateType = this.$route.query.catetype;
			this.operation = this.$route.query.operation;

		},
		mounted() {
			debugger;
			if(this.cateType==='visit'){
				this.getVisit();
			}else if(this.cateType==='rparty'){
				this.getRpj();
			}else{
				if(this.operation!==null){
					this.getOperation();
				}else{
					this.getOpl();
				}
			}
			this.getticketItem();
			this.getBtns();
		},
		methods: {
			showMore(){
				this.rpjShow = true;
				this.$nextTick(()=>{
					this.$refs.showDialog.open().setData({id:this.projectId});
				})
			},
			//工单详情
			getticketItem() {
				this.$API.wf.ticket.ticketItem.req(this.ticketId).then((res) => {
					this.ticketDetail = res;
				});
			},
			//获取应有的流转
			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;
				});
			},
			//作业详情
			getOperation(){
				debugger;
				this.$API.opm.operation.read.req(this.operation).then((res) => {
					debugger;
					this.oplDetail = res;
				});
			},
			showMoreInfo(){
				this.showLimited = true;
			},
			//加签处理-start
			addNode(){
				this.limitedAdd = true;
			},
			addCancel(){
				this.limitedAdd = false;
			},
			addNodeHandlerSubmit(data) {
				this.addForm.toadd_user=data.id;
				this.userName=data.name;
			},
			addNodeHandler(index){
				let res = null;
				if(index==='1'){
					res = this.$API.wf.ticket.addNode.req(this.ticketId,this.addForm);
				}else{
					res = this.$API.wf.ticket.addNodeEnd.req(this.ticketId,this.form);
				}
				if(res.err_msg){}else{
					this.limitedAdd = false;
					this.$router.push("dutywork");
				}
			},
			//加签处理-end
			//转交处理-start
			deliverNode(){
				this.limitedDeliver = true;
			},
			deliverCancel(){
				this.limitedDeliver = false;
			},
			deliverHandlerSubmit(data) {
				this.deliverForm.target_user=data.id;
				this.userName=data.name;
			},
			deliverNodeHandler(){
				this.$API.wf.ticket.ticketDeliver.req(this.ticketId,this.deliverForm).then(res=>{
					if(res.err_msg){}else{
						this.limitedDeliver = false;
						this.$router.push("dutywork");
					}
				})
			},
			//转交处理-end
			//流转按钮触发
			operationSubmit(id){
				let params = new Object();
				params.transition = id;
				params.ticket_data = {};
				params.suggestion = this.form.suggestion;
				this.$API.wf.ticket.ticketHandle.req(this.ticketId,params).then(res=>{
					if(res.err_msg){}else{
						this.$router.push("dutywork");
					}
				})
			},
		},
	};
</script>

<style scoped>
</style>
