<template>
	<div>
		<div class="all">
			<div class="flex-box-ce flex-d-wrap" style="margin-top: 16px;">
				<div class="flex-box" style="margin-bottom: 10px;">
					<el-button type="primary" size="medium" @click="openCz(1)" style="margin-left: 10px;" plain>发放功勋点</el-button>
					<el-button type="warning" size="medium" @click="openCz(2)" style="margin-left: 10px;" plain>回收功勋点</el-button>
					<el-button type="success" size="medium" @click="openCz(3)" style="margin-left: 10px;" plain>转换功勋点</el-button>
				</div>
				<div class="flex-box-end flex-v-ce" style="font-size: 16px;margin-left: 10px;margin-bottom: 10px;">
					<span>当前转换比例</span>
					<span class="blue" style="padding: 0 10px;font-weight: 600;">{{configData.ratio_molecule}} : {{configData.ratio_denominator}}</span>
					<i class="el-icon-edit" style="font-size: 16px;" @click="isZh = true"></i>
				</div>
				<div class="flex-1"></div>
				<div class="flex-box-ce" style="margin-bottom: 10px;">
					<div class="label">部门</div>
					<el-cascader
						size="medium"
						class="date-picker-width"
						v-model="dept_name"
						:options="dept_tree"
						:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
						ref="dept"
						clearable
						filterable
						placeholder="全公司"
					></el-cascader>
				</div>
				<div class="flex-box-ce" style="margin-bottom: 10px;">
					<div class="label">人员</div>
					<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>
				</div>
			</div>

			<el-table :data="list" style="width: 100%" v-loading="loading" @selection-change="deleteEvents">
				<el-table-column label="姓名" align="left" prop="point">
					<template slot-scope="scope">
						<div class="flex-box">
							<userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="dept" label="部门">
				  <template slot-scope="scope">
					<div v-if="scope.row.employee_detail.dept_list.length > 0">
					  <span v-for="(item, index) in scope.row.employee_detail.dept_list" :key="index">
						{{ item.dept_name }}
						<span v-if="scope.row.employee_detail.dept_list.length - index > 1">,</span>
					  </span>
					</div>
					<span v-else>--</span>
				  </template>
				</el-table-column>
				<!-- <el-table-column label="累计B分" align="center" prop="total_point"></el-table-column> -->
				<el-table-column label="当前可转B分余额" align="center" prop="may_point">
					<template slot="header" slot-scope="scope">
					  <el-tooltip effect="dark" placement="top-start">
					    <div slot="content">
					      <div style="margin-bottom: 10px;">说明</div>
					      <div style="padding-left: 20px;">
							  1、可转B分余额，来自员工在企业内所得的累计B分（不包含基础分和工龄分）			        <br />
							  2、员工可以通过获得更多的累计B分，来增加可转B分余额的收入			        <br />
							  3、回收功勋点不会增加可转B分余额			        <br />
							  4、转换成功勋点后，余额将被扣除
					      </div>
					    </div>
					    <span>
					      <span>当前可转B分余额</span>
					      <i class="el-icon-warning"></i>
					    </span>
					  </el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="转换后可得功勋点" align="center" prop="acquire_point"></el-table-column>
				<el-table-column label="现有功勋点" align="center" prop="achievement">
					<template slot-scope="scope">
						<span v-if="scope.row.achievement">
							{{scope.row.achievement.achievement}}
						</span>
						<span v-else>0</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" @click="moreMessage(scope.row.id)" :underline="false" style="padding-right: 10px;">个人明细</el-link>
						<el-dropdown @command="handleCommand">
							<el-button size="mini">
								管理
								<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{id:scope.row.id,index:'1',item:scope.row}">发放</el-dropdown-item>
								<el-dropdown-item :command="{id:scope.row.id,index:'2',item:scope.row}">回收</el-dropdown-item>
								<el-dropdown-item :command="{id:scope.row.id,index:'3',item:scope.row}">转换</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</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"
					: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="isZh" width="500px" top="10%">
			<div class="flex-box-ce" style="margin-bottom: 20px;">
				<span class="yellow flex-1">B分转换功勋点将按以下比例进行转换</span>
				<span style="cursor: pointer;" class="blue" @click="innerVisible = true">历史修改记录</span>
			</div>
			<div class="flex-box-ce flex-center-center" style="margin-bottom: 10px;font-size: 16px;">
				<span>转换比例 1：</span>
			    <el-input type="text" class="width-250" v-model="zhNum" placeholder="请输入比例" @input="[zhNum=zhNum.replace(/[^\d]/g,'')]"/>
			</div>
			<div style="text-align: center;"><i class="el-icon-d-arrow-left fontColorT" style="font-size: 30px;transform: rotate(-90deg);"></i></div>
			<div style="text-align: center;font-size: 22px;margin: 10px 0 30px 0;">
				1 B分 =
				<span class="blue">{{ zhNum }}</span>
				功勋点
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isZh = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="editRatio" size="medium">确 定</el-button>
			</span>
			<el-dialog width="500px" title="历史修改记录" :visible.sync="innerVisible" append-to-body>
				<div style="max-height: 400px;overflow-y: auto;" class="scroll-bar">
					<div v-for="(item, index) in configData.change_log" :key="index" style="padding-bottom: 16px;">
						<span class="green">{{ item.employee_name }}</span>
						在 {{ $moment.unix(item.time).format('YYYY年MM月DD日  HH:mm:ss') }} 修改转换比例为
						<span class="blue">{{ item.molecule }}:{{ item.denominator }}</span>
					</div>
				</div>
				<span slot="footer" class="dialog-footer"><el-button @click="innerVisible = false" size="medium">关 闭</el-button></span>
			</el-dialog>
		</el-dialog>
		<!-- 发放/回收/转换 -->
		<el-dialog :title="czText + '功勋点'" :visible.sync="isCz" width="500px" top="10%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
				<div v-if="isEmployee&&czText!='发放'" class="yellow" style="text-align: center;margin-bottom: 17px;">
					<span v-if="czText=='回收'">该操作将会{{czText}}所选对象的全部功勋点，请谨慎操作</span>
					<span v-else>该操作将会{{czText}}所选对象的全部可转B分，请谨慎操作</span>
				</div>
				<div class="flex-box-ce" v-if="!isEmployee&&ruleForm.employee_ids[0]" style="margin-bottom: 17px;">
					<span style="width: 120px;text-align: right;box-sizing: border-box;padding-right: 10px;">{{czText}}对象</span>
					<span>{{returnName(ruleForm.employee_ids[0])}}</span>
				</div>
				<el-form-item :label="czText+'对象'" prop="employee_ids" v-if="isEmployee">
					<div class="border flex-box-ce">
						<div class="flex-1" v-if="Administrator.length == 0">请选择人员</div>
						<div v-else style="width: 180px;" class="font-flex-word">
							<span v-for="(item, index) in Administrator" :key="index">
								<i v-if="index != 0">,</i>
								{{ item.name }}
							</span>
						</div>
						<span v-if="Administrator.length > 0" class="blue">{{ Administrator.length }}人</span>
						<i class="el-icon-arrow-down icon-right" v-else></i>
						<div @click="openAdministrator()" class="inputDc"></div>
					</div>
				</el-form-item>
				
				<template v-if="czText=='发放'||!isEmployee">
					<template v-if="czText=='转换'">
						<el-form-item :label="'B分'+czText+'功勋点'" prop="num">
							<el-input type="text" style="width: 150px;" placeholder="请输入B分" v-model="ruleForm.num" @input="[ruleForm.num=ruleForm.num.replace(/[^\d]/g,'')]"/>
							<i class="el-icon-sort" style="transform: rotate(90deg);margin: 0 5px;"></i>
							<el-input type="text" style="width: 90px;" v-model="countVal" disabled/>
						</el-form-item>
						<div style="padding-left: 120px;">转换比例 <span class="blue">{{configData.ratio_molecule}} : {{configData.ratio_denominator}}</span></div>
					</template>
					<el-form-item :label="czText+'功勋点'" prop="num" v-else>
						<el-input type="text" class="width-250" placeholder="请输入功勋点" v-model="ruleForm.num" @input="[ruleForm.num=ruleForm.num.replace(/[^\d]/g,'')]"/>
					</el-form-item>
				</template>
				
				<el-form-item label="备注" prop="remark">
					<el-input
						type="textarea"
						v-model="ruleForm.remark"
						placeholder="请输入备注"
						class="width-250"
						:autosize="{ minRows: 3, maxRows: 6 }"
						show-word-limit
						maxlength="200"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isCz = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="submit('ruleForm')" size="medium">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="选择人员" width="640px" :visible.sync="isChecks" append-to-body>
			<EmployeeSelector ref="members" v-if="isChecks" :selected="selected" @confirm="employeeConfirm" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="isChecks = false">取 消</el-button>
				<el-button type="primary" @click="$refs.members.confirm()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 个人明细 -->
		<el-dialog title="个人明细" width="800px" :visible.sync="isDetail" top="5%">
			<div v-loading="loadingDetail">
				<div class="flex-box-ce">
					<div class="titled" v-for="(item,index) in detailData" :key="index">
						<div class="num" :class="item.num>=0? 'blue':'red'">{{item.num}}</div>
						<div class="fontColorF">{{item.name}}</div>
					</div>
				</div>
				<div class="flex-box-end " style="margin-bottom: 10px;">
					<el-button type="primary" plain size="small" @click="exportExcel">导出个人明细</el-button>
				</div>
				<el-table :data="DetailList" style="width: 100%" border>
					<el-table-column label="姓名" align="left" prop="point">
						<template slot-scope="scope">
							<div class="flex-box">
								<!-- <userImage :user_name="scope.row.employee.name" :id="scope.row.employee.id" width="50px" height="50px"></userImage> -->
								<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee.name }}</span>
							</div>
						</template>
					</el-table-column>
<!-- 					<el-table-column prop="dept" label="部门"  align="center" min-width="200">
						<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 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 label="功勋点" align="center" prop="achievement"></el-table-column>
					<el-table-column label="描述" align="center" prop="remark" min-width="200">
						<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>
					<el-table-column label="时间" align="center" prop="point" min-width="150">
						<template slot-scope="scope">
							{{ $moment.unix(scope.row.create_time).format('YYYY-MM-DD HH:mm') }}
						</template>
					</el-table-column>
					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
				<center style="padding-top: 20px;">
					<el-pagination background 
						:current-page="detail_page" 
						:page-size="5" 
						@current-change="handleCurrentChange2" 
						layout="total, prev, pager, next" 
						:total="count">
					</el-pagination>
				</center>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="isDetail = false">关 闭</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="提交结果" :visible.sync="isResult"  width="800" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div v-if="!isShowError">
				<div style="text-align: center;margin-bottom: 10px;" class="red" v-if="isShowError2">{{errorMsg}}</div>
				<el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
				<div style="margin-top: 20px;border: 1px solid #f1f1f1;max-height: 500px;overflow-y: auto;" class="scroll-bar">
					<div class="flex-box-ce results" style="font-weight: 600;">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">序号</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">对象</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">功勋点</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">备注</div>
						<div class="flex-2" >提交结果</div>
					</div>
					<div class="flex-box-ce results" v-for="(item, index) in results" :key="index">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">{{results.length-index}}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{returnName(item.task.msg.employee_id)}}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.task.msg.num }}</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">{{ item.task.msg.remark }}</div>
						<div class="flex-2 green" v-if="item.status==1">{{ item.msg }}</div>
						<div class="flex-2 red" v-else>{{ item.msg }}</div>
					</div>
				</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;" v-show="isShowError2&&results.length!=resultList.length"><el-button type="primary" @click="isResult = false" size="small">确 定</el-button></div>
					<div class="flex-box-end" style="margin-top: 20px;" v-show="results.length==resultList.length"><el-button type="primary" @click="isResult = false" size="small">确 定</el-button></div>
				</span>
			</div>
			<div v-else>
				<div style="text-align: center;" class="red">{{errorMsg}}</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;"><el-button type="primary" @click="isResult = false" size="small">确 定</el-button></div>
				</span>
			</div>
		</el-dialog>
		<!-- 缓存的奖扣 -->
		<el-dialog title="网络中断提交列表" :visible.sync="isShowBreak"  width="800" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div>
				<template v-if="breakList[0]">
					<div v-if="breakList[0].type=='achievement_grant'" style="text-align: center;margin-bottom: 10px;" class="blue">发放功勋点</div>
					<div v-if="breakList[0].type=='achievement_take_back'" style="text-align: center;margin-bottom: 10px;" class="blue">回收功勋点</div>
					<div v-if="breakList[0].type=='achievement_exchange'" style="text-align: center;margin-bottom: 10px;" class="blue">转换功勋点</div>
				</template>
				<div style="margin-top: 20px;border: 1px solid #f1f1f1;max-height: 500px;overflow-y: auto;" class="scroll-bar">
					<div class="flex-box-ce results" style="font-weight: 600;">
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">对象</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">功勋点</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">备注</div>
					</div>
					<div class="flex-box-ce results" v-for="(item, index) in breakList" :key="index">
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{returnName(item.employee_id)}}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.num }}</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">{{ item.remark }}</div>
					</div>
				</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;">
						<el-button type="primary" @click="colseBreak()" size="small">取 消</el-button>
						<el-button type="primary" @click="submitBreak()" size="small">再次提交</el-button>
					</div>
				</span>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import EmployeeSelector from '@/components/EmployeeSelector';
export default {
	name: 'flManagement',
	components: { EmployeeSelector },
	data() {
		return {
			employee_map: [],
			dept_name: [],
			dept_tree: [],
			loading: false,
			formData: {
				dept_id: 0,
				employee_id: '',
				page: 1,
				page_size: 10,
			},
			list: null,
			pageLimit: 10,
			total: null,
			innerVisible: false,

			// 发放/回收/转换
			Administrator: [],
			isChecks: false,
			selected: { dept: [], employee: [] },
			ruleForm: {
				remark: '',
				num: '', 
				employee_ids: []
			},
			rules: {
				num: [{required: true, message: '请输入数值', trigger: 'blur' }],
				employee_ids: [{ required: true, message: '请选择人员', trigger: 'change' }]
			},
			czText: '发放',
			isCz: false,
			isEmployee:true,
			countVal:0,
			
			// 个人明显
			isDetail:false,
			loadingDetail:false,
			count:0,
			detail_page:1,
			DetailList:[],
			detailId:0,
			detailData:[
				{name:'现有功勋点',num:1000},
				{name:'管理员发放',num:254},
				{name:'B分转换',num:20},
				{name:'兑换奖品',num:-100},
				{name:'被回收',num:-25}
			],
			// 转换比例
			configData:{},
			isZh: false,
			zhNum:1,
			
			// 长连接结果
			results: [], //提交的返回结果集合
			isResult: false,
			percentage: 0,
			resultList:[],//要发送数据的集合
			resultIndex:0,
			isShowError:false,
			isShowError2:false,
			errorMsg:'服务器繁忙，请稍后再试',
			breakList:[],
			isShowBreak:false,
		};
	},
	watch: {
		'ruleForm.num'(val){
			if(this.czText=='转换'){
				this.countVal=val*this.configData.ratio_denominator;
			}
		},
		'formData.employee_id'(){
			this.formData.page = 1;
			this.get_list();
		},
		isZh(val){
			if(val){
				this.zhNum=this.configData.ratio_denominator;
			}
		},
		isCz(val){
			if(!val){
				this.$refs['ruleForm'].resetFields();
				this.ruleForm={remark: '',num: '', employee_ids:[]};
				this.isEmployee=true;
				this.countVal=0;
				this.Administrator= [];
				this.selected={ dept: [], employee: [] };
				this.$socketApi.closewebsocket();
			}
		},
		isDetail(val) {
			if(!val){
				this.detail_page=1;
				
			}
		},
		dept_name(val) {
			if (val.length !== 0) {
				this.formData.dept_id = val[val.length - 1];
			} else {
				this.formData.dept_id = '0';
			}
			this.formData.page = 1;
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.get_list();
			});
		},
		isResult(val){
			if(!val){
				this.isCz=false;
				this.isShowError = false;
				this.isShowBreak = false;
				this.errorMsg='服务器繁忙，请稍后再试';
				this.$socketApi.closewebsocket();
				this.get_list();
			}
		},
	},
	methods: {
		exportExcel() {
			let url=`${process.env.VUE_APP_BASE_API}/api/download/shop/achievement/detail?page=1&page_size=8000&employee_id=${this.detailId}&download_employee_id=${this.$getUserData().id}`;
			window.open(url,'_blank');
		},
		// 关闭缓存弹窗
		colseBreak(){
			this.isShowBreak = false;
			this.breakList=[];
			this.$removeCache('flManagement');
		},
		// 提交缓存奖扣
		submitBreak(){
			this.$removeCache('flManagement');
			this.resultList=JSON.parse(JSON.stringify(this.breakList));
			this.resultIndex=0;
			this.percentage=0;
			this.results=[];
			this.isResult=true;
			this.opneWebSocket()
		},
		returnName(id){
			return this.employee_map[id].name
		},
		submit(str){
			if(this.czText=='发放'&&this.ruleForm.num==0){
				this.$message.error("功勋点数值不能为0或者空")
				return
			}
			if(this.ruleForm.num>10000000){
				this.$message.error("功勋点数值不能大于10000000")
				return
			}
			this.$refs[str].validate((valid) => {
			  if (valid) {
				  this.$confirm(`您确认 ${this.czText} 功勋点？`, '提示', {
				  	confirmButtonText: '确定',
				  	cancelButtonText: '取消',
				  	type: 'warning'
				  }).then(() => {
						this.webSocket()
				  });
			  } else {
				console.log('error submit!!');
				return false;
			  }
			}); 
		},
		webSocket(data){
			let type='achievement_grant';
			switch (this.czText) {
				case '发放':
					type = 'achievement_grant';
					break;
				case '回收':
					type = 'achievement_take_back';
					break;
				case '转换':
					type = 'achievement_exchange';
					break;
			}
			let arr=[];
			this.ruleForm.employee_ids.forEach(item=>{
				let data={
					type:type,
					employee_id:item,
					num:this.ruleForm.num||0,
					remark:this.ruleForm.remark,
					all:(type=='achievement_grant'||!this.isEmployee)? 0:1
				}
				arr.push(data)
			})
			this.resultList=arr;
			this.resultIndex=0;
			this.percentage=0;
			this.results=[];
			this.isResult=true;
			this.opneWebSocket()
		},
		opneWebSocket() {
			let wsData=this.resultList;
			if(wsData[this.resultIndex]&&!this.isShowError){
				this.$socketApi.sendData(wsData[this.resultIndex],this.onmessageWS)
			}
		},
		onmessageWS(e){
			if(e.type=='achievement_grant'||e.type=='achievement_take_back'||e.type=='achievement_exchange'){
				this.results.unshift(e.result);
				this.resultIndex++;
				this.opneWebSocket();
				// 进度条
				let lng = this.resultList.length;
				this.percentage += Math.floor(100 / lng);
				if (lng == this.results.length) {
					this.percentage = 100;
				}
			}
			// 中途断开
			if(e.type=='break'){
				let wsData=this.resultList;
				this.errorMsg=e.msg
				let data={
					obj:wsData.slice(this.resultIndex,wsData.length)
				}
				this.$setCache('flManagement',data);
				this.isShowError2 = true;
			}
			// 连接不上
			if(e.type=='error'){
				this.errorMsg=e.msg
				this.isShowError = true;
			}
			
		},
		// 确定转换
		editRatio() {
			if(!Number(this.zhNum)){
				this.$message.error("转换比例不能为0或空")
				return
			}
			if(Number(this.zhNum)>1000){
				this.$message.error("转换比例不能超过1 : 1000")
				return
			}
			this.$axios('post', '/api/shop/achievement/edit_ratio',{denominator:this.zhNum}).then(res => {
				this.isZh=false;
				this.$message.success("设置成功");
				this.getConfig();
			});
		},
		//获取转换比例
		async getConfig() {
		    const w=await this.$axios('get', '/api/shop/achievement/config').then(res => {
				this.configData =res.data.data;
			});
			this.get_list();
		},
		handleCommand(e){
			this.ruleForm.employee_ids.push(e.id);
			this.isEmployee=false;
			this.openCz(Number(e.index))
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		},
		get_list() {
			this.loading = true;
			let data={
				page:this.formData.page,
				page_size:this.formData.page_size,
			}
			if(Number(this.formData.dept_id)){
				data.dept_id=this.formData.dept_id
			}
			if(Number(this.formData.employee_id)){
				data.employee_id=this.formData.employee_id
			}
			this.$axios('get','/api/shop/achievement/list',data).then(res => {
				let list = res.data.data.list;
				list.forEach(item=>{
					let may_point=item.achievement?Number(item.total_point)-Number(item.achievement.point):Number(item.total_point)
					// item.may_point=may_point;//可转
					// item.acquire_point=may_point*this.configData.ratio_denominator;//转换可得
					item.may_point=may_point>=0? may_point:0;//可转
					item.acquire_point=may_point*this.configData.ratio_denominator>=0 ? may_point*this.configData.ratio_denominator:0;//转换可得
				})
				this.list = list;
				this.total = res.data.data.count;
			}).finally(() => {
				this.loading = false;
			});
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		},
		openCz(index) {
			switch (index) {
				case 1:
					this.czText = '发放';
					break;
				case 2:
					this.czText = '回收';
					break;
				case 3:
					this.czText = '转换';
					break;
			}
			this.isCz=true;
		},
		moreMessage(id){
			if(id){this.detailId=id};
			this.isDetail=true;
			this.loadingDetail=true;
			this.$axios('get', '/api/shop/achievement/detail',{page:this.detail_page,page_size:5,export:0,employee_id:this.detailId}).then(res => {
				let data=res.data.data;
				this.detailData=[
					{name:'现有功勋点',num:data.all},
					{name:'管理员发放',num:data.grant},
					{name:'B分转换',num:data.exchange},
					{name:'兑换奖品',num:data.consume},
					{name:'被回收',num:data.take_back}
				]
				console.log(res.data.data.count)
				this.DetailList =data.list;
				this.count =data.count;
			}).finally(()=>{
				this.loadingDetail=false;
			});
		},
		// 选择录入对象
		employeeConfirm(e) {
			this.ruleForm.employee_ids = e.employee.map(item=>{
				return item.id
			})
			this.selected.employee = e.employee.length > 0 ? e.employee : [];
			this.Administrator = e.employee.length > 0 ? e.employee : [];
			this.isChecks = false;
		},
		openAdministrator() {
			this.isChecks = true;
		},
		deleteEvents(selection) {
			let listId = [];
			selection.forEach(item => {
				listId.push(item.id);
			});
			this.selectionID = listId;
		},
		handleCurrentChange2(val) {
			this.detail_page = val;
			this.moreMessage();
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_list();
		},
	},
	created() {
		this.getDepartment();
		this.getConfig();
		this.employee_map = this.$getCache('userList');
	},
	mounted() {
		let data=this.$getCache('flManagement');
		if(data){
			this.breakList=data.obj;
			this.isShowBreak=true;	
		}
	}
};
</script>
<style scoped lang="scss">
	.remark{
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  overflow: hidden;
		  -webkit-line-clamp: 2;
	}
	.results {
		border-bottom: 1px solid #f1f1f1;
		text-align: center;
	}
	.results div {
		padding: 10px;
	}
.titled{
	width: 110px;
	text-align: left;
	margin-bottom: 20px;
	color: #606266;
	font-size: 14px;	
	// border-right: 1px solid #f1f1f1;
	padding: 0 10px;
}
.titled .num{
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
}
.border {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #c0c4cf;
	font-size: inherit;
	height: auto;
	outline: 0;
	padding: 0 15px;
	width: 250px;
	position: relative;
	cursor: pointer;
}
.border .font-flex-word {
	color: #606266;
}
.el-icon-edit {
	position: relative;
	cursor: pointer;
}
.el-icon-edit::after {
	content: '';
	position: absolute;
	left: -5px;
	top: -5px;
	bottom: -5px;
	right: -5px;
}
.label {
	width: 40px;
	text-align: right;
	padding: 0 10px;
}
.search_box {
	::v-deep button:active {
		background: #26a2ff;
	}
	::v-deep button:active .el-icon-search {
		color: #fff;
	}
}
.date-picker-width {
	width: 100% !important;
}
.nopoint_box {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}
.noimg {
	display: inline-block;
	width: 110px;
	height: 110px;
	margin: 22px auto 16px;
	background-size: 99%;
}
.noperson {
	display: inline-block;
	width: 110px;
	height: 110px;
	line-height: none;
	margin: 22px auto 16px;
	background-size: 99%;
}
.title {
	display: block;
	text-align: center;
	font-size: 12px !important;
	line-height: 30px;
	color: #909399 !important;
	padding: 0;
}
.nopoint_box a {
	color: #26a2ff;
}
.chart_content {
	.chart-legend__wrap {
		text-align: right;
		padding: 20px;
		padding-right: 50px;
		& .chart-legend__pink {
			position: relative;
			padding-left: 12px;
			padding-right: 5px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #f56c6c;
				border-radius: 100%;
			}
		}

		& .chart-legend__green {
			position: relative;
			padding-left: 12px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #53b87f;
				border-radius: 100%;
			}
		}
	}
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
}
.manager_statistics_box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
	::v-deep .el-row .el-checkbox .el-checkbox__label {
		line-height: 20px;
	}
}
.diy_tip_bg {
	background: #f5f6f9;
	overflow: hidden;
	.diy-tip {
		margin-bottom: 15px;
		border: 1px solid #67c23a;
		padding: 20px 16px;
		p {
			color: #67c23a !important;
			font-size: 14px;
			margin: 0 !important;
			padding: 4px 0;
		}
	}
}
.width-250{
	width: 250px;
}
.inputDc {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  cursor: pointer;
}
</style>
