<template>
	<div class="all padding-20">
		<el-tabs v-model="tabs">
			<el-tab-pane :disabled="table_loading" label="待审批" name="waiting"></el-tab-pane>
			<el-tab-pane :disabled="table_loading" label="申请通过" name="complete"></el-tab-pane>
			<el-tab-pane :disabled="table_loading" label="被驳回" name="refuse"></el-tab-pane>
			<el-tab-pane :disabled="table_loading" label="已复核" name="review"></el-tab-pane>
		</el-tabs>
		<div>
			<el-button type="primary" @click="dialogVisible = true">申请积分</el-button>
			<span class="orange" style="padding-left: 10px;" v-if="config.event_review_status&&config.event_apply_review">复核开启后，积分需管理员复核后才计入排名和统计</span>
		</div>
		<FormBox style="margin: 10px 0;">
			<div class="form-item" v-if="tabs == 'review'">
				<div class="form-label">复核状态</div>
				<div class="form-search">
					<el-select  size="medium" v-model="dc_status" placeholder="请选择复核状态">
						<el-option v-for="item in dcArr" :key="item.name" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
			</div>
			<div class="form-item">
				<div class="form-label">内容搜索</div>
				<div class="form-search">
					<el-input  v-model="formData.keyword" clearable size="medium" placeholder="请输入"></el-input>
				</div>
			</div>	
		</FormBox>
		<el-table :data="dataList" stripe fit v-loading="table_loading" v-if="tabs == 'complete'" @row-click="openDetail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					<span class="font-flex-word" style="max-width: 200px;">{{ scope.row.remark.customize || scope.row.remark.rule }}</span>
				</template>
			</el-table-column>
			<el-table-column label="积分" prop="review_point" width="120">
				<template slot-scope="scope">
					<span :class="{ green: scope.row.review_point < 0, red: scope.row.review_point > 0 }">
						<span v-show="scope.row.review_point > 0">+</span>
						{{ scope.row.review_point }} {{ scope.row.pt_id == 3 ? 'B分' : scope.row.pt_id == 2 ? 'A分' : scope.row.pt_id == 1 ? '绩效分' : '' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
			<template slot="empty">
				<div class="nopoint_box" v-if="!formData.keyword">
					<div class="noimg"></div>
					<span class="title">
						你还没有申请积分 现在
						<el-button type="text" @click="dialogVisible = true">申请积分</el-button>
					</span>
				</div>
				<div class="nopoint_box" v-else>
					<div class="noimg"></div>
					<span class="title">暂无数据</span>
				</div>
			</template>
		</el-table>

		<el-table :data="dataList" stripe fit v-loading="table_loading" v-show="tabs == 'waiting'" @row-click="openDetail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					{{ scope.row.remark.customize || scope.row.remark.rule }}
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
			<template slot="empty">
				<template slot-scope="scope">
					<span :class="{ green: scope.row.review_point < 0, red: scope.row.review_point > 0 }">
						<span v-show="scope.row.review_point > 0">+</span>
						{{ scope.row.review_point }} {{ scope.row.pt_id == 3 ? 'B分' : scope.row.pt_id == 2 ? 'A分' : scope.row.pt_id == 1 ? '绩效分' : '' }}
					</span>
				</template>
			</template>
		</el-table>

		<el-table :data="dataList" stripe fit v-loading="table_loading" v-show="tabs == 'refuse'" @row-click="openDetail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					{{ scope.row.remark.customize || scope.row.remark.rule }}
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
			<template slot="empty">
				<div class="nopoint_box" v-if="!formData.keyword">
					<div class="noimg"></div>
					<span class="title">
						你还没有申请积分 现在
						<el-button type="text" @click="dialogVisible = true">申请积分</el-button>
					</span>
				</div>
				<div class="nopoint_box" v-else>
					<div class="noimg"></div>
					<span class="title">暂无数据</span>
				</div>
			</template>
		</el-table>
		
		<el-table :data="dataList" stripe fit v-loading="table_loading" v-show="tabs == 'review'" @row-click="open_detail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					{{ scope.row.remark.customize || scope.row.remark.rule }}
				</template>
			</el-table-column>
			<el-table-column label="积分" prop="point" width="120">
				<template slot-scope="scope">
					<span :class="{ green: scope.row.point < 0, red: scope.row.point > 0 }">
						<span v-show="scope.row.point > 0">+</span>
						{{ scope.row.point }} {{ scope.row.pt_id == 3 ? 'B分' : scope.row.pt_id == 2 ? 'A分' : scope.row.pt_id == 1 ? '绩效分' : '' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150">
				<template slot-scope="scope">
					{{$moment.unix(scope.row.event_time).format('YYYY-MM-DD')}}
				</template>
			</el-table-column>
			<el-table-column label="状态"  width="150" >
				<template slot-scope="scope">
					<span class="green" v-if="scope.row.dc_status==1">通过</span>
					<span class="red" v-if="scope.row.dc_status==2">不通过</span>
				</template>
			</el-table-column>
		</el-table>

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

		<el-drawer :visible.sync="detailShow" :with-header="false" :size="'600px'">
			<div class="drawer_title flex-box-ce">
				<span class="flex-1">申请详情</span>
				<i  @click="detailShow=false" style="cursor: pointer;" class="el-icon-close"></i>
			</div>
			<div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
				<el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<el-col :span="24" class="flex-box flex-v-ce">
						<userImage 
							:user_name="detail_info.employee_name" 
							:img_url="detail_info.img_url" 
							width="50px" 
							height="50px" 
							fontSize="1">
						</userImage>
						<div class="user_text">
							<p style="margin-left: 10px;">{{ detail_info.employee_name }}</p>
							<div v-show="detail_info.review_point != 0">
								<p v-if="detail_info.status == 1">
									<span
										v-show="
											(detail_info.review_point >= 0 && detail_info.item_prize_type == 1) ||
												(detail_info.review_point >= 0 && detail_info.item_prize_type == -1) ||
												(detail_info.review_point >= 0 && detail_info.item_prize_type == 0)
										"
										style="color:#f56c6c;padding-left:8px"
									>
										+{{ detail_info.review_point }}
									</span>
									<span
										v-show="
											(detail_info.review_point <= 0 && detail_info.item_prize_type == 2) ||
												(detail_info.review_point <= 0 && detail_info.item_prize_type == -1) ||
												(detail_info.review_point <= 0 && detail_info.item_prize_type == 0)
										"
										style="color:#67C23A;padding-left:8px"
									>
										{{ detail_info.review_point }}
									</span>
									<span>{{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}</span>
								</p>
							</div>
						</div>
						<p class="user_text text_ccc">{{ detail_info.review_status_mark }}</p>
					</el-col>
				</el-row>
				<el-row :gutter="10" v-for="(item, index) in detail_info.detail" :key="index">
					<el-col :span="4">{{ item.key }}</el-col>
					<el-col :span="20" v-if="item.key == '附件'">
						<el-image
							v-for="(items, indexs) in item.value"
							:key="indexs"
							style="width: 100px; height: 100px;margin:2px;"
							:src="items"
							:preview-src-list="item.value"
						></el-image>
					</el-col>
					<el-col :span="20" v-else>{{ item.value }}</el-col>
				</el-row>

				<el-row :gutter="10" v-if="detail_info.files != null && detail_info.files > 0">
					<el-col :span="4">图片</el-col>
					<el-col :span="20"><el-image v-for="(item, index) in detail_info.files" :key="index" style="width: 100px; height: 100px" :src="item"></el-image></el-col>
				</el-row>
				<div v-show="detail_info.process">
					<Steps :process="detail_info.process"></Steps>
				</div>
				<div class="btn_danger flex-box flex-center-center" v-if="detail_info.applyor_id == userId && detail_info.can_refuse == '1' && detail_info.source_type == 2">
					<el-button type="danger" class="danger" @click="revocation" :loading="cx_loading">撤销</el-button>
				</div>
			</div>
		</el-drawer>
		
		<el-drawer title="事件详情" :visible.sync="detail_popup" ref="drawer" :with-header="false" :width="'500px'" direction="rtl">
			<div class="drawer_title flex-box-ce">
				<span class="flex-1">事件详情</span>
				<i  @click="detail_popup=false" style="cursor: pointer;" class="el-icon-close"></i>
			</div>
			<div class="detail_popup" v-loading="detail_loading" v-if="detail_info2 !== null">
				<el-row style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<div class="flex-box flex-v-ce">
						<userImage :user_name="detail_info2.employee_name" :img_url="detail_info2.img_url" width="50px" height="50px" fontSize="1"></userImage>
						<span style="font-size: 18px;line-height:50px; margin-left:10px;margin-right:4px;">{{ detail_info2.employee_name }}</span>
						<span class="red point" v-show="detail_info2.point >= 0">+{{ detail_info2.point }} {{ point_name(detail_info2.pt_id) }}</span>
						<span class="green point" v-show="detail_info2.point < 0">{{ detail_info2.point }} {{ point_name(detail_info2.pt_id) }}</span>
					</div>
				</el-row>
		
				<el-row v-show="detail_info2.rule_list">
					<el-col :span="6">事件内容</el-col>
					<el-col :span="18" v-if="detail_info2.remark">{{ detail_info2.remark && (detail_info2.remark.customize || detail_info2.remark.rule) }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.files && detail_info2.files.length > 0">
					<el-col :span="18" :offset="6">
						<el-image
							v-for="(itme, index) in detail_info2.files"
							:key="index"
							style="width: 80px; height: 80px;margin: 0 5px;"
							:src="itme"
							:preview-src-list="detail_info2.files"
						></el-image>
					</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.rule_list">
					<el-col :span="6">规则分类</el-col>
					<el-col :span="18">{{ detail_info2.rule_list }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.source_type_mark">
					<el-col :span="6">来源类型</el-col>
					<el-col :span="18">{{ detail_info2.source_type_mark }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.recorder_name">
					<el-col :span="6">记录人</el-col>
					<el-col :span="18">{{ detail_info2.recorder_name }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.date">
					<el-col :span="6">事件时间</el-col>
					<el-col :span="18">{{ detail_info2.date }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.complete_task.time">
					<el-col :span="6">完成时间</el-col>
					<el-col :span="18">{{ detail_info2.complete_task.time }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.complete_task.remark">
					<el-col :span="6">完成备注</el-col>
					<el-col :span="18">{{ detail_info2.complete_task.remark }}</el-col>
				</el-row>
		
				<el-row v-show="detail_info2.complete_task && detail_info2.complete_task.files && detail_info2.complete_task.files.length > 0">
					<el-col :span="18" :offset="6">
						<el-image
							v-for="(itme, index) in detail_info2.complete_task.files"
							:key="index"
							style="width: 80px; height: 80px;margin: 0 5px;"
							:src="itme"
							:preview-src-list="detail_info2.complete_task.files"
						></el-image>
					</el-col>
				</el-row>
		
				<div v-show="detail_info2.rule_id">
					<p class="row_title">规则依据</p>
					<el-row>
						<el-col :span="6">规则分类</el-col>
						<el-col :span="18">{{ detail_info2.rule_list }}</el-col>
					</el-row>
					<el-row v-show="detail_info2.remark.rule">
						<el-col :span="6">积分规则</el-col>
						<el-col :span="18">{{ detail_info2.remark.rule }}</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">积分</el-col>
						<el-col :span="18" v-show="detail_info2.rule_item.min_point == detail_info2.rule_item.max_point">{{ detail_info2.rule_item.min_point }}</el-col>
						<el-col :span="18" v-show="detail_info2.rule_item.min_point != detail_info2.rule_item.max_point">
							{{ detail_info2.rule_item.min_point }} ~ {{ detail_info2.rule_item.max_point }}
						</el-col>
					</el-row>
				</div>
				<div v-show="detail_info2.process"><Steps :process="detail_info2.process"></Steps></div>
				<div v-show="detail_info2.dc_remark.flow"><Review :process="detail_info2.dc_remark.flow" :status="detail_info2.dc_status"></Review></div>
				<div style="text-align: center;margin-top: 30px;" v-if="detail_info2.source_type == 10 && see_log">
					<el-button type="primary" size="medium" @click="showLog = true">
						查看日志详情内容
						<span style=";padding-left:5px;">»</span>
					</el-button>
				</div>
			</div>
			<div v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')" style="position: absolute; bottom: 20px; display: block; right: 20px;">
				<el-button @click="detail_popup=false">取消</el-button>
				<!-- <el-button type="danger" @click="del_integral_event(detail_info2)">删除</el-button> -->
			</div>
		</el-drawer>
		
		<el-dialog title="查看日志详情" width="600px" :visible.sync="showLog">
			<div class="title">{{ ding_report.creator_name }}的{{ ding_report.template_name }}</div>
			<div v-if="ding_report.contents.length > 0">
				<div class="contents" v-for="(item, index) in ding_report.contents" :key="index">
					<div class="key">{{ item.key }}</div>
					<div class="value fontColorC">
						<span v-if="item.value">{{ item.value }}</span>
						<span v-else>未填写</span>
					</div>
				</div>
			</div>
			<div v-if="ding_report.images.length > 0">
				<div class="key" style="margin-bottom: 20px;">图片</div>
				<div class="flex-box flex-d-wrap">
					<el-image
						v-for="(item, index) in ding_report.images"
						:key="index"
						style="width: 100px; height: 100px;margin-right:8px"
						:src="item"
						:preview-src-list="ding_report.images"
					></el-image>
				</div>
			</div>
		</el-dialog>
		
		<applicationIntegrationPopup title="申请积分" :isBreak="isBreak" :ruleOnoff="ruleOnoff" :visible.sync="dialogVisible" v-if="dialogVisible"></applicationIntegrationPopup>
	</div>
</template>

<script>
import moment from 'moment';
import {_debounce} from '@/api/auth';
import Review from '@/components/Review';
import EmployeeSelector from '@/components/EmployeeSelector.vue';
import applicationIntegrationPopup from '@/components/applicationIntegrationPopup';
import Steps from '@/components/Steps'; 
import {getToken } from '@/api/auth';
export default {
	data() {
		return {
			ruleOnoff: false,
			tabs: 'waiting',
			dataList: [],
			table_loading: false,
			detailShow: false,
			detail_loading: false,
			formData: {
				type: 'waiting',
				pt_id: 0,
				page: 1,
				page_size: 10,
				keyword: ''
			},
			total: 0,
			pageLimit: 10,
			point_types: this.$getTyps(),
			detail_info: {},

			dialogVisible: false,
			itemIndex: 0,
			selectId: '',
			userId: '',
			cx_loading: false,
			
			detail_info2: null,
			detail_popup: false,
			
			isBreak:false,//是否打开缓存的未完成奖扣
			config:false,
			// 查看日志
			showLog: false,
			see_log: 1,
			ding_report: {
				contents: [],
				images: []
			},
			dcArr: [
			  { id: '1,2', name: '全部' },
			  { id: '1', name: '通过' },
			  { id: '2', name: '不通过' },
			],
			dc_status:'1,2',
		};
	},
	components: {
		EmployeeSelector,
		applicationIntegrationPopup,
		Steps,
		Review
	},
	watch: {
		tabs(val) {
			this.dataList = [];
			this.total = 0;
			this.formData.page = 1;
			this.formData.keyword = '';
			this.formData.type = val;
			this.get_list();
		},
		dc_status(){
			this.searchFun();
		},
		'formData.keyword':{
			deep: true,
			handler: _debounce(function(val) {
				this.searchFun();
			}, 1000)
		}
	},
	mounted() {
		this.cheakAx()
		this.userId = this.$getUserData().id;
		this.config=this.$store.state.config;
		this.get_list();
		setTimeout(() => {
			let apply_list=this.$getCache('apply_list')
			if(apply_list&&apply_list.length>0){
				this.isBreak=true;
				this.dialogVisible=true;
			}else{
				this.isBreak=false;
			}
		}, 1000)
	},
	methods: {
		del_integral_event(item) {
			this.$confirm('删除事件的同时也会撤销积分，确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('post', '/api/integral/statistics/integral/destroy', { event_id: item.event_id }).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg);
						this.detail_popup = false;
						this.get_list();
					} else {
						this.$message.error(res.data.msg);
					}
				});
			});
		},
		point_name(id) {
			return this.point_types.find(item => {
				if (item.id == id) {
					return item.name;
				}
			}).name;
		},
		open_detail(item) {
			this.detail_popup = true;
			let data = {
				event_id: item.id
			};
			this.detail_loading = true;
			this.$axios('get', '/api/integral/statistics/integral/info', data)
				.then(res => {
					if (res.data.code == 1) {
						this.detail_info2 = res.data.data;
						var ding_report = res.data.data.remark.ding_report;
						if (Object.keys(ding_report).length != 0) {
							this.ding_report = res.data.data.remark.ding_report;
						}
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.detail_loading = false;
				});
		},
		cheakAx() {
			this.$axios('get', '/api/integral/site/config')
				.then(res => {
					let data = res.data.data;
					if(data.specified_rule_item){
						this.ruleOnoff = data.specified_rule_item == 1 ? true : false;
					}else{
						this.ruleOnoff = false
					}
				})
		},
		// 撤销奖扣
		revocation() {
			var that = this;
			this.$confirm('撤销此项数据将不可恢复，是否撤销?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = { review_id: that.selectId };
				that.cx_loading = true;
				that.$axios('post', '/api/integral/review/destroy', data)
					.then(res => {
						if (res.data.code == 1) {
							that.get_list();
						} else {
							that.$message.error(res.data.data.msg);
						}
					})
					.finally(() => {
						that.cx_loading = false;
						that.detailShow = false;
					});
			});
		},
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_list();
		},
		searchFun() {
			this.dataList = [];
			this.total = 0;
			this.formData.page = 1;
			this.get_list();
		},
		get_list() {
			this.table_loading = true;
			let url="";
			if(this.tabs=='review'){
				 url='/api/integral/statistics/event';
				 this.formData.dc_status=this.dc_status;
			}else{
				 url='/api/integral/review/apply/list'
			}
			this.$axios('get', url, this.formData)
				.then(res => {
					if (res.data.code == 1) {
						this.dataList = res.data.data.list;
						if(this.tabs=='review'){
							this.total = res.data.data.count;
						}else{
							this.total = res.data.data.total;
						}
					}
				})
				.finally(() => {
					this.table_loading = false;
				});
		},
		openDetail(item) {
			this.selectId = item.id;
			let data = {
				review_id: item.id
			};
			this.detailShow = true;
			this.detail_loading = true;
			this.$axios('get', '/api/integral/review', data)
				.then(res => {
					if (res.data.code == 1) {
						this.detail_info = res.data.data;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.detail_loading = false;
				});
		}
	}
};
</script>

<style scoped lang="scss">
.btn_danger {
	margin-top: 20px;
}
.btn_danger .danger {
	width: 120px;
}
.box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
}
.detail_popup {
	padding: 20px;
	height: 90vh;
	overflow-y: 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;
		}
	}
	.examine_steps {
		.el-step {
			flex-basis: auto !important;
		}
	}
}

// 滚动条样式
.detail_popup::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	background-color: rgba(216, 216, 216, 0.8);
}
.detail_popup::-webkit-scrollbar {
	width: 5px;
	background-color: rgba(201, 201, 201, 0);
}
.detail_popup::-webkit-scrollbar-thumb {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
	background-color: rgb(168, 167, 167);
}

.drawer_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
.user_text {
	margin: 0;
	line-height: 25px;
	display: flex;
}
.text_ccc {
	font-size: 16px;
	color: #26a2ff;
	margin-left: 10px;
}
::v-deep .el-table tr:hover {
	cursor: pointer;
}
</style>
