<template>
  <div>
    <div class="integral_event_box" v-loading="loading">
			<el-row :gutter="20" style="margin-bottom: 20px;">
				<el-col class="time_section" :span="10">
					<span class="label">时间</span>
          <el-date-picker
            v-model="time_slot"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
				</el-col>
        <!-- 
        <el-col :span="6">
					<el-input v-model="formData.keyword" placeholder="输入同事姓名" max="200" class="persons_name">
            <el-button slot="append" icon="el-icon-search" @click="get_integral_list(formData)"></el-button>
          </el-input>
        </el-col> 
        -->
				<el-col :span="6">
					<el-input v-model="formData.keyword" placeholder="请输入积分事件内容" max="200" @keyup.enter.native="get_all_integral(formData)" class="persons_name">
            <el-button slot="append" icon="el-icon-search" @click="get_all_integral(formData)"></el-button>
          </el-input>
				</el-col>
			</el-row>

      <el-table :data="list" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="160px;" align="left">
          <template slot-scope="scope">
            <userImage class="fl" :id="scope.row.employee_id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px" ></userImage>
            <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="point" label="积分" width="100px" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.point < 0?'color_green':'color_red'">{{scope.row.point}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" show-overflow-tooltip label="事件" align="center"></el-table-column>
        <el-table-column prop="source_type" label="来源" width="130px">
          <template slot-scope="scope">
            <span v-show="scope.row.source_type == 1">打卡</span>
            <span v-show="scope.row.source_type == 2">审批</span>
            <span v-show="scope.row.source_type == 3">系统分配</span>
          </template>
        </el-table-column>
        <el-table-column prop="event_time" label="录入时间" width="130px">
          <template slot-scope="scope">
            {{cuttString(scope.row.event_time)}}
          </template>
        </el-table-column>
        <el-table-column prop="event_time" label="操作" width="100px" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="del_integral_event(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <center class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :page-size="pageLimit"
          :total="total">
        </el-pagination>
      </center>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
				point_types: JSON.parse(localStorage.getItem('SET_POINT_TYPES')),
        dept_tree: [],
        formData:{
          page: 1 ,
          page_size: 10,
          keyword: ''
        },
        time_slot: null,
        props:{value: 'id', label: 'name',children:'child'},
        rule: [],
        list: [],
        total: null,
        detail_info: null,
        pageLimit: 10
      }
    },
    created(){
    },
    mounted(){
      this.get_integral_list(this.formData)
    },
    watch:{
      time_slot(val,old_val){
        if (val !== null) {
          this.formData.start_date = val[0]
          this.formData.end_date = val[1]
        }else{
          delete this.formData.start_date
          delete this.formData.end_date
        }
        this.get_integral_list(this.formData)
      },
    },
    methods:{
      get_all_integral(formData){//点击搜索
        formData.page = 1
        this.get_integral_list(formData)
      },
      handleCurrentChange(val){
        this.formData.page = val
        this.get_integral_list(this.formData)
      },
      handleSizeChange(val){
        this.pageLimit = val
        this.formData.page_size = this.pageLimit
        this.get_integral_list(this.formData)
      },
      cuttString(data){
        return data.substring(0,10)
      },
      get_integral_list(data){
        let self = this
        let params = data
        self.loading = true
        this.$jtoken.get(this.serveAd + '/ad/statistics/events',{params: params}).then((res) => {
          if (res.data.code == 1) {
            self.list = res.data.data.list
            self.total = res.data.data.total
          }
        }).catch((err) => {
          console.log(err)
        }).finally(()=>{
          self.loading = false
        })
      },
      del_integral_event(item){
        let self = this
        self.$confirm('删除事件的同时也会撤销积分，确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.loading = true
          self.$jtoken({
            url: self.serveAd + '/ad/statistics/events_drop',
            method: 'post',
            data: {event_id: item.id},
          }).then((res) => {
            if (res.data.code == 1) {
              self.$message.success('删除成功')
              self.get_integral_list(this.formData)
            }
          }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {self.loading = false})
        })
      },
      point_name(id){
        return this.point_types.find((item)=>{if (item.id == id) {return item.name}}).name
      }
    }
  }
</script>
<style scoped lang="scss">
  header.el-drawer__header {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    color: #303133;
    width: 500px;
    span{
      :focus{
        outline:0;
      }
    }
  }
  .label{
    line-height: 36px;
    padding-right: 10px;
  }
  .time_section{
    .el-range-editor{
      width: 330px;
    }
  }
  .color_green{
    color: #67C23A;
  }
  .pagination{
    padding: 20px 0;
  }
  .detail_popup{
    padding: 20px;
    height: 100%;
    .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;
      }
    }
  }
  .color_red{
    color: #F56C6C;
  }
  .color_green{
    color: #67C23A;
  }
  span.point{
    font-size: 16px;
  }
	.drawer_title{
		font-size: 18px;
		padding: 20px;
    border-bottom:1px #efefef solid;
  }
  .row_tips{
    display:block;
    color: #909399;
    font-size: 12px;
    margin-top:0px;
  }
  .el-range-editor--medium .el-range-separator{
    width: 25px;
  }
	.integral_event_box{
		background-color: #ffffff; 
		padding: 20px; 
		min-height: calc(100vh - 160px);
	}
  .examine_steps /deep/.el-step.is-vertical .el-step__title{
    padding-bottom: 0
  }
  
</style>