<template>
	<div>
		<!-- 重复任务详情弹窗 -->
		<el-drawer :visible.sync="Delay_to_open" :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
			<div class="details_title">{{ title }}</div>
			<div class="details_content" v-if="workDetailData" v-loading="loading">
				<ul>
					<li class="flex-box">
						<div class="label">任务内容</div>
						<div class="content_text">{{ workDetailData.name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">任务描述</div>
						<div class="content_text">{{ workDetailData.remark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData">
						<div class="label">执行周期</div>
						<div class="content_text">
							{{ workDetailData.task_expire_day }}{{ workDetailData.task_cycle == 1 ? '天' : workDetailData.task_cycle == 2 ? '周' : '月' }}
						</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config">
						<div class="label">任务积分</div>
						<div class="content_text">
							{{ workDetailData.point_config.base_point }}
							<span>{{ workDetailData.pt_id == 2 ? 'A分' : workDetailData.pt_id == 3 ? 'B分' : '' }}</span>
						</div>
					</li>
					<li class="flex-box" v-if="workDetailData.file_list && workDetailData.file_list.length > 0">
						<div class="label">附件</div>
						<div class="content_text">
							<el-image
								v-for="(item, index) in workDetailData.file_list"
								:key="index"
								style="width: 100px; height: 100px;margin-right:8px"
								:src="item"
								:preview-src-list="workDetailData.file_list"
							></el-image>
						</div>
					</li>
					<li class="flex-box">
						<div class="label">发布人</div>
						<div class="content_text">{{ workDetailData.owner_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">创建时间</div>
						<div class="content_text">{{ workDetailData.create_time }}</div>
					</li>
					<li class="flex-box">
						<div class="label">截止时间</div>
						<div class="content_text">
							<span v-if="workDetailData.task_cycle == '1'">每天{{ dayTime(workDetailData.task_cycle_value) }}截止</span>
							<span v-if="workDetailData.task_cycle == '2'">
								<span>每周{{ weekList[workDetailData.task_cycle_value - 1] }}截止</span>
							</span>
							<span v-if="workDetailData.task_cycle == '3'">每月{{ workDetailData.task_cycle_value }}号截止</span>
						</div>
					</li>

					<template slot-scope="scope">
						<span v-if="scope.row.task_cycle == '1'">每天0点自动发布，{{ dayTime(scope.row.task_cycle_value) }}截止</span>
						<span v-if="scope.row.task_cycle == '2'">
							<span>每周一自动发布，周{{ weekList[scope.row.task_cycle_value - 1] }}截止</span>
						</span>
						<span v-if="scope.row.task_cycle == '3'">每月1号自动发布，{{ scope.row.task_cycle_value }}号截止</span>
					</template>
					<li class="flex-box" v-if="workDetailData.point_config && workDetailData.point_config.ahead_award_point">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }}/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config && workDetailData.point_config.ahead_award_point_limit">
						<div class="label">奖分上限</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point_limit }}</div>
					</li>

					<li class="flex-box" v-if="workDetailData.point_config && workDetailData.point_config.timeout_deduction_point">
						<div class="label">逾期扣分</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }}/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config && workDetailData.point_config.timeout_deduction_point_limit">
						<div class="label">扣分上限</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point_limit }}</div>
					</li>
				</ul>
				<div v-show="workDetailData.point_config && workDetailData.point_config.item_info">
					<p class="row_title">规则依据</p>
					<el-row :gutter="10" v-if="workDetailData.point_config.rule_info">
						<el-col :span="4">规则分类</el-col>
						<el-col :span="19">{{ workDetailData.point_config.rule_info.name }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分规则</el-col>
						<el-col :span="19">{{ workDetailData.point_config.item_info.remark }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分</el-col>
						<el-col :span="19" v-show="workDetailData.point_config.item_info.min_point == workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} {{ $getTypsName(workDetailData.pt_id) }}
						</el-col>
						<el-col :span="19" v-show="workDetailData.point_config.item_info.min_point != workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} ~ {{ workDetailData.point_config.item_info.max_point }} {{ $getTypsName(workDetailData.pt_id) }}
						</el-col>
					</el-row>
				</div>
				<el-row style=" margin-bottom: 20px;">
					<el-col :span="24" style="line-height: 30px;">审批人</el-col>
					<el-col :span="24">
						<div style="display:flex">
							<userImage :user_name="workDetailData.reviewer_name" width="50px" height="50px" style=" margin-right: 15px;" fontSize="1"></userImage>
							<p style="margin: 0; line-height: 50px;">{{ workDetailData.reviewer_name }}</p>
						</div>
					</el-col>
				</el-row>
				<el-row v-if="workDetailData.target_info">
					<el-col :span="24" style="line-height: 30px;">执行人</el-col>
					<el-col :span="24">
						<div v-for="(item, index) in workDetailData.target_info" :key="index" style="margin-bottom: 10px;display:flex;">
							<userImage :user_name="item.name" width="50px" height="50px" style=" margin-right: 15px;" fontSize="1"></userImage>
							<p style="margin: 0; line-height: 50px;">{{ item.name }}</p>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-drawer>
	</div>
</template>

<script>
export default {
	name: 'repeatTaskDetailsPopup',
	props: {
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		id: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			Delay_to_open: false, //打开抽屉

			loading: false,
			workDetailData: {
				point_config:{
					rule_info:''
				}
			},
			weekList: ['一', '二', '三', '四', '五', '六', '日']
		};
	},
	mounted() {
		this.getData();
		this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
	},
	methods: {
		dayTime(item) {
			return item > 9 ? item + ': 00' : '0' + item + ': 00';
		},
		// 关闭弹窗
		handleClose() {
			this.$emit('update:visible', false);
		},
		// 获取数据
		getData() {
			let self = this;
			self.loading = true;
			let data = { schedule_id: this.id };
			self.$axios('get', '/api/integral/schedule', data)
				.then(res => {
					if (res.data.code == 1) {
						self.workDetailData = res.data.data;
					}
				})
				.finally(() => {
					self.loading = false;
				});
		}
	}
};
</script>
<style lang="scss" scoped="scoped">
.details_content {
	& .d_userMessage {
		margin-left: 10px;
	}
	& .d_userMessage div:nth-child(1) {
		font-size: 16px;
		margin-bottom: 8px;
	}
	& .d_userMessage div:nth-child(2) {
		font-size: 12px;
		color: #909399;
	}
	& .d_progress {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		margin-bottom: 10px;
	}
	& ul {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		& li {
			padding: 6px 0;
		}
		& .label {
			width: 80px;
			text-align: left;
			color: #909399;
		}
		& .content_text {
			flex: 1;
		}
	}
}
.fontColorF {
	color: #909399;
}
.details_content {
	padding: 20px;
	height: calc(100vh - 60px);
	overflow: auto;
	.row_title {
		position: relative;
		margin: 0 0 20px 0;
		padding-top: 12px;
		font-size: 16px;
		color: #303133;
		line-height: 22px;
	}
	.row_title:before {
		position: absolute;
		top: 0;
		content: ' ';
		width: 100%;
		border-top: 1px #f8f8f8 solid;
	}
	.el-row {
		margin-bottom: 10px;
		font-size: 14px;
		.el-col-4 {
			color: #606266;
		}
	}
}
.details_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
</style>
