<template>
  <div>
		<el-alert class="diy-tip" @close="tips_close" v-show="tips_show" type="success" description>
			<p>A分余额在线下兑换/使用过后，由管理员手动结算清零；</p>
			<p>清零操作为全员批量清除，请谨慎操作！</p>
			<p>每次清零将清空指定月份之前的余额（不含指定月份），不可清空未结束月份的余额：</p>
			<p>例如当前是2020年7月8号，指定选择2020年7月份，可清空2020年7月1号之前所有余额，不清除7月1-8号的余额。</p>
		</el-alert>

		<div class="box">
      <el-tabs v-model="active" type="card">
        <el-tab-pane label="A分余额" name="balanceA" :disabled="loading"></el-tab-pane>
        <el-tab-pane label="清空记录" name="clearLog" :disabled="loading"></el-tab-pane>
      </el-tabs>

			<el-form :inline="true" v-if="active == 'balanceA'">
				<el-form-item label="部门">
            <ShowDeptName :deptId.sync="formData.dept_id"></ShowDeptName>
				</el-form-item>

				<el-form-item>
					<el-input v-model="formData.keyword" placeholder="输入同事姓名" max="200" @keyup.enter.native="getList()" class="persons_name">
            <el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
          </el-input>
				</el-form-item>

				<el-form-item style="float: right;" >
					<el-button type="primary" @click="clearAPointShow = true">清空A分余额</el-button>
				</el-form-item>

			</el-form>

			<el-table :data="list" style="width: 100%" v-if="active == 'balanceA'" v-loading="loading" >
				<el-table-column label="姓名" prop="name">
					<template slot-scope="scope">
						<userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px" ></userImage>
						<span style="line-height: 50px; padding-left: 10px;"><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></span>
					</template>
				</el-table-column>
				<el-table-column label="A分余额" prop="balance_a"></el-table-column>
				<template slot="empty">
					<div class="nopoint_box">
						<div class="noimg noperson"></div>
						<span class="title">没有对应的数据</span>
					</div>
				</template>
			</el-table>

			<el-table :data="list" style="width: 100%" v-else v-loading="loading" >
				<el-table-column label="操作人" prop="name">
					<template slot-scope="scope">
						<userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px" ></userImage>
						<span style="line-height: 50px; padding-left: 10px;"><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></span>
					</template>
				</el-table-column>
				<el-table-column label="内容" prop="remark">
					<template slot-scope="scope">
						<WWOpenData type="userName" :openid="scope.row.name"></WWOpenData>{{scope.row.remark}}
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="时间"></el-table-column>
				<template slot="empty">
					<div class="nopoint_box">
						<div class="noimg noperson"></div>
						<span class="title">没有对应的数据</span>
					</div>
				</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"
					:page-size="formData.page_size"
					:current-page="formData.page"
					:total="total">
				</el-pagination>
			</center>

			<el-dialog
				title="清空A分余额"
				:visible.sync="clearAPointShow"
				width="500px"
				@close="clearAPointClose('popupForm')">
					<el-form :model="popupForm" ref="popupForm">
						<el-form-item prop="month" :rules="[{ required: true, message: '请选择月份', trigger: 'blur' }]">
							<el-col :span="3">清空</el-col>
							<el-col :span="8">
								<el-date-picker
									style="width: 100%"
									v-model="popupForm.month"
									value-format="yyyy-MM"
									type="month"
									placeholder="请选择月份">
								</el-date-picker>
							</el-col>
							<el-col :span="6">之前的A分</el-col>
						</el-form-item>
					</el-form>
				<span slot="footer">
					<el-button @click="resetForm('popupForm')">取 消</el-button>
					<el-button type="primary" @click="onSubmit('popupForm')">确 定</el-button>
				</span>
			</el-dialog>

		</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
				active: 'balanceA',
				loading: false,
				tips_show: false,
				clearAPointShow: false,
				list: null,
				total: null,
				dept_name: '',
				formData:{
					keyword: '',
					dept_id: 0,
					page: 1,
					page_size: 10,
				},
				dept_tree: null,
				popupForm:{
					month: ''
				},
				toPdept:0,
      }
		},
		watch:{
			'formData.dept_id'(val){
        this.formData.page=1;
				this.getList()
			},
			active(val){
				this.list = []
				this.formData = {
					keyword: '',
					dept_id: 0,
					page: 1,
					page_size: 10,
				}
				val == 'balanceA'?this.getList():this.getLog()
			}
		},
		components: {},
    methods: {
			resetForm(formName){
				this.clearAPointShow = false
        this.$refs[formName].resetFields();
			},
			// 清空数据
			onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
						this.$http('post','/api/integral/site/a/clear',this.popupForm).then((res) => {
							if(res.data.code == 1){
								this.$message.success('清除成功')
								this.resetForm(formName)
								this.getList()
								this.clearAPointShow = false
							}else{
								this.$message.error(res.data.data.msg)
							}
						}).catch((e)=>{
							this.$message.error(e.data.data.msg)
						}).finally(() => {
							this.loading = false
						})
          }
        });
			},
			// 关闭弹窗
			clearAPointClose(formName){
				this.$refs[formName].resetFields()
			},
			// 提示信息
			tips_close() {
				localStorage.setItem('balanceA_tips', 'true')
				this.tips_show = false
			},
			// 页码变更
      handleCurrentChange(val) {
				this.formData.page = val
				this.active == 'balanceA'?this.getList():this.getLog()
			},
      handleSizeChange(val){
				this.formData.page_size = val
				this.active == 'balanceA'?this.getList():this.getLog()
			},
			// 获取列表
			getList(){
        let self = this
        self.loading = true
        self.$http('get','/api/integral/site/a/balance',this.formData).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)
          }
        }).catch((e)=>{
					self.$message.error(e.data.data.msg)
				}).finally(() => {
          self.loading = false
        })
			},
			// 获取日志列表
			getLog(){
        let self = this
				self.loading = true
				let data = {
					page:this.formData.page,
					page_size:this.formData.page_size,
				}
        self.$http('get','/api/integral/site/a/logs',data).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)
          }
        }).catch((e)=>{
					self.$message.error(e.data.data.msg)
				}).finally(() => {
          self.loading = false
        })
			},
      // 递归判断列表，把最后的children设为undefined
      getTreeData(data){
        for(var i=0;i<data.length;i++){
          if(data[i].children.length<1){
            // children若为空数组，则将children设为undefined
            data[i].children=undefined;
          }else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      }
		},
		mounted(){
			if (localStorage.getItem('dept_tree')) {
				this.dept_tree = 	this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')))
			}
      if (localStorage.getItem('balanceA_tips')) {
        this.tips_show = false
      } else {
        this.tips_show = true
      }
			this.getList()
		},
  }
</script>
<style scoped lang="scss">
	.box{
    background-color: #ffffff;
    padding: 20px;
    min-height: calc(100vh - 160px);
	}
	.listData{
		position: relative;
		display: table-cell;
		margin: 0 !important;
		padding: 20px;
		min-height: 600px;
		&::after{
			content: " ";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 1px;
			background: #EBEEF5;
		}
		& .groups_name{
			display: block;
			font-size: 20px;
			color: rgb(48, 49, 51);
			vertical-align: middle;
		}
	}
	/deep/ .el-menu-item{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		&.is-active{
			background-color: #ecf5ff;
		}
	}
	.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;
		}
	}
</style>
