<template>
	<div>
		<div class="box">
			<el-tabs v-model="active">
				<el-tab-pane label="待领取" name="unclaimed"></el-tab-pane>
				<el-tab-pane label="已领取" name="received"></el-tab-pane>
			</el-tabs>
			<div v-show="active === 'unclaimed'">
				<el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail">
					<el-table-column label="任务内容" prop="task_name">
						<template slot-scope="scope">
							<span class="font-flex-word" style="max-width: 200px;">{{scope.row.task_name}}</span>
						</template>
					</el-table-column>
					<el-table-column label="积分" prop="base_point">
						<template slot-scope="scope">
							<span v-if="scope.row.base_point > 0" class="red">+{{scope.row.base_point}} {{$getTypsName(scope.row.pt_id)}}</span>
							<span v-else class="green">{{scope.row.base_point}} {{$getTypsName(scope.row.pt_id)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="截止时间" prop="expire_time"></el-table-column>
					<el-table-column label="操作" prop="owner_id">
						<template slot-scope="scope">
							<el-link type="primary" :underline="false">查看</el-link>
						</template>
					</el-table-column>
					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
			</div>

			<div v-show="active === 'received'">
				<el-table :data="list" style="width: 100%" v-loading="loading" @row-click="openDetail">
					<el-table-column label="执行人" prop="receiver_id">
						<template slot-scope="scope">
							<div style="display:flex">
								<userImage
									class="fl"
									:id="scope.row.receiver_id"
									:user_name="scope.row.receiver_name"
									:img_url="scope.row.receiver_img_url"
									width="50px"
									height="50px"
								></userImage>
								<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.receiver_name }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="任务内容" prop="task_name">
						<template slot-scope="scope">
							<span class="font-flex-word" style="max-width: 200px;">{{scope.row.task_name}}</span>
						</template>
					</el-table-column>
					<el-table-column label="积分" prop="base_point">
						<template slot-scope="scope">
							<span v-if="scope.row.base_point > 0" class="red">+{{scope.row.base_point}} {{$getTypsName(scope.row.pt_id)}}</span>
							<span v-else class="green">{{scope.row.base_point}} {{$getTypsName(scope.row.pt_id)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="截止时间" prop="expire_time"></el-table-column>
					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
			</div>

			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:current-page="formData.page"
					:page-size="formData.page_size"
					:total="total"
				></el-pagination>
			</center>

			<el-drawer title="我是标题" :custom-class="'drawer_details'" :visible.sync="detailShow" :with-header="false" size="500px">
				<div class="details_title">任务详情</div>
				<div class="details_content" v-loading="detail_loading">
					<el-row style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
						<el-col :span="24">
							<div class="flex-box flex-v-ce">
								<userImage
									:user_name="active == 'unclaimed' ? detailInfo.owner_name : detailInfo.receiver_name"
									:img_url="active == 'unclaimed' ? detailInfo.owner_img_url : detailInfo.receiver_img_url"
									width="50px"
									height="50px"
								></userImage>
								<span style="line-height:50px; margin-left:10px;margin-right:4px;">
									{{ active == 'unclaimed' ? detailInfo.owner_name : detailInfo.receiver_name }}
								</span>
								<span class="red point" v-show="detailInfo.point_config.base_point >= 0">+{{ detailInfo.point_config.base_point }}</span>
								<span class="green point" v-show="detailInfo.point_config.base_point < 0">{{ detailInfo.point_config.base_point }}</span>
								<span style="margin-left: 5px;">{{ $getTypsName(detailInfo.pt_id)}}</span>
							</div>
						</el-col>
					</el-row>

					<el-row v-if="detailInfo.task_name !== ''">
						<el-col :span="4">任务内容</el-col>
						<el-col :span="20">{{ detailInfo.task_name }}</el-col>
					</el-row>

					<el-row v-if="detailInfo.task_remark !== ''">
						<el-col :span="4">任务描述</el-col>
						<el-col :span="20">{{ detailInfo.task_remark }}</el-col>
					</el-row>

					<!-- 发布时的图片 -->
					<el-row v-if="detailInfo.task_file_list !== null && detailInfo.task_file_list.length !== 0">
						<el-col :span="20" :offset="4">
							<el-image
								v-for="(item, index) in detailInfo.task_file_list"
								:key="index"
								style="width: 100px; height: 100px;margin-right:8px"
								:src="item"
								:preview-src-list="detailInfo.task_file_list"
							></el-image>
						</el-col>
					</el-row>
					<!-- <el-row v-if="detailInfo.task_file_list !== null && detailInfo.task_file_list.length !== 0">
						<el-col :span="20" :offset="4">
							<el-image style="width: 100px; height: 100px" :src="detailInfo.task_file_list[0]" :preview-src-list="detailInfo.task_file_list"></el-image>
						</el-col>
					</el-row> -->

					<el-row v-if="detailInfo.type_mark !== ''">
						<el-col :span="4">任务类型</el-col>
						<el-col :span="20">{{ detailInfo.type_mark }}</el-col>
					</el-row>

					<el-row v-if="$getTypsName(detailInfo.pt_id) !== ''">
						<el-col :span="4">积分类型</el-col>
						<el-col :span="20">{{ $getTypsName(detailInfo.pt_id) }}</el-col>
					</el-row>
					<el-row v-if="detailInfo.reviewer_name">
						<el-col :span="4">审批人</el-col>
						<el-col :span="20">{{ detailInfo.reviewer_name }}</el-col>
					</el-row>

					<el-row v-if="detailInfo.owner_name">
						<el-col :span="4">发布人</el-col>
						<el-col :span="20">{{ detailInfo.owner_name }}</el-col>
					</el-row>
					<el-row v-if="detailInfo.create_time">
						<el-col :span="4">发布时间</el-col>
						<el-col :span="20">{{ detailInfo.create_time }}</el-col>
					</el-row>

					<el-row v-if="detailInfo.expire_time !== ''">
						<el-col :span="4">截止时间</el-col>
						<el-col :span="20">{{ detailInfo.expire_time }}</el-col>
					</el-row>
					<el-row v-if="detailInfo.point_config.ahead_award_point">
						<el-col :span="4">提前奖分</el-col>
						<el-col :span="20">{{ detailInfo.point_config.ahead_award_point }}/天</el-col>
					</el-row>
					<el-row v-if="detailInfo.point_config.timeout_deduction_point">
						<el-col :span="4">逾期扣分</el-col>
						<el-col :span="20">{{detailInfo.point_config.timeout_deduction_point}}/天</el-col>
					</el-row>
					
					<div v-show="detailInfo.point_config && detailInfo.point_config.item_info">
						<p class="row_title">规则依据</p>
						<el-row :gutter="10" v-if="detailInfo.point_config.rule_info">
							<el-col :span="4">规则分类</el-col>
							<el-col :span="19">{{ detailInfo.point_config.rule_info.name }}</el-col>
						</el-row>
						<el-row v-if="detailInfo.point_config.item_info">
							<el-col :span="4">积分规则</el-col>
							<el-col :span="19">{{ detailInfo.point_config.item_info.remark }}</el-col>
						</el-row>
						<el-row v-if="detailInfo.point_config.item_info">
							<el-col :span="4">积分</el-col>
							<el-col :span="19" v-show="detailInfo.point_config.item_info.min_point == detailInfo.point_config.item_info.max_point">{{ detailInfo.point_config.item_info.min_point }}</el-col>
							<el-col :span="19" v-show="detailInfo.point_config.item_info.min_point != detailInfo.point_config.item_info.max_point">
								{{ detailInfo.point_config.item_info.min_point }} ~ {{ detailInfo.point_config.item_info.max_point }}
							</el-col>
						</el-row>
					</div>

					<!-- <el-row v-if="detailInfo.task_file_list !== null && detailInfo.task_file_list.length !== 0">
						<el-col :span="4">图片附件</el-col>
						<el-col :span="20">
							<el-image style="width: 100px; height: 100px" :src="detailInfo.task_file_list[0]" :preview-src-list="detailInfo.task_file_list"></el-image>
						</el-col>
					</el-row> -->

					<div
						style="position: absolute; bottom: 20px; display: block; right: 20px;"
						v-if="detailInfo.status == '1' && user_id != detailInfo.owner_id && detailInfo.reviewer_id != user_id && !this.$authoritys('creator')"
					>
						<el-button plain @click="detailShow = false">取消</el-button>
						<el-button type="primary" @click="collectTask" :loading="receiveLoad">领取任务</el-button>
					</div>
				</div>
			</el-drawer>
		</div>
	</div>
</template>

<script>

export default {
	name: 'get_task',
	data() {
		return {
			active: 'unclaimed',
			list: [],
			loading: false,
			receiveLoad: false,
			total: null,
			formData: {
				page: 1,
				page_size: 10
			},
			detailShow: false,
			detail_loading: false,
			detailInfo: {
				point_config: {},
				task_file_list: []
			},
			user_id: this.$getUserData().id
		};
	},
	mounted() {
		this.get_list();
	},
	
	watch: {
		active(val) {
			this.list = [];
			this.get_list();
		}
	},
	methods: {
		// 领取任务
		collectTask() {
			let self = this;
			self.receiveLoad = true;
			self.$axios('POST', '/api/integral/task', { task_id: this.detailInfo.id })
				.then(res => {
					if (res.data.code == 1) {
						self.$message.success('领取成功');
						self.list.forEach((element, index) => {
							if (element.id == self.detailInfo.id) {
								self.list.splice(index, 1);
							}
						});
						self.detailShow = false;
					} else {
						self.$message.error(res.data.msg);
					}
				})
				.finally(() => {
					self.receiveLoad = false;
				});
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.get_list();
		},

		// 打开详情弹窗
		openDetail(item) {
			this.detailShow = true;
			this.getDetailInfo(item);
		},
		// 获取详情信息
		getDetailInfo(item) {
			let self = this;
			self.detail_loading = true;
			let data = { task_id: item.id };
			self.$axios('get', '/api/integral/task', data)
				.then(res => {
					if (res.data.code == 1) {
						self.detailInfo = JSON.parse(JSON.stringify(res.data.data));
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.detail_loading = false;
				});
		},
		// 获取列表信息
		get_list() {
			let self = this;
			self.loading = true;
			let data = JSON.parse(JSON.stringify(this.formData));
			if (self.active == 'unclaimed') {
				data.hall_type = 'waiting';
			} else {
				data.hall_type = 'catch';
			}
			self.$axios('get', '/api/integral/task/hall', data)
				.then(res => {
					if (res.data.code == 1) {
						self.list = res.data.data.list;
						self.total = res.data.data.total;
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.loading = false;
				});
		},
	}
};
</script>

<style scoped lang="scss">
.box {
	min-height: calc(100vh - 184px);
	min-width: 800px;
	background-color: #fff;
	padding: 20px;
}
.details_content {
	.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;
		}
	}
}
::v-deep .el-table tr:hover {
	cursor: pointer;
}

.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>
