<template>
	<el-container>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:data="list"
				row-key="id"
				stripe
				highlightCurrentRow
				hidePagination
			>
				<el-table-column label="ID" prop="id"></el-table-column>
				<el-table-column label="工单标题" prop="title"></el-table-column>
				<el-table-column label="流水号" prop="sn"></el-table-column>
				<el-table-column label="当前状态">
					<template #default="scope">
						{{ scope.row.state_.name }}
					</template>
				</el-table-column>
				<el-table-column label="进行状态" prop="sort">
					<template #default="scope">
						{{ actstate_[scope.row.act_state] }}
					</template>
				</el-table-column>
				<el-table-column label="关联工作流" prop="title">
					<template #default="scope">
						{{ scope.row.workflow_.name }}
					</template>
				</el-table-column>
				<el-table-column label="处理人类型">
					<template #default="scope">
						{{ participant_[scope.row.participant_type] }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="create_time"></el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="120">
					<template #default="scope">
						<el-button type="text" size="small" @click="handleShow(scope.row)">查看详情</el-button>
						<!--创建人在初始状态-->
						<el-link
							v-if="scope.row.state_.type===1&&userId===scope.row.create_by"
							type="danger"
							@click="handleClose(scope,'2')"
						>
							关闭
						</el-link>
						<!--如果state_.retreat/state_.type==1处于草稿状态 -->
						<el-link
							v-if="scope.row.state_.enable_retreat&&userId===scope.row.create_by&&scope.row.state_.type!==1"
							type="danger"
							@click="handleClose(scope,'1')"
						>
							撤回
						</el-link>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<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>
	</el-container>
</template>

<script>
	export default {
		name: "state",
		data() {
			return {
				list: [],
				userId:this.$TOOL.data.get("USER_INFO").id,
				actstate_: {
					0: "草稿中",
					1: "进行中",
					2: "被退回",
					3: "被撤回",
					4: "已完成",
					5: "已关闭",
				},
				participant_: {
					0: "无处理人",
					1: "个人",
					2: "多人",
				},
				handleForm: {
					suggestion: '',
				},
				handleLabel: '撤回原因',
				handleTitle: '撤回工单',
				ticketId:null,
				limitedRetreat:false,
			};
		},
		mounted() {
			this.getList();
			this.userId = this.$TOOL.data.get("USER_INFO").id;
		},
		methods: {
			handleShow(row) {
				var catetype = row.workflow_.key;
				switch (catetype) {
					case 'visit':
						this.$router.push({
							name: "visitdetail",
							query: {
								id: row.id,
								type: 'show',
								visitID: row.ticket_data.visit
							},
						});
						break;
				}
			},
			async getList() {
				let res = await this.$API.wf.ticket.list.req({category: "owner", page: 0});
				console.log(res);
				this.list = res;
			},
			handleClose(scope, index) {
				if (index === '1') {
					this.handleTitle = '撤回工单';
					this.handleLabel = '撤回原因';
				} else {
					this.handleTitle = '关闭工单';
					this.handleLabel = '关闭原因';
				}
				this.limitedRetreat = true;
				this.ticketId = scope.row.id;
			},
			handleCancel() {
				this.limitedRetreat = false;
			},
			handleSubmit() {
				let res = '';
				let that = this;
				that.$confirm('确认'+that.handleTitle+'吗?', "温馨提示", {
					confirmButtonText: "确认",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(async () => {
						if (that.handleTitle === '撤回工单') {
							res = that.$API.wf.ticket.ticketRetreat.req(that.ticketId, that.handleForm);
						} else {
							res = that.$API.wf.ticket.ticketClose.req(that.ticketId, that.handleForm);
						}
						if(res.err_msg){
							that.getList();
						}else{
							that.limitedRetreat = false;
							that.getList();
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},
	};
</script>

<style scoped>
</style>
