<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">
				<el-row>
					<el-col :span="24">
						<div class="flex-box flex-v-ce">
							<userImage
								style="margin-right: 15px;"
								width="50px"
								height="50px"
								:user_name="workDetailData.owner_name"
								:img_url="workDetailData.owner_img_url"
							></userImage>
							<div>
								<div style="line-height: 25px;">
									{{workDetailData.owner_name}}发布的{{ $getTypsName(workDetailData.pt_id) }}任务
									<span v-if="workDetailData.point_config.base_point > 0" class="red">+{{ workDetailData.point_config.base_point }}</span>
									<span v-else class="green">{{ workDetailData.point_config.base_point }}</span>
									{{ $getTypsName(workDetailData.pt_id) }}
								</div>
								<div style="color: #909399; line-height: 25px;">
									<b>{{ workDetailData.receiver_name }}</b>
									{{ workDetailData.status_mark }}
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				
				<ul>
					<li class="flex-box">
						<div class="label">任务内容</div>
						<div class="content_text">{{ workDetailData.task_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.status == 2 && workDetailData.receiver_id != 0">
						<div class="label">抢单人</div>
						<div class="content_text">{{ workDetailData.receiver_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.status == 3 && workDetailData.receiver_id != 0">
						<div class="label">完成人</div>
						<div class="content_text">{{ workDetailData.receiver_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.task_remark">
						<div class="label">任务备注</div>
						<div class="content_text">{{ workDetailData.task_remark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.task_file_list && workDetailData.task_file_list.length > 0">
						<div class="label"></div>
						<div class="content_text">
							<el-image
								v-for="(item, index) in workDetailData.task_file_list"
								:key="index"
								style="width: 100px; height: 100px;margin-right:8px"
								:src="item"
								:preview-src-list="workDetailData.task_file_list"
							></el-image>
						</div>
					</li>

					<li class="flex-box" v-if="workDetailData.point_config">
						<div class="label">任务积分</div>
						<div class="content_text">{{ workDetailData.point_config.base_point }}{{ $getTypsName(workDetailData.pt_id) }}</div>
					</li>
					<li class="flex-box">
						<div class="label">审批人</div>
						<div class="content_text">{{ workDetailData.reviewer_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.owner_name">
						<div class="label">发布人</div>
						<div class="content_text">{{ workDetailData.owner_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.create_time">
						<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">{{ workDetailData.end_time }}</div>
					</li>
					<li class="flex-box-ce" v-if="workDetailData.total_chance">
						<div class="label">抢单人数
							<el-tooltip class="item" effect="dark" content="已抢单人数/可抢单名额" placement="top-start">
								<i class="el-icon-warning fontColorC"></i>
							</el-tooltip>
						</div>
						<div class="content_text"><span class="blue">{{workDetailData.total_chance-workDetailData.chance}}</span> / {{ workDetailData.total_chance }}   <span class="blue cursor" @click="isShowTable=true" v-if="workDetailData.total_chance!=workDetailData.chance">查看详情</span></div>
					</li>
					<li class="flex-box" v-if="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.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.department_info">
						<div class="label">可见范围</div>
						<div class="flex-1" v-if="workDetailData.department_info.length > 0||workDetailData.employee_info.length > 0" style="background-color: rgb(250, 251, 252);padding: 8px;border: 5px;">
							<div class="content_text" style="margin-bottom: 10px;" v-if="workDetailData.department_info.length > 0">
								<div class="fontColorC">指定部门</div>
								<span v-for="(item, index) in workDetailData.department_info" :key="index">{{ item.name }}<span v-if="workDetailData.department_info.length - 1 > index">,</span></span>
							</div>
							<div class="content_text"  v-if="workDetailData.employee_info.length > 0">
								<div class="fontColorC">指定人员</div>
								<span v-for="(item, index) in workDetailData.employee_info" :key="index">
									{{ item.name }}
									<span v-if="workDetailData.employee_info.length - 1 > index">,</span>
								</span>
							</div>
						</div>
						<div class="content_text" v-else>全公司</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.remark">
						<div class="label">完成备注</div>
						<div class="content_text">{{ workDetailData.complete_task.remark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.files && workDetailData.complete_task.files.length > 0">
						<div class="label"></div>
						<div class="content_text">
							<el-image
								v-for="(item, index) in workDetailData.complete_task.files"
								:key="index"
								style="width: 100px; height: 100px;margin-right:8px"
								:src="item"
								:preview-src-list="workDetailData.complete_task.files"
							></el-image>
						</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>
			</div>
			<div style="height: 60px;border-top: 1px #efefef solid;padding: 0 20px;text-align: right">
				<el-button style="margin-top: 8px;" :disabled="loading" type="primary" @click="activeTask" v-if="workDetailData.composite_state==1&&userInfo.id!=workDetailData.owner_id&&!userInfo.is_creator">抢任务</el-button>
			</div>
		</el-drawer>
		<!-- 对齐我的目标详情 -->
		<el-dialog title="抢单人员详情" :visible.sync="isShowTable" :append-to-body="true" width="750px" top="5%">
		  <div>
		      <div class="fontColorC" style="padding: 10px;font-size: 16px;">
				  {{tableList.length}}人已抢单，其中<span class="blue">{{returnNum}}</span>人已完成
			  </div>
			  <el-table :data="tableList" style="width: 100%;height: 550px;overflow: auto;">
					<el-table-column prop="name" label="执行人">
					  <template slot-scope="scope">
						  <div class="flex-box">
							<userImage :user_name="scope.row.employee_name" :img_url="scope.row.img_url" width="40px" height="40px"></userImage>
							<span style="line-height: 40px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
						  </div>
					  </template>
					</el-table-column>
					<el-table-column label="部门" prop="dept"></el-table-column>
					<el-table-column label="抢单时间" prop="create_time"></el-table-column>
					<el-table-column label="执行情况" width="100px">
					  <template slot-scope="scope">
						 <span v-if="scope.row.status==1" class="orange">进行中</span>
						 <span v-if="scope.row.status==2" class="blue">已完成</span>
						 <span v-if="scope.row.status==3" class="fontColorB">退回</span>
						 <span v-if="scope.row.status==4" class="green">已审批</span>
						 <span v-if="scope.row.status==5" class="fontColorB">发布者已撤回</span>
					  </template>
					</el-table-column>
					<template slot="empty">
						<NoData></NoData>
					</template>
			  </el-table>
		  </div>
		  <div class="flex-box-end" style="margin-top: 20px;">
		  	<el-button @click="isShowTable=false">关 闭</el-button>
		  </div>
		</el-dialog>
	</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: { base_point: '' }
			},
			userInfo:this.$getUserData(),
			isShowTable:false,
			tableList:[],
		};
	},
	computed:{
		returnNum(){
			let num=0
			this.tableList.forEach(item=>{
				if(item.status==2||item.status==4){
				   num++
				}
			})
			return num
		}
	},
	mounted() {
		this.getData();
		this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
	},
	methods: {
		activeTask(){
			this.$axios('post', '/api/integral/task/exist',{task_id:this.id}).then(res => {
				let exist=res.data.data.exist
				if(exist){
					this.$message.warning("你已经抢到该任务了，请前往【我抢到的】查看")
				}else{
					this.collectTask()
				}
			})
		},
		// 领取任务
		collectTask() {
			this.$axios('POST', '/api/integral/task', { task_id: this.id }).then(res => {
				this.$message.success('抢单成功!');
				this.getData();
			})
		},
		// 关闭弹窗
		handleClose() {
			this.$emit('update:visible', false);
		},
		// 获取数据
		getData() {
			this.loading = true;
			let data = { task_id: this.id };
			this.$axios('get', '/api/integral/task', data).then(res => {
				this.workDetailData = res.data.data;
				this.tableList=res.data.data.works
			}).finally(() => {
				this.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 {
		border-top: 1px solid #f1f1f1;
		padding: 12px 0;
		& li {
			padding: 6px 0;
		}
		& .label {
			width: 80px;
			text-align: left;
			color: #909399;
		}
		& .content_text {
			flex: 1;
		}
	}
}
.details_content {
	padding: 20px;
	height: calc(100vh - 120px);
	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;
	height: 60px;
	line-height: 60px;
	padding: 0 20px;
	border-bottom: 1px #efefef solid;
}
</style>
