<template>
	<div>
		<div class="box">
			<el-tabs v-model="active">
				<el-tab-pane :disabled="loading" label="正在抢单" name="waiting"></el-tab-pane>
				<!-- <el-tab-pane :disabled="loading" label="抢单结束" name="catch"></el-tab-pane> -->
				<el-tab-pane :disabled="loading" label="我抢到的" name="myTask"></el-tab-pane>
			</el-tabs>

			<el-table :data="list" v-loading="loading" class="cursor" @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="积分" v-if="active=='myTask'">
					<template slot-scope="scope">
						<span class="red" v-if="scope.row.point_config.base_point > 0">
						   +{{ scope.row.point_config.base_point }} {{ scope.row.pt_name }}
						</span>
						<span class="green" v-else>
							{{ scope.row.point_config.base_point }} {{ scope.row.pt_name }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="积分" v-else>
					<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" v-if="active=='waiting'">
					<template slot-scope="scope">
						<el-link :underline="false">查看</el-link>
						<el-link type="primary" style="padding-left: 10px;" :underline="false" v-if="!userInfo.is_creator&&scope.row.owner_id!=userInfo.id&&scope.row.reviewer_id!=userInfo.id">抢任务</el-link>
					</template>
				</el-table-column>
				<el-table-column label="操作" prop="owner_id" v-if="active=='myTask'">
					<template slot-scope="scope">
						<el-link type="primary" v-if="scope.row.status==1" :underline="false" @click.stop="completeBtn(scope.row)">完成任务</el-link>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
				
			</el-table>
			
			<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>
		</div>
		
		
		<!-- 抢单任务详情弹窗 -->
		<rewardTaskDetailsPopup :visible.sync="detailShow"  v-if="detailShow" :id="detailId" :title="'任务详情'"></rewardTaskDetailsPopup>
		
		<!-- 详情弹窗 -->
		<taskDetailsPopup :visible.sync="showDetailPopup" v-if="showDetailPopup" :id="detailId" :title="'任务详情'"></taskDetailsPopup>
		
		<el-drawer :custom-class="'drawer_details'" :visible.sync="completeShow" wrapperClosable :with-header="false" size="500px">
			<div class="details_title flex-box-ce">
				<span class="flex-1">完成任务</span>
				<i  @click="completeShow=false" style="cursor: pointer;" class="el-icon-close"></i>
			</div>
			<div class="details_content">
				<el-form :model="detail_form" ref="detail_form" label-width="80px">
					<el-form-item label="任务备注" prop="remark" :rules="[{ required: true, message: '请填写任务备注(限200字)', trigger: 'blur' }]">
						<el-input v-model="detail_form.remark" type="textarea" :rows="4"  maxlength="200" show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<upload
							:headers="Xtoken"
							class="avatar-uploader"
							:action="'https://' + 'integralsys.oss-cn-shenzhen.aliyuncs.com'"
							:show-file-list="true"
							:file-list="detail_form.fileList"
							:on-success="handleFilesSuccess"
							:on-preview="onFilePreView"
							:before-upload="beforeUpload"
							:on-remove="onFileRemove"
							:limit="3"
							accept="image/jpeg,image/png"
							:multiple="true"
							ref="clearPicture"
						>
							<el-button size="small" type="primary">点击上传</el-button>
							（最多选择3张）
						</upload>
					</el-form-item>
					<el-form-item>
						<el-button @click="resetForm('detail_form')">取消</el-button>
						<el-button type="primary" @click="onSubmit('detail_form')">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import rewardTaskDetailsPopup from '@/views/common/rewardTaskDetailsPopup';
import taskDetailsPopup from '@/views/common/taskDetailsPopup'
import upload from '@/components/upload';
export default {
	components:{rewardTaskDetailsPopup,taskDetailsPopup,upload},
	name: 'get_task',
	data() {
		return {
			active: 'waiting',
			list: [],
			loading: false,
			receiveLoad: false,
			total: null,
			formData: {
				page: 1,
				page_size: 10,
				hall_type:'waiting',
			},
			detailShow: false,
			detail_loading: false,
			detailInfo: {
				point_config: {},
				task_file_list: []
			},
			userInfo: this.$getUserData(),
			detailId:0,
			showDetailPopup:false,
			detail_form: {
				id: '',
				remark: '',
				fileList: [],
				files: [],
			},
			completeShow:false,
			//图片附件
			Xtoken: { 'X-Token': this.$getToken() },
		};
	},
	mounted() {
		this.get_list();
	},
	
	watch: {
		active(val) {
			this.formData.page=1;
			this.list = [];
			if(val=='myTask'){
				this.get_myTask();
			}else{
				this.get_list();
			}
			
		},
		showDetailPopup(val){
			if(!val){
				this.get_myTask();
			}
		}
	},
	methods: {
		//提交完成任务
		onSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let data = {
						work_id: this.detail_form.id,
						progress: '100',
						remark: this.detail_form.remark,
						state: '1',
						files: this.detail_form.files
					};
					this.$axios('post', '/api/integral/work', data).then(res => {
						this.$message.success(res.data.msg);
						this.resetForm(formName);
						this.get_myTask();
					
					});
				}
			});
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.completeShow = false;
			this.detail_form.fileList = []
			this.detail_form.files = []
		},
		handleFilesSuccess(response, file, fileList) {
			let fileListData=fileList.filter(e=>{
			  return e.url
			})
			this.fileFun(file, fileList)
		},
		onFilePreView(file) {
			if (file.response) {
				window.open(file.response.url, '_blank');
			}
		},
		onFileRemove(file, fileList) {
			this.fileFun(file, fileList)
		},
		fileFun(file, fileList){
			this.detail_form.fileList = fileList;
			this.detail_form.files = []
			fileList.forEach((item, index) => {
				this.detail_form.files.push(item.url);
			});
		},
		// 附件上传
		beforeUpload(file) {
			const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
			const isLt2M = file.size / 1024 / 1024 < 5;
			if (!isJPG) {
				this.$message.error('上传图片只能是 JPEG,PNG,JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 5MB!');
			}
			return isJPG && isLt2M;
		},
		// 点击完成
		completeBtn(data) {
			this.detail_form.id = data.id;
			this.completeShow = true;
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			
			if(this.active=='myTask'){
				this.get_myTask();
			}else{
				this.get_list();
			}
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			if(this.active=='myTask'){
				this.get_myTask();
			}else{
				this.get_list();
			}
		},

		// 打开详情弹窗
		openDetail(item) {
			this.detailId=item.id
			if(this.active=='myTask'){
				this.showDetailPopup = true;
			}else{
				this.detailShow = true;
			}
		},
		// 获取详情信息
		getDetailInfo(item) {
			this.detail_loading = true;
			let data = { task_id: item.id };
			this.$axios('get', '/api/integral/task', data)
				.then(res => {
					if (res.data.code == 1) {
						this.detailInfo = JSON.parse(JSON.stringify(res.data.data));
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.detail_loading = false;
				});
		},
		// 获取列表信息
		get_list() {
			this.loading = true;
			let data = JSON.parse(JSON.stringify(this.formData));
			data.hall_type=this.active
			this.$axios('get', '/api/integral/task/hall', data).then(res => {
				this.list = res.data.data.list;
				this.total = res.data.data.total;
			}).finally(() => {
				this.loading = false;
			});
		},
		get_myTask() {
			this.loading = true;
			let data={
				status:'all',
				page:this.formData.page,
				page_size:this.formData.page_size,
				source_type:2,
				sort: 'publish',
				today: 0
			}
			this.$axios('get', '/api/integral/work/list', data).then(res => {
				this.list = res.data.data.list;
				this.total = res.data.data.total;
			}).finally(() => {
				this.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>
