<template>
	<div>
		<div class="all">
			<div>
				<el-form :inline="true">
					<el-form-item label="操作人">
						<el-select v-model="formData.operator_id" size="medium" filterable placeholder="请输入或选择操作人" clearable>
							<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.type" size="medium" style="width:110px" placeholder="请选择" clearable>
							<el-option v-for="(item, index) in event_type" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间">
						<el-date-picker
							size="medium"
							style="width:290px"
							class="first-element-btn"
							:clearable="false"
							v-model="time_range"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="instantPickerOptions"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="人员">
						<el-select v-model="formData.employee_id" size="medium" filterable placeholder="请输入或选择人员" clearable>
							<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><el-button type="primary" size="medium" plain @click="exportRanking">导出</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="all_integral_list" style="width: 100%" v-loading="loading">
				<el-table-column label="操作人" align="left" prop="point">
					<template slot-scope="scope">
							<!-- <userImage :user_name="scope.row.operator.name" :id="scope.row.operator.id" width="50px" height="50px"></userImage> -->
							<div>{{ scope.row.operator.name }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="point" label="操作类型" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.type == 1">发放</span>
						<span v-if="scope.row.type == 2">回收</span>
						<span v-if="scope.row.type == 3">转换</span>
						<span v-if="scope.row.type == 4">兑换</span>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="操作时间" align="center" min-width="120">
					<template slot-scope="scope">
						{{ $moment.unix(scope.row.create_time).format('YYYY-MM-DD HH:mm') }}
					</template>
				</el-table-column>
				<el-table-column label="姓名" align="center" prop="point">
					<template slot-scope="scope">
							<!-- <userImage :user_name="scope.row.employee.name" :id="scope.row.employee.id" width="50px" height="50px"></userImage> -->
							<div>{{ scope.row.employee.name }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="dept" label="部门"  align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.employee.employee_detail.dept_list.length > 0">
							<span v-for="(item, index) in scope.row.employee.employee_detail.dept_list" :key="index">
								{{ item.dept_name }}
								<span v-if="scope.row.employee.employee_detail.dept_list.length - index > 1">,</span>
							</span>
						</div>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column prop="gxd1" label="发放功勋点" align="center"></el-table-column>
				<el-table-column prop="gxd2" label="回收功勋点" align="center"></el-table-column>
				<el-table-column prop="gxd3" label="转换功勋点" align="center"></el-table-column>
				<el-table-column prop="point" label="转换B分" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.type == 3">{{ scope.row.point }}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column prop="point" label="转换比例" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.type == 3">{{ scope.row.ratio_molecule }}:{{ scope.row.ratio_denominator }}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" align="center">
					<template slot-scope="scope">
						<el-tooltip  effect="dark" :content="scope.row.remark" placement="top">
							<div slot="content" style="max-width: 400px;">{{scope.row.remark}}</div>
							<div class="remark">{{scope.row.remark}}</div>
						</el-tooltip>
					</template>
				</el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
			</el-table>
			<center style="padding: 20px 0;">
				<el-pagination
					background
					@size-change="handleSizeChange1"
					@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>
		</div>
		<!-- 导出弹窗 -->
		<el-dialog title="导出" :visible.sync="dialogVisible" width="730px">
			<div style="font-size:15px;margin:20px 0 20px 0;">系统将按以下已选条件导出对应的报表</div>
			<div v-loading="exportLoad">
				<el-form :inline="true">
					<el-form-item label="操作人">
						<el-select v-model="exportData.operator_id" size="medium" filterable placeholder="请输入或选择操作人" clearable>
							<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="exportData.type" size="medium" style="width:110px" placeholder="请选择" clearable>
							<el-option v-for="(item, index) in event_type" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="时间">
						<el-date-picker
							size="medium"
							style="width:290px"
							class="first-element-btn"
							:clearable="false"
							v-model="exportTime_range"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="instantPickerOptions"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="人员">
						<el-select v-model="exportData.employee_id" size="medium" filterable placeholder="请输入或选择人员" clearable>
							<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>
				<span class="dialog-footer" style="display:flex;justify-content: flex-end;">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="exportExcel">导 出</el-button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 设置只能选择当前日期及之后的日期
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
				}
			},
			exportLoad: false,
			dialogVisible: false,
			employee_map: [],
			event_type: [{ id: 1, name: '发放' }, { id: 2, name: '回收' }, { id: 3, name: '转换' }],
			loading: false,
			all_integral_list: null,
			time_range: [this.$moment().startOf('month').format('YYYY-MM-DD'),this.$moment().endOf('month').format('YYYY-MM-DD')],
			formData: {
				employee_id: '',
				page: 1,
				page_size: 10,
				type: '',
				start_time: '',
				end_time: '',
				operator_id:''
			},
			exportTime_range: [
				this.$moment()
					.startOf('month')
					.format('YYYY-MM-DD'),
				this.$moment()
					.endOf('month')
					.format('YYYY-MM-DD')
			],
			exportData: {
				type: '',
				employee_id: '',
				start_time: '',
				end_time: '',
				operator_id:''
			},
			total: 0,
			pageLimit: 10,
			instantPickerOptions: {
				shortcuts: [
					{
						text: '本周',
						onClick(picker) {
							const now = new Date();
							const start = new Date();
							start.setTime(now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000);
							now.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
							picker.$emit('pick', [start, now]);
						}
					},
					{
						text: '上周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - (start.getDay() + 6) * 3600 * 1000 * 24);
							end.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '本月',
						onClick(picker) {
							const now = new Date();
							const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
							const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
							picker.$emit('pick', [startDate, endDate]);
						}
					},
					{
						text: '上月',
						onClick(picker) {
							const now = new Date();
							const startDate = new Date(now.getFullYear() - (now.getMonth() > 0 ? 0 : 1), (now.getMonth() + 11) % 12, 1);
							const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
							picker.$emit('pick', [startDate, endDate]);
						}
					}
				]
			},
		};
	},

	watch: {
		'formData.operator_id'() {
			this.formData.page==1;
			this.get_all_integral();
		},
		'formData.employee_id'() {
			this.formData.page==1;
			this.get_all_integral();
		},
		time_range() {
			this.formData.page==1;
			this.get_all_integral();
		},
		'formData.type'() {
			this.formData.page==1;
			this.get_all_integral();
		},
		dialogVisible(val){
			if(!val){
				this.exportData={
				type: '',
				employee_id: '',
				start_time: '',
				end_time: ''
				};
				this.exportTime_range=[
					this.$moment()
						.startOf('month')
						.format('YYYY-MM-DD'),
					this.$moment()
						.endOf('month')
						.format('YYYY-MM-DD')
				];
			}
		}
	},
	created() {
		this.employee_map = this.$getCache('userList');
	},
	mounted() {
		this.get_all_integral();
	},
	methods: {
		exportRanking() {
			this.dialogVisible = true;
		},
		exportExcel() {
			let url=`${process.env.VUE_APP_BASE_API}/api/download/shop/achievement/operation_log?start_time=${this.exportTime_range[0]}
			&end_time=${this.exportTime_range[1]}&page=1&page_size=8000&download_employee_id=${this.$getUserData().id}`;
			if(this.exportData.type){
				url=url+'&type='+this.exportData.type
			}
			if(this.exportData.employee_id){
				url=url+'&employee_id='+this.exportData.employee_id
			}
			if(this.exportData.operator_id){
				url=url+'&employee_id='+this.exportData.operator_id
			}
			window.open(url,'_blank');
		},
		//分页
		handleSizeChange1(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_all_integral();
		},
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_all_integral();
		},
		//请求数据
		get_all_integral() {
			this.loading = true;
			let data = {
				page: this.formData.page,
				page_size: this.formData.page_size,
				start_time: this.time_range[0],
				end_time: this.time_range[1],
				export: 0
			};
			if (Number(this.formData.type)) {
				data.type = this.formData.type;
			}
			if (Number(this.formData.employee_id)) {
				data.employee_id = this.formData.employee_id;
			}
			if (Number(this.formData.operator_id)) {
				data.operator_id = this.formData.operator_id;
			}
			this.$axios('get', '/api/shop/achievement/operation_log', data)
				.then(res => {
					let list = res.data.data.list;
					list.forEach(item => {
						item.point = item.achievement / item.ratio_denominator;
						item.gxd1 = '--';
						item.gxd2 = '--';
						item.gxd3 = '--';
						if (item.type == 1) {
							item.gxd1 = item.achievement; //发放功勋点
						} else if (item.type == 2) {
							item.gxd2 = item.achievement; //回收功勋点
						} else if (item.type == 3) {
							item.gxd3 = item.achievement; //转换功勋点
						}
					});

					this.all_integral_list = list;
					this.total = res.data.data.count;
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>

<style scoped lang="scss">
.remark{
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  -webkit-line-clamp: 2;
}	
.el-date-editor.el-input {
	width: auto;
}
.date-picker-width {
	width: 145px !important;
}
.search ::v-deep .el-input-group__append:active {
	background: #26a2ff;
}
.search ::v-deep .el-input-group__append:active .el-icon-search {
	color: #fff;
}
::v-deep .el-dialog__body {
	padding: 0px 20px 30px;
}
</style>
