<template>
	<div style="background: #fff; padding: 20px;">
		<div class="record-container"><span>处理记录</span></div>
		<div class="record-content">
			<el-table
				:data="opinions"
				:row-key="getRowKeys"
				style="width: 100%;"
				border
				header-cell-class-name="done-header-row"
				row-class-name="done-row"
				size="medium"
				:default-sort="{ prop: 'createTime,completeTime', order: 'descending' }"
			>
				<el-table-column width="50" align="center" label="序号">
					<template slot-scope="scope">
						<span>{{ opinions.length - scope.$index }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="taskName"
					label="审批节点"
					width="170"
					align="center"
					show-overflow-tooltip
				></el-table-column>

				<el-table-column
					prop="qualfiedNames"
					label="待审批人"
					show-overflow-tooltip
					width="110"
					align="center"
				>
					<template slot-scope="{ row }">
						<span
							v-if="
								row.status != 'awaiting_check' &&
								qualfiedsName(row.qualfiedNames, true) < 2
							"
							>{{ row.qualfiedNames }}</span
						>
						<span
							v-if="
								row.status === 'awaiting_check' &&
								row.qualfieds &&
								row.qualfieds.length === 1 &&
								!row.qualfieds[0].users
							"
							>{{ row.qualfiedNames }}</span
						>
						<el-popover
							placement="right"
							popper-class="right-popover"
							trigger="hover"
							v-if="
								row.status == 'awaiting_check' ||
								qualfiedsName(row.qualfiedNames, true) > 1
							"
						>
							<div>
								<p class="qualfied_names">名称</p>
								<div
									class="btn__wrap"
									v-if="isQualfiedListHasUser(row.qualfieds)"
								>
									<p v-for="(item, index) in row.qualfieds" :key="index">
										<el-tooltip
											class="item"
											effect="light"
											placement="top"
											v-if="item.users"
											:content="item.users"
										>
											<el-button plain size="mini">{{ item.name }}</el-button>
										</el-tooltip>
										<el-button v-if="!item.users" plain size="mini">{{
											item.name
										}}</el-button>
									</p>
								</div>
								<div class="btn__wrap" v-else>
									<p
										v-for="(item, index) in qualfiedsName(
											row.qualfiedNames,
											false
										)"
										:key="index"
									>
										<el-button plain size="mini">{{ item }}</el-button>
									</p>
								</div>
							</div>
							<i
								class="el-icon-more qualfied-more__icon"
								slot="reference"
								v-if="
									isQualfiedListHasUser(row.qualfieds) ||
									qualfiedsName(row.qualfiedNames, true) > 1
								"
							></i>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column
					prop="auditorName"
					label="处理人"
					width="110"
					align="center"
					show-overflow-tooltip
				></el-table-column>

				<el-table-column
					align="center"
					label="处理情况"
					width="140"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.isRead == 0 && scope.row.statusVal == '待审批'"
							>待阅</span
						>
						<span
							v-if="scope.row.isRead == 1 && scope.row.statusVal == '待审批'"
							>已阅</span
						>
						<span v-if="scope.row.statusVal != '待审批'">{{
							scope.row.statusVal
						}}</span>
					</template>
				</el-table-column>

				<el-table-column label="处理意见" show-overflow-tooltip align="center">
					<template slot-scope="scope">
						<strong
							><span style="white-space: pre-wrap;">{{
								scope.row.opinion
							}}</span></strong
						>
						<br />
						<div
							class="div_fj"
							v-if="scope.row.files && scope.row.files.length != 0"
						>
							<div class="title">附件：</div>
							<div
								v-for="(item, index) in scope.row.files"
								:key="index"
								style="cursor: pointer;"
							>
								<el-tag @click="search(item)">{{ item.name }}</el-tag>
							</div>
						</div>
						<br />
						<div
							class="div_fj"
							v-if="scope.row.zfiles && scope.row.zfiles.length != 0"
						>
							<span class="title">正文：</span>
							<span
								style="float: left;"
								v-for="(item, index) in scope.row.zfiles"
								:key="index"
							>
								<span v-if="index == 0">
									<span class="files fj_right" @click="search(item)">{{
										item.name
									}}</span>
									<br />
								</span>
								<span v-if="index != 0">
									<span class="files fj_left" @click="search(item)">{{
										item.name
									}}</span>
									<br />
								</span>
							</span>
						</div>
					</template>
				</el-table-column>

				<el-table-column
					prop="completeTime"
					label="操作时间"
					width="170"
					align="center"
					show-overflow-tooltip
				></el-table-column>

				<el-table-column
					align="center"
					label="持续时间"
					width="110"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ formatTimeLag(scope.row) }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="90" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.formData && scope.row.status != 'awaiting_check'" @click="previewNodeForm(scope.row)" >表单</el-button>
            </template>
        </el-table-column> -->
			</el-table>
		</div>

		<el-dialog
			:visible.sync="previewNodeFormDialogVisible"
			:title="opinionTaskName + '-审批表单'"
			width="80%"
			:close-on-click-modal="false"
			:before-close="closeFromDialog"
		>
			<DoneFormContent
				ref="doneFormContent"
				v-if="opinionSelectNodeId"
				:instId="opinionInstId"
				:nodeId="opinionSelectNodeId"
				:taskId="opinionTaskId"
				:defId="opinionProcDefId"
				:pData="opinionFormData"
			/>
			<br />
		</el-dialog>

		<!-- 预览文件-->
		<FilePreview ref="filePreview" />
	</div>
</template>
<script>
import { mapState } from 'vuex';
import FilePreview from '@/components/common/FilePreview.vue';
import DoneFormContent from '@/components/flow/doneFormContent.vue';
import { Base64 } from 'js-base64';

export default {
	name: 'processRecord',
	components: { FilePreview, DoneFormContent },
	props: {
		instId: String,
		taskId: String,
		referOpinion: Boolean,
		nodeType: String,
		defId: String,
		nodeId: String,
		myReadType: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			src: '',
			data: { taskId: '', referOpinion: false },
			fileId: '',
			fileTree: '',
			// 获取row的key值
			getRowKeys(row) {
				return row.id;
			},
			previewNodeFormDialogVisible: false,
			opinionSelectNodeId: '',
			opinionInstId: '',
			opinionTaskId: '',
			opinionFormData: '',
			opinionTaskName: '',
			opinionProcDefId: '',
		};
	},
	watch: {
		instId: function (newVal, oldVal) {
			this.data.instId = newVal; //newVal即是instId
			this.data.taskId = this.taskId;
			this.data.referOpinion = this.referOpinion;
			this.data.nodeType = this.nodeType;
			this.data.defId = this.defId;
			this.data.nodeId = this.nodeId;
			if (this.myReadType === 'request') {
				this.data.isRequest = true;
			}
			this.$store.dispatch('storeProcess/getOpinionsById', this.data);
		},
	},
	computed: mapState({
		opinions: state => state.storeProcess.opinions,
	}),
	methods: {
		qualfiedsName(names, isLength) {
			// if (names && isLength) {
			// 	return names.split(',').length;
			// }
			// if (names && !isLength) {
			// 	return names.split(',');
			// }
			if (names) {
				if (isLength) return names.split(',').length;
				else return names.split(',');
			}
		},
		isQualfiedListHasUser(data) {
			if (Array.isArray(data)) {
				for (let i = 0; i < data.length; i++) {
					if (data[i].users) {
						return true;
					}
				}
				return false;
			}
		},
		closeFromDialog() {
			this.previewNodeFormDialogVisible = false;
			this.opinionSelectNodeId = '';
			this.opinionInstId = '';
			this.opinionTaskId = '';
			this.opinionFormData = '';
			this.opinionTaskName = '';
		},
		previewNodeForm(row) {
			this.previewNodeFormDialogVisible = true;
			this.opinionSelectNodeId = row.taskKey;
			this.opinionInstId = row.procInstId;
			this.opinionTaskId = row.taskId;
			this.opinionProcDefId = row.procDefId;
			this.opinionTaskName = row.taskName;
			this.opinionFormData = JSON.parse(Base64.decode(row.formData));
		},
		//查看附件
		formatTimeLag(row) {
			let endTimes = 0;
			if (!row.completeTime) {
				endTimes = new Date().getTime();
			} else {
				endTimes = new Date(row.completeTime).getTime();
			}
			let difference = endTimes - new Date(row.createTime).getTime();
			let r = '';
			////计算出相差天数
			let days = Math.floor(difference / (24 * 3600 * 1000));
			//计算出小时数
			let leave1 = difference % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
			let hours = Math.floor(leave1 / (3600 * 1000));
			//计算相差分钟数
			let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
			let minutes = Math.floor(leave2 / (60 * 1000));
			//计算相差秒数
			let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
			let seconds = Math.round(leave3 / 1000);
			if (days > 0) r += days + '天';
			if (hours > 0) r += hours + '小时';
			if (days > 0) {
				return r;
			}
			if (minutes > 0) r += minutes + '分钟';
			if (hours > 0) {
				return r;
			}
			if (seconds > 0) r += seconds + '秒';
			if (minutes == 0 && seconds >= 0) {
				return '小于1分钟';
			}
			//r.slice(0, r.indexOf('时'));
			return r;
		},
		search(item) {
			this.$refs.filePreview.preview(item);
		},
		getOpinion(opinion) {
			return Base64.decode(opinion);
		},
	},
	created() {
		if (this.instId) {
			this.data.instId = this.instId;
			this.data.taskId = this.taskId;
			this.data.referOpinion = this.referOpinion;
			this.data.nodeType = this.nodeType;
			this.data.defId = this.defId;
			this.data.nodeId = this.nodeId;
			//类型为我的请求时添加参数isRequest进行过滤
			if (this.myReadType === 'request') {
				this.data.isRequest = true;
			}
			this.$store.dispatch('storeProcess/getOpinionsById', this.data);
		}
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.div_fj {
	text-align: left;
	padding: 5px 0px;
}

.fj_left {
	padding: 0 15px;
	border-left: 1px solid #d8d8d8;
}

.fj_right {
	padding: 0 15px 0 0;
}

.title {
	display: block;
	color: #a2a2a2;
	font-weight: bold;
}

.record-container {
	border-bottom: 1px solid #ebeef5;
	padding-bottom: 10px;
}

.record-container > span {
	border-left: 3px solid $--theme-color;
	font-weight: bold;
	font-size: 14px;
	padding-left: 10px;
	color: #666;
}

.record-content {
	padding: 20px 0;
}

.files {
	cursor: pointer;
	font-size: 12px;
	color: #5eade6;
}

.files:hover {
	color: $--theme-color;
}

/deep/.el-table .cell.el-tooltip {
	min-width: 50px;
}

/deep/.el-table .cell {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
	line-height: 23px;
	padding-left: 10px;
	padding-right: 10px;
}
/deep/.owner-span {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.btn__wrap {
	display: flex;
	flex-wrap: wrap;
	p {
		margin: 0;
	}
}
.qualfied-more__icon {
	&:hover {
		cursor: pointer;
	}
}
</style>
