<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-button
					class="ticketRetry"
					v-if="!ticketDetail.script_run_last_result"
					@click="reStart"
					type="warning"
				>
					重新执行
				</el-button>
			</el-card>
			<el-card style="margin-top: 4px; position: relative">
				<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; position: relative"
				v-if="cateType === 'visit'"
			>
				<el-descriptions title="来访信息" :column="3">
					<el-descriptions-item label="来访概述:">
						{{ itemDetail.name }}
					</el-descriptions-item>
					<el-descriptions-item label="来访级别:">
						{{ levelOptions[itemDetail.level] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访事由:">
						{{ purpose_[itemDetail.purpose] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访人数:">
						<el-tag size="small"
							>{{ itemDetail.count_people }}人</el-tag
						>
					</el-descriptions-item>
					<el-descriptions-item label="来访人员:">
						<el-tag
							v-for="item in itemDetail.visitors_"
							:key="item.id"
							size="small"
						>
							{{ item.visitor_.name }}
						</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="状态:">
						{{ state_[itemDetail.state] }}
					</el-descriptions-item>
					<el-descriptions-item label="来访时间:">
						{{ itemDetail.visit_time }}
					</el-descriptions-item>
					<el-descriptions-item label="离访时间:">
						{{ itemDetail.leave_time }}
					</el-descriptions-item>
					<el-descriptions-item
						label="接待人:"
						v-if="itemDetail.receptionist_"
					>
						{{ itemDetail.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; position: relative"
				v-if="cateType === 'rpj'"
			>
				<el-descriptions title="入厂项目" :column="3">
					<el-descriptions-item label="相关方:">
						{{ itemDetail.rparty_name }}
					</el-descriptions-item>
					<el-descriptions-item label="入厂项目:">
						{{ itemDetail.name }}
					</el-descriptions-item>
					<el-descriptions-item label="项目类型:">
						<el-tag size="small">{{
							rpjType_[itemDetail.type]
						}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="合同编号:">
						{{ itemDetail.contract_number }}
					</el-descriptions-item>
					<el-descriptions-item label="状态:">
						{{ state_[itemDetail.state] }}
					</el-descriptions-item>
					<el-descriptions-item label="进厂时间:">
						{{ itemDetail.come_time }}
					</el-descriptions-item>
					<el-descriptions-item label="离厂时间:">
						{{ itemDetail.leave_time }}
					</el-descriptions-item>
					<el-descriptions-item label="所属部门:">
						{{ itemDetail.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; position: relative"
				v-if="cateType === 'opl'"
			>
				<el-descriptions title="作业许可证" :column="3">
					<el-descriptions-item label="所属作业:">
						<span v-if="itemDetail.operation">{{
							itemDetail.operation_.name
						}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="许可证类型:">
						{{ itemDetail.cate_name }}
					</el-descriptions-item>
					<el-descriptions-item label="作业区域:">
						<span v-if="itemDetail.operation">{{
							itemDetail.operation_.area_.name
						}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="作业状态:">
						<span v-if="itemDetail.operation">{{
							state2_[itemDetail.operation_.state]
						}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="生产状态:">
						<span v-if="itemDetail.operation">{{
							itemDetail.operation_.state_work
						}}</span>
					</el-descriptions-item>
					<el-descriptions-item label="开始时间:">
						{{ itemDetail.start_time }}
					</el-descriptions-item>
					<el-descriptions-item label="结束时间:">
						{{ itemDetail.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-top: 4px; position: relative"
				header="工艺流程"
			>
				<el-table
					:data="routepackes"
					fit
					stripe
					style="width: 100%"
					max-height="300"
					highlight-current-row
				>
					<el-table-column label="排序" prop="sort" width="50">
					</el-table-column>
					<el-table-column label="工序" prop="process_name">
					</el-table-column>
					<el-table-column label="输入" prop="material_in_name">
					</el-table-column>
					<el-table-column label="输出" prop="material_out_name">
					</el-table-column>
					<el-table-column label="出材率" prop="out_rate">
					</el-table-column>
					<el-table-column label="工时" prop="hour_work">
					</el-table-column>
				</el-table>
			</el-card>
			<el-card
				style="margin-top: 4px; position: relative"
				header="处理日志"
			>
				<work-details
					ref="workDetails"
					:ticket="ticketId"
				></work-details>
			</el-card>
			<el-card class="handleWrap" v-if="isDuty || isOwn">
				<scTitle title="处理"></scTitle>
				<el-form
					:model="form"
					ref="addForm"
					label-width="100px"
					label-position="left"
					v-if="isDuty"
				>
					<el-form-item
						label="作业情况："
						v-if="
							ticketDetail.state_ &&
							ticketDetail.state_.key === 'opl_close'
						"
					>
						<el-select
							v-model="form.close_note"
							placeholder="选择关闭原因"
						>
							<el-option
								v-for="item in noteOption"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item
						label="关闭处理："
						v-if="
							ticketDetail.state_ &&
							ticketDetail.state_.key === 'opl_close'
						"
					>
						<el-checkbox-group v-model="form.close_dos">
							<el-checkbox
								v-for="(item, index) in dosOption"
								:key="index"
								:label="item.id"
								>{{ item.name }}
							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="审批图片" v-if="audit_imgs_show" required>
							<sc-upload-multiple v-model="fileurl" @imagesDel="imagesDel" @imagesChange="imagesChange" draggable :limit="9" tip="最多上传9个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
					</el-form-item>
					<el-form-item label="开始图片" v-if="audit_work_show" required>
							<sc-upload-multiple v-model="fileurl2" @imagesDel="imagesDel2" @imagesChange="imagesChange2" draggable :limit="9" tip="最多上传9个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
					</el-form-item>
					<el-form-item label="处理意见">
						<el-input
							v-model="form.suggestion"
							clearable
						></el-input>
					</el-form-item>
				</el-form>
				<div style="text-align: right">
					<el-button
						v-if="ticketDetail.in_add_node && isDuty"
						class="filter-item"
						type="primary"
						@click="addNodeHandler('2')"
						>加签处理
					</el-button>
				</div>
				<div style="display: flex; justify-content: space-between">
					<div>
						<el-button
							type="primary"
							@click="addNode"
							v-if="!ticketDetail.in_add_node && isDuty"
							>加签</el-button
						>
						<el-button
							v-if="
								isDuty &&
								ticketDetail.state_ &&
								ticketDetail.state_.enable_deliver
							"
							type="primary"
							plain
							@click="deliverNode"
							>转交
						</el-button>
						<el-button
							v-if="
								itemDetail.ticket_ &&
								itemDetail.ticket_.state_.type === 1 &&
								isOwn
							"
							type="danger"
							@click="handleClose('2')"
							>关闭
						</el-button>
						<el-button
							v-if="
								itemDetail.ticket_ &&
								itemDetail.ticket_.state_.enable_retreat &&
								isOwn &&
								itemDetail.ticket_.state_.type !== 1
							"
							type="danger"
							@click="handleClose('1')"
						>
							撤回
						</el-button>
					</div>
					<div v-if="isDuty && !ticketDetail.in_add_node">
						<el-button
							v-if="
								itemDetail.ticket_ &&
								itemDetail.ticket_.state &&
								itemDetail.ticket_.state_.type == 1
							"
							type="primary"
							plain
							@click="itemDetailEdtil"
							>前往编辑
						</el-button>

						<el-button
							:loading="submitLoading"
							:disabled="submitLoading"
							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 class="handleWrap"  v-if="type!=='show'&&type=='showMy'">
				<scTitle title="处理"></scTitle>
				<div style="display: flex;justify-content: space-between;">
					<div>
						<el-button 
							v-if="itemDetail.ticket_&&itemDetail.ticket_.state_.type === 1 && userId === itemDetail.create_by"
							type="danger"
							@click="handleClose('2')"
						>关闭
						</el-button>
						<el-button
						v-if="itemDetail.ticket_&&itemDetail.ticket_.state_.enable_retreat &&userId ===itemDetail.ticket_.create_by &&itemDetail.ticket_.state_.type !== 1"
						type="danger"
						@click="handleClose('1')"
						>
						撤回
						</el-button>
					</div>
					<div>
						<el-button
						v-if="itemDetail.ticket_&& itemDetail.ticket_.state && itemDetail.ticket_.state_.type==1"
						type="primary" plain
						@click="itemDetailEdtil">前往编辑
						</el-button>
					</div>
				</div>
				
			</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="作业许可证详情"
		:close-on-click-modal="false"
	>
		<sc-fire :id="projectId"></sc-fire>
	</el-drawer>
	<el-dialog v-model="limitedRetreat" :title="handleTitle">
		<el-form
			ref="Form"
			:model="handleForm"
			label-width="100px"
			label-position="right"
		>
			<el-form-item :label="handleLabel">
				<el-input
					type="textarea"
					:rows="3"
					v-model="handleForm.suggestion"
					placeholder="原因"
				/>
			</el-form-item>
		</el-form>
		<div style="text-align: center">
			<el-button class="filter-item" type="" @click="handleCancel"
				>取消</el-button
			>
			<el-button class="filter-item" type="primary" @click="handleSubmit"
				>确定</el-button
			>
		</div>
	</el-dialog>
</template>
<script>
import workDetails from "./details.vue";
import workStep from "./steps.vue";
import showDialog from "../rpm/rpj_show.vue";
import visitDialog from "../vm/visit_detial.vue";

export default {
	components: {
		workDetails,
		workStep,
		showDialog,
		visitDialog,
	},
	name: "ticketdetail",
	data() {
		return {
			handleForm: {
				suggestion: "",
			},
			handleLabel: "撤回原因",
			handleTitle: "撤回工单",
			limitedRetreat: false,
			ticketId: "", //工单id
			projectId: "", //对应项目的id
			mainLoading: false,
			userName: "",
			itemDetail: {},
			ticketDetail: {},
			employeeLists: [],
			operationBtn: [],
			routepackes: [],
			fileurl:[],
			fileurl2:[],
			form: {
				suggestion: "",
				close_note: "",
				close_dos: [],
			},
			audit_imgs:[],
			work_imgs:[],
			addForm: {
				suggestion: "",
				toadd_user: "",
			},
			deliverForm: {
				suggestion: "",
				target_user: "",
			},
			rpjShow: false,
			visitShow: false,
			limitedAdd: false,
			showLimited: false,
			limitedDeliver: false,
			limitedUserSelect: false,
			audit_imgs_show:false,
			audit_work_show: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,
			userId: this.$TOOL.data.get("USER_INFO").id,
			isOwn: false,
			isDuty: false,
		};
	},
	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;
	},
	mounted() {
		this.submitLoading = false;
		if (this.cateType === "visit") {
			this.getVisit();
		} else if (this.cateType === "rpj") {
			this.getRpj();
		} else if (this.cateType === "routepack") {
			this.getRoutePack();
		} else {
			this.getOpl();
		}
		this.getticketItem();
		this.getBtns();
	},
	methods: {
		imagesDel(index){
			this.audit_imgs.splice(index,1)
		},
        imagesChange(data){
			this.audit_imgs = data;
		},
		imagesDel2(index){
			this.work_imgs.splice(index,1)
		},
        imagesChange2(data){
			this.work_imgs = data;
		},
		itemDetailEdtil() {
			let itemDetail = this.itemDetail;
			if (this.cateType === "opl") {
				this.$router.push({
					name: itemDetail.cate_code,
					query: { oplId: itemDetail.id },
				});
			} else if (this.cateType === "rpj") {
				this.$router.push({
					name: "rpjadd",
					query: {
						rpjid: itemDetail.id, //访问项目id
					},
				});
			} else if (this.cateType === "visit") {
				this.$router.push({
					name: "vistoradd",
					query: {
						visitid: itemDetail.id, //访问项目id
					},
				});
			}
		},
		handleClose(index) {
			if (index === "1") {
				this.handleTitle = "撤回工单";
				this.handleLabel = "撤回原因";
			} else {
				this.handleTitle = "关闭工单";
				this.handleLabel = "关闭原因";
			}
			this.limitedRetreat = true;
			// this.ticketId = this.itemDetail.id;
		},
		handleCancel() {
			this.limitedRetreat = false;
		},
		handleSubmit() {
			let res = "";
			let that = this;
			that.$confirm("确认" + that.handleTitle + "吗?", "温馨提示", {
				confirmButtonText: "确认",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					if (that.handleTitle === "撤回工单") {
						that.$API.wf.ticket.ticketRetreat
							.req(that.ticketId, that.handleForm)
							.then((res) => {
								that.limitedRetreat = false;
								window.location.reload();
							});
					} else {
						that.$API.wf.ticket.ticketClose
							.req(that.ticketId, that.handleForm)
							.then((res) => {
								that.limitedRetreat = false;
								window.location.reload();
							});
					}
				})
				.catch((err) => {
					that.limitedRetreat = false;
				});
		},
		//关闭工作
		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() {
			this.mainLoading = true;
			this.$API.wf.ticket.ticketItem
				.req(this.ticketId)
				.then((res) => {
					this.mainLoading = false;
					this.ticketDetail = res;
					if (this.ticketDetail.state_.key == "opl_close") {
						// 如果是作业关闭,展示需要提交的表单
						this.getCloseDos();
					}
					// 判断是不是我的或该我处理的
					if (this.ticketDetail.create_by == this.userId) {
						this.isOwn = true;
					}
					let participant = this.ticketDetail.participant;
					if (
						participant == this.userId ||
						participant.indexOf(this.userId) > -1
					) {
						this.isDuty = true;
					}
				})
				.catch((e) => {
					this.mainLoading = false;
				});
		},
		//获取应有的流转
		getBtns() {
			let that = this;
			that.audit_imgs_show = false;
			that.$API.wf.ticket.ticketTransitions
				.req(that.ticketId)
				.then((res) => {
					that.operationBtn = res;
					if(res.length>0){
						for (let i = 0; i < res.length; i++) {
							if(res[i].on_submit_func=="apps.opm.services.check_opl_audit_imgs"){
								that.audit_imgs_show = true;
							}
							if(res[i].on_submit_func=="apps.opm.services.check_opl_work_imgs"){
								that.audit_work_show = true;
							}
						}
					}
					
				});
		},
		//访客详情
		getVisit() {
			this.$API.vm.visit.read.req(this.projectId).then((res) => {
				this.itemDetail = res;
			});
		},
		getRoutePack() {
			let that = this;
			this.$API.mtm.routepack.item.req(this.projectId).then((res) => {
				console.log("routepackitem", res);
				this.$API.mtm.route.list
					.req({ page: 0, material: res.material,routepack:res.id})
					.then((res) => {
						that.routepackes = res;
					});
			});
		},
		//入厂项目详情
		getRpj() {
			this.$API.rpm.rpj.item.req(this.projectId).then((res) => {
				this.itemDetail = res;
			});
		},
		//许可证详情
		getOpl() {
			let that = this;
			that.$API.opm.opl.read.req(that.projectId).then((res) => {
				that.itemDetail = res;
				that.operationId = res.operation;
				if(res.audit_imgs.length>0){
					that.audit_imgs = res.audit_imgs;
					res.audit_imgs_.forEach((item) => {
						let obj = {};
						Object.assign(obj, item);
						obj.url = item.file;
						that.fileurl.push(obj)
					});
				}
			});
		},
		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.submitLoading = true;
			if (this.ticketDetail.state_.key === "opl_close") {
				params.ticket_data.close_note = this.form.close_note;
				params.ticket_data.close_dos = this.form.close_dos;
			}
			if(this.audit_imgs_show){
				params.ticket_data.audit_imgs = this.audit_imgs;
			}
			this.$API.wf.ticket.ticketHandle
				.req(this.ticketId, params)
				.then((res) => {
					if (res.err_msg) {
					} else {
						this.$router.push("dutywork");
						this.submitLoading = false;
					}
				})
				.catch((e) => {
					this.submitLoading = false;
				});
		},
		reStart() {
			this.$API.wf.ticket.retryScript.req(this.ticketId).then((res) => {
				// this.$router.push("dutywork");
				this.$router.back(-1);
				this.$message.success("任务执行下发成功");
			});
		},
	},
};
</script>

<style scoped>
#adminui-main > .el-container {
	position: relative !important;
}
.el-main {
	padding-bottom: 200px;
}
.ticketRetry {
	right: 20px;
	top: 30px;
	position: absolute;
}
.handleWrap {
	position: absolute;
	min-height: 100px;
	padding: 10px;
	width: 100%;
	margin: 0;
	bottom: 0;
	left: 0px;
	right: 0px;
	z-index: 10;
}
</style>
