<template>
	<div>
		<div class="box">
			<el-tabs v-model="formData.status" type="card">
				<el-tab-pane v-for="(item, index) in tabsOption" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
			</el-tabs>

			<el-form ref="formData" :inline="true" :model="formData" label-width="80px">
				<el-form-item label="积分类型">
					<el-select  v-model="formData.pt_id" clearable placeholder="请选择积分类型">
						<el-option v-for="item in point_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="负责人">
					<el-select  v-model="formData.employee_id" filterable clearable placeholder="请输入负责人">
					  <el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
<!-- 				<el-form-item label="审批人">
					<el-select  v-model="formData.reviewer_id" filterable clearable placeholder="请输入审批人">
					  <el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="任务内容">
					<el-input
						placeholder="搜索任务内容"
						ref="search-bar"
						v-model="formData.content"
						class="input-with-select"
						@keyup.enter.native="get_list"
						>
						<el-button  lot="append" icon="el-icon-search" @click="get_list"></el-button>
					</el-input>
				</el-form-item>
			</el-form>

			<div>
				<el-table :data="list" ref="elTable" style="width: 100%" v-loading="loading"  @sort-change="sortChange">
					<el-table-column label="负责人" prop="employee_id">
					  <template slot-scope="scope">
					   <div class="flex-box-ce">
					      <userImage  :id="scope.row.employee_id" width="50px" height="50px"  :user_name="scope.row.employee_name" ></userImage>
					      <span style="line-height: 50px; padding-left: 10px;">{{scope.row.employee_name}}</span>
					    </div>
					  </template>
					</el-table-column>
<!-- 					<el-table-column label="审批人" prop="reviewer_id">
					  <template slot-scope="scope">
					    <div class="flex-box-ce">
					      <userImage  :id="scope.row.reviewer_id" width="50px" height="50px"  :user_name="scope.row.reviewer_name" ></userImage>
					      <span style="line-height: 50px; padding-left: 10px;">{{scope.row.reviewer_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" sortable="custom">
						<template slot-scope="scope">
							<span class="red">
								{{ scope.row.point_config.base_point }} {{ scope.row.pt_name }}
							</span>
							
<!-- 							<span class="red" v-if="scope.row.point_config.review_point!=0">
								+{{ scope.row.point_config.review_point }} {{ scope.row.pt_name }}
							</span>
							<span class="red" v-else>
								+{{ scope.row.point_config.base_point }} {{ scope.row.pt_name }}
							</span> -->
						</template>
					</el-table-column>
					<el-table-column label="截止时间" prop="expire_time" sortable="custom"></el-table-column>
					<el-table-column label="操作" prop="owner_id">
						<template slot-scope="scope">
							<el-link type="primary" :underline="false" @click.stop="openDetail(scope.row)" class="blue">查看任务</el-link>
							<el-link style="margin-left: 10px;" v-if="formData.status=='reviewed'||formData.status=='complete'" type="primary" :underline="false" @click.stop="openDetailXq(scope.row)">查看审批</el-link>
						</template>
					</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>
		</div>

		<el-drawer :custom-class="'drawer_details'" :visible.sync="completeShow" wrapperClosable :with-header="false" size="500px">
			<div class="details_title">完成任务</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: '请填写任务备注(限20字)', trigger: 'blur' }]">
						<el-input v-model="detail_form.remark" type="textarea" max="20"></el-input>
					</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>

		<!-- 详情弹窗 -->
		<taskDetailsPopup :visible.sync="showDetailPopup" v-if="showDetailPopup" :id="detailId" :title="'任务详情'"></taskDetailsPopup>
		<!-- 审批详情 -->
		<examinePopup :title="'审核详情'" :id="detail_id" :show.sync="detailShow"></examinePopup>
	</div>
</template>

<script>
import noData from '@/components/noData';
import examinePopup from '@/components/examinePopup.vue';
import taskDetailsPopup from '@/views/common/below/taskDetailsPopup'
import {_debounce} from '@/api/auth';

export default {
	name: 'my_task',
	data() {
		return {
			active: 'running',
			tabsOption: [{ label: '待完成', name: 'running' }, { label: '待审批', name: 'complete' }, { label: '已审批', name: 'reviewed' }],
			list: [],
			loading: false,
			total: null,
			point_type: null,
			detail_form: {
				id: '',
				remark: ''
			},
			formData: {
				status: 'running',
				pt_id: 0,
				content:'',
				employee_id:'',
				reviewer_id:'',
				page: 1,
				page_size: 10,
				sort_by:'create_time',// ‘create_time’创建时间,’expire_time’过期时间,’base_point’，积分大小
				order:'desc',//‘desc’ 倒序,’asc’ 正序
			},
			completeShow: false,
			showDetailPopup: false,
			detailId: null,
			showRepetitiveTasksPopup: false,
			showRewardTaskDetailsPopup: false,
			employee_map:[],
			
			// 审批相关
			detail_id:0,
			detailShow:false,
		};
	},
	components: { taskDetailsPopup, noData,examinePopup },
	watch: {
		'formData.content': {
		  deep: true,
		  handler: _debounce(function(val) {
			this.formData.page = 1;
			this.get_list();
		  },1000)
		},
		'formData.pt_id'(val) {
			this.formData.page = 1;
			this.get_list();
		},
		'formData.employee_id'(val) {
			this.formData.page = 1;
			this.get_list();
		},
		'formData.reviewer_id'(val) {
			this.formData.page = 1;
			this.get_list();
		},
		'formData.status'(val) {
			this.formData.page = 1;
			this.formData.pt_id = 0;
			this.formData.employee_id=''
			this.formData.reviewer_id=''
			this.formData.sort_by = 'create_time';
			this.formData.order = 'desc';
			this.list = [];
			this.$refs.elTable.clearSort();
			this.get_list();
		}
	},
	created() {
		this.getEmployee()
	},
	mounted() {
		this.get_list();
		this.point_type = this.getPointType();
	},
	methods: {
		openDetailXq(item) {
			this.detail_id = item.review_id;
			this.detailShow = true;
		},
		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, page: 1, page_size: 3000,is_official:1 }).then(res => {
				this.employee_map = res.data.data.list;
			})
		},
		sortChange(row){
			if(row.order=='ascending'){//升序
				if(row.prop){
					this.formData.sort_by = row.prop;
					this.formData.order = 'asc';
				}
			}else if(row.order=='descending'){//降序
				if(row.prop){
					this.formData.sort_by = row.prop;
					this.formData.order = 'desc';
				}
			}else{//默认排序
				this.formData.sort_by = 'create_time';
				this.formData.order = 'desc';
			}
			this.formData.page = 1;
			this.get_list();
		},
		// 点击完成
		completeBtn(data) {
			this.detail_form.id = data.id;
			this.completeShow = true;
		},
		//提交完成任务
		onSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let self = this;
					let data = {
						work_id: self.detail_form.id,
						progress: '100',
						remark: self.detail_form.remark,
						state: '1'
					};
					self.$axios('post', '/api/integral/work', data).then(res => {
						if (res.data.code == 1) {
							self.$message.success(res.data.msg);
							self.$refs[formName].resetFields();
							self.completeShow = false;
							self.get_list();
						} else {
							self.$message.error(res.data.msg);
						}
					});
				}
			});
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.completeShow = false;
		},
		getPointType() {
			let point = window.plus ? JSON.parse(puls.storage.getItem('types')) : JSON.parse(localStorage.getItem('types'));
			// point.splice(0,1)
			point.unshift({ code: 'AF', id: 0, name: '全部' });
			return point;
		},
		// 页码变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.get_list();
		},
		openDetail(row) {
			this.detailId = parseInt(row.id);
			this.showDetailPopup = true;
		},
		get_list() {
			let self = this;
			self.loading = true;
			let params = JSON.parse(JSON.stringify(this.formData));
			if (params.pt_id == 0) {
				delete params.pt_id;
			}
			if (params.employee_id == '') {
				delete params.employee_id;
			}
			if (params.reviewer_id == '') {
				delete params.reviewer_id;
			}
			self.$axios('get', '/api/integral/work/list/manage', params)
				.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;
}
::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>
