<template>
  <div class="module_box">
    <div class="search">
        <el-date-picker :clearable="false" v-model="date" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
    </div>
    <div class="table_page">
      <el-table :data="dataList" style="width:100%" ref="dataList"  @row-click="openDetail" tooltip-effect="dark" v-loading="loading">
        <el-table-column prop="task_name" label="姓名" align="center">
          <template slot-scope="scope">
            <div class="flex-box flex-v-ce">
              <userImage class="user_img person_imghead" :id="scope.row.id" width="46px" height="46px" :user_name="scope.row.name"
                :img_url="scope.row.img_url">
              </userImage>
              <span style="margin-left: 20px;"><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="进度" align="center">
          <template slot-scope="scope">
                <el-progress type="circle" :percentage="scope.row.progress" :width='width'></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="base_point" align="center">
            <template slot="header" slot-scope="scope">
              <span>月平衡分</span>
              <el-tooltip placement="top">
                <div slot="content">当月绩效总分，按预期完成可得月平衡分。</div>
                <span class="tips">?</span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
                <span>{{scope.row.base_point||'--'}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="review_point" label="最终得分" align="center">
          <template slot="header" slot-scope="scope">
            <span>最终得分</span>
            <el-tooltip placement="top">
              <div slot="content">当月绩效实际得分，由评审人员根据实际完成情况打分。</div>
              <span class="tips">?</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <template slot="empty"><noData></noData></template>
      </el-table>
      <!-- table end -->
      <div class="page">
        <el-pagination @current-change="handleCurrentChange" :current-page="this.page"
          :page-size="this.perPage" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next"
          :total="this.total">
        </el-pagination>
      </div>
      <!-- pagination end -->
    </div>
  </div>
</template>

<script>
  import noData from '@/components/noData'
  export default {
  name: 'participation',
  components:{noData},
  data() {
    return {
      page: 1,
      perPage: 10,
      total: 0,
      loading: false,
      employee_id:this.$store.getters.user_info.id,
      date:this.$moment().format('YYYY-MM'),
      dataList:[],
       width:46,
    };
  },
  watch:{
    "date"(){
      this.getData();
    }
  },
  mounted() {
      if(sessionStorage.getItem('time_date_cy') != null){
        this.date = sessionStorage.getItem('time_date_cy')
      }
    this.getData();
  },
  methods: {
    //点击某一行
    openDetail(item){
    	this.$router.push({
    		path:"/participation_detail",
    		query:{date:this.date,employee_id:item.employee_id}
    	})
    },
    getData(){
      let self = this
        // 存入当前时间
        sessionStorage.setItem('time_date_cy', this.date)
      self.loading = true
      self.$http('get','/api/integral/performance/list',{type:'join', month: self.date,page:self.page,page_size:10}).then((res) => {
        if (res.data.code == 1) {
          self.dataList = res.data.data.list||[]
          self.total = res.data.data.total||0
        } else {
          self.$message.error(res.data.msg)
        }
      }).finally(() => {
        self.loading = false
      })
    },
    //页码变更
    handleCurrentChange: function(val) {
      this.page = val;
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
$blue:#26A2FF;
$red:#F56C6C;
$yellow:#E6A23C;
$green:#67C23A;
$fontColorZ:#303133;
$fontColorF:#909399;
$fontColorT:#C0C4CC;

.module_box{
	overflow: hidden;
	padding: 20px 0px;
  .search{
   padding-bottom: 20px;
  }
  .page{
    text-align: center;
    padding: 20px 0;
  }
  .tips{
    background: $fontColorT;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }

}
</style>
