<template>
  <div v-loading="loading" class="PkDetailBox">
    <div style="padding:15px;">



      <div class="inline-block-btn-list">

        <el-select v-model="RulePagination.filter.screen" placeholder="排序" @change="onFilterChange">
          <el-option
            :key="0"
            label="默认排序"
            :value="0">
          </el-option>

          <el-option
            :key="1"
            label="按最新时间排序"
            :value="1">
          </el-option>

          <el-option
            :key="2"
            label="只看奖分"
            :value="2">
          </el-option>

          <el-option
            :key="3"
            label="只看扣分"
            :value="3">
          </el-option>

        </el-select>
        <el-date-picker
          value-format="yyyy-MM"
          v-model="RulePagination.filter.time_range"
          type="month"
          format="yyyy-MM"
          @change="onFilterChange"
          placeholder="选择月份">
        </el-date-picker>

        <div class="gap-right-8" style="display:inline-block; width:300px; margin-bottom:0;">
          <el-input
            placeholder="输入备注查找"
            ref="search-bar"
            v-model="RulePagination.filter.keywords"
            class="input-with-select"
            @keyup.enter.native="onFilterChange"
          >
            <el-button slot="append" icon="el-icon-search" @click="onFilterChange"></el-button>
          </el-input>
        </div>


      </div>
      <el-row :gutter="20">
        <el-col :span="16">
          <h3 style="margin:0; font-size: 18px; margin-top:8px;">
            姓名：{{pk_info.manager_name}}
          </h3>
          <div style="font-size: 16px; color:#999; margin-top:12px;">
              <span style="font-weight: normal; font-family: '微软雅黑'; font-size:16px;">
                奖分任务：{{pk_info.addTask}}　　扣分任务：{{pk_info.deductTask}}
              </span>
          </div>
        </el-col>
        <el-col :span="8">
          <el-row :gutter="15" class="rankListBox">

            <el-col :span="8">
              <p>{{pk_info.addPoint}}</p>已奖分
            </el-col>
            <el-col :span="8">
              <p>{{pk_info.deductPoint}}</p>已扣分
            </el-col>
            <el-col :span="8">
              <p v-if="pk_info.addPoint !=0 && pk_info.deductPoint != 0">{{(pk_info.deductPoint/pk_info.addPoint*100).toFixed(1)}}%</p>
              <p v-else>0%</p>
              奖扣比例
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="dataTab">


      <el-tab-pane label="积分明细" name="third">
        <div style="padding:15px;">

          <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="PointEvent"
            :border="false"
            tooltip-effect="dark"
          >
            <el-table-column prop="name" label="姓名">

            </el-table-column>




            <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"></el-table-column>

            <el-table-column label="分值">
              <template slot-scope="scope">
                <span
                  v-bind:class="scope.row.point < 0 ? 'point-negative' : 'point-positive'"
                >{{ scope.row.point }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="event_time" label="事件日期" :formatter="dateFormatter"></el-table-column>

          </el-table>
          <el-pagination
            background
            layout="total,prev, pager, next"
            :page-size="RulePagination.pageLimit"
            :page-sizes="[10, 20, 50, 100]"
            :total="RulePagination.totalCount"
            :current-page.sync="RulePagination.currentPage"
            @current-change="loadPkDetail"
          ></el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>


  </div>
</template>
<script>


import moment from 'moment'
export default {

  props: {
    pk_id: {
      type: String,
      default: ""
    }
  },
  watch: {
    dataTab(new_val, old_val) {
      let self = this;

    }
  },
  data() {
    return {
      employeeOptions: [],
      mine: false,
      PKFormRules: {
        name: [
          { required: true, message: "请输入PK名称", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        "time_range[0]": [
          { required: true, message: "请选择时间", trigger: "blur" }
        ]
      },

      myTeamName: "",
      pkInfo: {
        id: 0,
        name: "",
        time_range: [],
        manager_ids: [],
        leader_can_record: false
      },

      log_time_range: [],

      rule_keyword: "",
      is_manager: false,

      dialogPkVisible: false,
      /*编辑团队的配置*/
      dialogAddteamVisible: false,
      setTeamTitle: "创建团队",
      is_leader: false,

      saveTeamInfoApi: "/integral.php/integral_pk_team/add",
      setTeamActive: 0,
      teameditloading: false,
      EmployeeMap: {},
      teamInfo: {
        id: 0,
        name: "",
        leader_id: 0,
        member: []
      },
      teamFormRules: {
        name: [
          { required: true, message: "请输入团队名称", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ]
      },
      assignableList: [],
      can_record: false,
      loading: false,
      profile: this.$store.getters.user_info,
      RulePagination: {
        pageLimit: 5,
        totalCount: 0,
        currentPage: 1,
        filter: {
          screen:0,
          keywords: "",
          time_range: moment().format('YYYY-MM')
        }
      },
      PointEvent: [],
      tableData: [],
      RuleList: [],
      TeamList: [],
      pk_info: [],
      dataTab: "third",

      member_data: { rank_team: 0, rank_all: 0, point: 0 }
    };
  },
  methods: {
    cancelHandle() {
      this.dialogPkVisible = false;
      // this.pkInfo.manager_ids = [];
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format("YYYY年MM月DD日");
    },


    loadPkDetail() {
      if (isNaN(this.pk_id)) {
        return false;
      }

      this.loading = true;
      this.Formdata;

      let params = {
        manager_id: this.pk_id,
        keywords: this.RulePagination.filter.keywords,
        month:this.RulePagination.filter.time_range,
        page: this.RulePagination.currentPage,
        interval: this.RulePagination.pageLimit,
        screen:this.RulePagination.filter.screen
      };

      var self = this;
      self.loading = true;
      this.$http('get',"/integral.php/manager_point/getManagerPointDetail",params)
        .then(function(response) {
          if (response.status == 200) {
            self.loading = false;
            let jsonData = response.data;
            try {
              self.RulePagination.totalCount = jsonData.data.addTaskNum + jsonData.data.deductTaskNum
              self.PointEvent = jsonData.data.pointList
              self.pk_info = jsonData.data;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },


    onFilterChange:function(){
      this.RulePagination.currentPage = 1
      this.loadPkDetail()
    },


    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false;
      }
      //this.loadLogList();
    },


  },

  created() {
    const self = this;
  }
};
</script>
<style>
.PkDetailBox .grid-content {
  min-height: 300px;
  position: relative;
  border-right: 1px solid #eee;
  padding-right: 20px;
}
.PkDetailBox .no-data-img {
  max-width: 100%;
}
.PkDetailBox .grid-content .el-table__column-filter-trigger {
  line-height: 23px;
}
.PkDetailBox .rankListBox {
  text-align: center;
  margin-top: 9px;
  color: #999;
}
.PkDetailBox .rankListBox p {
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
  color: #333;
}
</style>
