<template>
  <div
    style=" background-color: #fff; padding:15px; padding-top:0; height: 370px; overflow:hidden;"
  >
    <el-table
      ref="rankTable"
      :data="rankList"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ textAlign : 'left' }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="姓名" prop="target_name" width="120px">
        <template slot-scope="scope">
          <div class="rank_head">
            <img
              v-if="scope.row.target_img != null"
              v-bind:src="scope.row.target_img"
              width="42px"
              height="42px"
            >
            <img
              v-if="scope.row.target_img == null"
              src="static/images/head_default.png"
              width="42px"
              height="42px"
            >
            {{scope.row.target_name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="排行">
        <template slot-scope="scope">
          <div style="float:left" class="table-font-number" v-if="scope.row.index <= 3">
            <img src="static/images/rank_01.png" width="20" v-if="scope.row.index == 1">
            <img src="static/images/rank_02.png" width="20" v-if="scope.row.index == 2">
            <img src="static/images/rank_03.png" width="20" v-if="scope.row.index == 3">
          </div>

          <div
            style="float:left"
            class="table-font-number"
            v-if="scope.row.index > 3"
          >No.{{ (currentPage - 1) * 10 + scope.row.index }}</div>
          <div style="float:left" v-if="scope.row.status > 0">
            <img
              style="width:9px; height:17px; margin:3px 5px 0 8px;"
              src="static/images/up_small.png"
              alt
            >
            <span
              style="display:block; float:right; color:rgb(245,108,108)"
            >{{scope.row.rank_change}}</span>
          </div>
          <div style="float:left" v-if="scope.row.status < 0">
            <img
              style="width:9px; height:17px; margin:3px 5px 0 8px;"
              src="static/images/down_small.png"
              alt
            >
            <span
              style="display:block; float:right; color:rgb(103,194,58)"
            >{{scope.row.rank_change}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="总分">
        <template slot-scope="scope">
          <div
            style="color:#409EFF; font-size: 18px;"
            v-bind:class="'table-font-xl table-font-number ' + (scope.row.p_sum < 0 ? 'point-negative' : 'point-positive')"
          >{{ scope.row.p_sum }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        keywords: "",
        category_id: [],
        point_type: 0,
        time_range: "",
        target_id_set: []
      },
      profile: this.$store.getters.user_info,
      totalCount: 0,
      currentPage: 1,
      rankList: null,
      categoryTree: [],
      employeeOptions: [],
      pointTypes: [],
      instantPickerOptions: {
        shortcuts: [
          {
            text: "本周",
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString());
              let start =
                now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
              let end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString());
              let start =
                now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
              let end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const now = new Date();
              let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
              let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const now = new Date();
              let startDate = new Date(
                now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                (now.getMonth() + 11) % 12,
                1
              );
              let endDate = new Date(now.getFullYear(), now.getMonth(), 0);
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          },
          {
            text: "本年",
            onClick(picker) {
              const now = new Date();
              let startDate = new Date(now.getFullYear(), 0, 1);
              let endDate = new Date(now.getFullYear() + 1, 0, 0);
              picker.$emit("pick", [startDate.getTime(), endDate.getTime()]);
            }
          }
        ]
      }
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.target_id == this.$store.getters.user_info.id) {
        return "rank-mine";
      }
      return "";
    },
    onFilterChanged: function() {
      this.currentPage = 1;
      this.loadRankList();
    },
    changePage: function(current) {
      if (isNaN(current) || current < 1) {
        return false;
      }
      this.loadRankList();
    },
    updateEmployeeRange: function(currentVal) {
      if (currentVal) {
        this.loadTargetList();
        this.onFilterChanged();
      } else {
        var self = this;
        this.loadTargetList(() => {
          let idArr = self.employeeOptions.map(item => {
            return item.id;
          });
          self.filter.target_id_set = self.filter.target_id_set.filter(
            item => idArr.indexOf(item) > -1
          );
          self.onFilterChanged();
        });
      }
    },
    //获取控件所需数据
    loadWidgetData: function() {
      var self = this;
      this.$http('get',"/integral.php/ajax_request_common/prepare_integral_options",{id: this.profile.id,category_tree: 1})
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data;
            try {
              self.categoryTree = jsonData.category_tree;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //获取可排名的员工列表
    loadTargetList: function(callback) {
      var self = this;
      this.$http('get',"/integral.php/point_data/load_target_list",{site_id: this.profile.id,manager_only: 1})
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data;
            try {
              self.employeeOptions = jsonData;
              if (callback) {
                callback.call();
              }
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadPointType: function() {
      var self = this;
      this.$http('get',"/integral.php/ajax_request_common/get_point_types")
        .then(function(response) {
          if (response.status == 200) {
            let jsonData = response.data;
            try {
              self.pointTypes = jsonData;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    loadRankList: function() {
      let params = {
        site_id: this.profile.site_id,
        page: this.currentPage,
        manager_only: 1,
        interval: 6
      };
      for (let item in this.filter) {
        let value = this.filter[item];
        if (item == "target_id_set") {
          if (!value || value.length == 0) {
            continue;
          }
          params[item] = value.join(",");
        } else if (item == "category_id" || item == "dept_id") {
          if (!value || value.length == 0) {
            continue;
          }
          params[item] = value[value.length - 1];
        } else if (item == "time_range") {
          if (!value || value.length < 2) {
            continue;
          }
          let timeRangeArr = value.map(x => parseInt(x / 1000));
          timeRangeArr[1] += 60 * 60 * 24 - 1;
          params[item] = timeRangeArr.join(",");
        } else {
          params[item] = value;
        }
      }
      var self = this;
      this.$http('get',"/integral.php/point_data/rank_by_employee",params)
        .then(function(response) {
          if (response.status == 200) {
            let jsonData = response.data;
            try {
              self.totalCount = jsonData.total_count;
              self.rankList = jsonData.list_data;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
    this.loadRankList();
  }
};
</script>

<style>
tbody .image-container div.cell {
  height: 42px;
}

.rank_head img {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-right: 5px;
}
.rank_head * {
  vertical-align: middle;
}
</style>
