<template>
  <div>
    <div class="integral_statistics_box">
      <el-row :gutter="10" style="margin-bottom: 20px;margin-right:8px;">
        <el-col :span="5"><el-date-picker v-model="formData.month" type="month" placeholder="请选择月份" value-format="yyyy-MM" :clearable="false"></el-date-picker></el-col>
        <el-col :span="5">
            <ShowDeptName :deptId.sync="formData.dept_id"></ShowDeptName>
        </el-col>
        <el-col :span="5" class="search">
          <el-input v-model="formData.keyword" placeholder="输入同事姓名" @keyup.enter.native="get_all_integral">
            <el-button slot="append" @click="get_all_integral" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :offset="6" :span="3">
          <el-button class="company_intergral_button" @click="export_all" type="primary" :disabled="deriveDis">导出报表</el-button>
        </el-col>
      </el-row>

      <el-table :data="all_integral_list" style="width: 100%" v-loading="loading" @row-click="open_all_integral">
        <el-table-column prop="employee_name" label="姓名" align="left">
          <template slot-scope="scope">
            <span class="fl"><userImage :id="scope.row.employee_id" width="50px" height="50px" :user_name="scope.row.employee_name"></userImage></span>
            <span style="margin-left: 10px; line-height: 50px; display: inline-block"><WWOpenData type="userName" :openid="scope.row.employee_name"></WWOpenData></span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="performance" label="绩效分" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.performance < 0 ? 'color_green' : ''">{{
              scope.row.performance
            }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="a" label="A分" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.a < 0 ? 'color_green' : ''">{{ scope.row.a }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="b" label="B分" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.b < 0 ? 'color_green' : ''">{{ scope.row.b }}</span>
          </template>
        </el-table-column>

        <template slot="empty">
          <noData></noData>
        </template>
      </el-table>

      <center style="padding: 20px 0;">
        <el-pagination
          background
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :page-size="pageLimit1"
          :total="total"
        ></el-pagination>
      </center>

      <el-drawer :visible.sync="all_integral_show" :before-close="drawer_close" :with-header="false">
        <div class="drawer_title">
          <WWOpenData type="userName" :openid="all_integral_row.employee_name"></WWOpenData>
          的积分
        </div>
        <div style="padding: 30px">
          <el-row>
            <el-col :span="24">
              <el-radio v-model="radio" label="1">B分</el-radio>
              <el-radio v-model="radio" label="2">A分</el-radio>
              <!-- <el-radio v-model="radio" label="3">绩效分</el-radio> -->
            </el-col>
          </el-row>
        </div>
        <div v-show="noChartData">
          <div class="nopoint_box">
            <div class="noimg noperson"></div>
            <span class="title">没有对应的数据</span>
          </div>
        </div>
        <div id="chartLineBox" v-loading="chartLoading" v-show="!noChartData" style="height: 300px;"></div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import echarts from 'echarts';
import season from '@/components/season';
import noData from '@/components/noData';

export default {
  data() {
    return {
      value5: null,
      checked: true,
      loading: false,
      all_integral_list: null,
      formData: {
        month: this.$moment().format('YYYY-MM'),
        keyword: '',
        dept_id: '',
        page: 1,
        page_size: 10
      },
      total: 0,
      dept_tree: [],
      dept_name: [],
      sort_checked: false,
      point_types: JSON.parse(localStorage.getItem('SET_POINT_TYPES')),
      integral_ranking_list: [],
      all_integral_show: false,
      all_integral_row: {},
      chartLine: null,
      radio: '1',
      pageLimit1: 10,
      noChartData: false,
      chartLoading: false,
      toPdept1: 0,

      deriveJobId: '',
      deriveJobIf: 0,
      deriveDis: false,
      aherfUrl: ''
    };
  },
  components: { season, noData },
  methods: {
    //
    handleSizeChange1(val) {
      this.pageLimit1 = val;
      this.formData.page_size = this.pageLimit1;
      this.get_all_integral();
    },
    open_all_integral(row, column, event) {
      this.all_integral_show = true;
      this.all_integral_row = row;
      this.initEChartOption();
      this.$nextTick(() => {
        this.chartLine = echarts.init(document.getElementById('chartLineBox'));
      });
      this.get_Bdata();
    },
    handleCurrentChange(val) {
      this.formData.page = val;
      this.get_all_integral();
    },
    drawer_close() {
      this.all_integral_show = false;
      this.radio = '1';
    },
    get_all_integral() {
      let self = this;
      self.loading = true;
      self
        .$http('get', '/api/integral/statistics/list', self.formData)
        .then(res => {
          if (res.data.code == 1) {
            self.all_integral_list = res.data.data.list;
            self.total = res.data.data.total;
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {
          self.loading = false;
        });
    },
    downloadResult() {
      if (this.deriveJobIf < 5) {
        this.$http('get', '/api/download/result', {
          job_id: this.deriveJobId
        }).then(res => {
          if (res.data.code == 1) {
            // window.open(res.data.data.url)
            // window.location.href = res.data.data.url
            this.aherfUrl = res.data.data.url;
            this.deriveJobId = '';
            this.deriveDis = false;
            this.$nextTick(() => {
              this.$refs.aherfClick.click();
              // this.aderivecli()
            });
          } else {
            setTimeout(() => {
              this.deriveJobIf++;
              this.downloadResult();
            }, 3000);
          }
        });
      } else {
        this.deriveJobIf = 0;
        this.deriveJobId = '';
        this.deriveDis = false;
        this.aherfUrl = '';
        this.$message.warning('导出超时');
      }
    },
    export_all() {
      let params = {
        month: this.formData.month,
        keyword: this.formData.keyword,
        dept_id: this.formData.dept_id,
        async: 0,
        data_type: 2,
        employee_id: this.$userInfo().id
      };
      this.$downloadFile('api/download/list',params,this.$route.path);
    },
    initEChartOption() {
      this.option = {
        tooltip: { show: false },
        grid: {
          containLabel: true,
          top: '4%',
          right: '4%',
          bottom: '5%',
          left: '7%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: { lineStyle: { color: '#eee' } },
          axisLabel: { color: '#333' }
        },
        yAxis: {
          position: 'right',
          axisLine: { lineStyle: { color: '#eee' } },
          axisLabel: { color: '#333' },
          type: 'value',
          splitLine: { lineStyle: { color: '#eee' } }
        },
        series: {
          type: 'line',
          lineStyle: { normal: { color: '#26A2FF' } }
        }
      };
    },
    // A分
    get_Adata() {
      let self = this;
      let month = self.formData.month;
      if (!month) {
        month = self.$moment().format('YYYY-MM');
      }
      self.chartLoading = true;
      self
        .$http('get', '/api/integral/statistics/a', {
          employee_id: self.all_integral_row.employee_id,
          month: month
        })
        .then(res => {
          if (res.data.code == 1) {
            const xAxisData = [];
            const { a, chart, list } = res.data.data;
            if (Object.keys(chart)) {
              self.noChartData = false;
              const points = chart.reward.map((rewardItem, index) => {
                xAxisData.push(rewardItem.month);
                return rewardItem.point + (chart.deduction[index].point || 0);
              });
              this.setEChartOption(xAxisData, points);
            } else {
              self.noChartData = true;
            }
          }
        })
        .catch(e => {
          self.$message.error(e.data.msg);
        })
        .finally(() => {
          self.chartLoading = false;
        });
    },
    // B分
    get_Bdata() {
      let self = this;
      let month = self.formData.month;
      if (!month) {
        month = self.$moment().format('YYYY-MM');
      }
      self.chartLoading = true;
      self
        .$http('get', '/api/integral/statistics/b', {
          employee_id: self.all_integral_row.employee_id,
          month: month
        })
        .then(res => {
          if (res.data.code == 1) {
            const xAxisData = [];
            const { b, chart, good, bad } = res.data.data;
            if (Object.keys(chart)) {
              self.noChartData = false;
              const points = chart.reward.map((rewardItem, index) => {
                xAxisData.push(rewardItem.month);
                return rewardItem.point + (chart.deduction[index].point || 0);
              });
              this.setEChartOption(xAxisData, points);
            } else {
              self.noChartData = true;
            }
          }
        })
        .catch(e => {
          self.$message.error(e.data.msg);
        })
        .finally(() => {
          self.chartLoading = false;
        });
    },
    // 绩效分
    get_JXdata() {
      let self = this;
      let month = self.formData.month;
      if (!month) {
        month = self.$moment().format('YYYY-MM');
      }
      self.chartLoading = true;
      self
        .$http('get', '/api/integral/statistics/performance', {
          employee_id: self.all_integral_row.employee_id,
          month: month
        })
        .then(res => {
          if (res.data.code == 1) {
            const xAxisData = [];
            const { chart, performance, works } = res.data.data;
            if (chart.length > 0) {
              self.noChartData = false;
              const completionRateData = chart.map((item, index) => {
                xAxisData.push(item.month);
                // // 比例图
                // return item.scale * 100
                // 最终得分图 20200825 俊华
                return item.review_point;
              });
              this.setEChartOption(xAxisData, completionRateData);
            } else {
              self.noChartData = true;
            }
          }
        })
        .catch(e => {
          self.$message.error(e.data.msg);
        })
        .finally(() => {
          self.chartLoading = false;
        });
    },
    setEChartOption(xAxisData, points) {
      this.option.xAxis.data = xAxisData;
      if (points !== null && points.length !== 0) {
        this.option.series.data = points;
      }
      this.chartLine.setOption(this.option);
    },
    // 递归判断列表，把最后的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')));
    }
    this.get_all_integral();
  },
  watch: {
    radio(val) {
      if (val == 1) {
        // B分
        this.noChartData = false;
        this.get_Bdata();
      } else if (val == 2) {
        // A分
        this.noChartData = false;
        this.get_Adata();
      } else {
        // 绩效分
        this.noChartData = false;
        this.get_JXdata();
      }
    },
    'formData.month'(val, old_val) {
      this.formData.page = 1;
      this.get_all_integral();
    },
    'formData.dept_id'(val) {
      this.formData.page = 1;
      this.get_all_integral();
    }
  }
};
</script>

<style scoped>
.el-date-editor.el-input {
  width: auto;
}

.color_green {
  color: #67c23a;
}

.date-picker-width {
  width: 145px !important;
}

.label {
  padding-right: 10px;
}

.time_type_class {
  width: 80px;
}

.drawer_title {
  font-size: 18px;
  padding: 20px;
}
/* .deptment /deep/ input::-webkit-input-placeholder {
    color: #606266 !important;
	} */
.search /deep/ .el-input-group__append:active {
  background: #26a2ff;
}
.search /deep/ .el-input-group__append:active .el-icon-search {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.chart_content {
  .chart-legend__wrap {
    text-align: right;
    padding: 20px;
    padding-right: 50px;

    & .chart-legend__pink {
      position: relative;
      padding-left: 12px;
      padding-right: 5px;

      &:after {
        content: '';
        position: absolute;
        margin-top: -2px;
        top: 35%;
        left: 0;
        width: 8px;
        height: 8px;
        background: #f56c6c;
        border-radius: 100%;
      }
    }

    & .chart-legend__green {
      position: relative;
      padding-left: 12px;

      &:after {
        content: '';
        position: absolute;
        margin-top: -2px;
        top: 35%;
        left: 0;
        width: 8px;
        height: 8px;
        background: #53b87f;
        border-radius: 100%;
      }
    }
  }
}
.integral_statistics_box {
  background-color: #ffffff;
  padding: 20px;
  min-height: calc(100vh - 160px);
}
.nopoint_box {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}
.noimg {
  display: inline-block;
  width: 110px;
  height: 110px;
  margin: 22px auto 16px;
  /* background:url(/images/nodata_default.png) no-repeat center; */
  background-size: 99%;
}
.noperson {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: none;
  margin: 22px auto 16px;
  background: url(/images/noperson_default.png) no-repeat center;
  background-size: 99%;
}
.title {
  display: block;
  text-align: center;
  font-size: 12px !important;
  line-height: 30px;
  color: #909399 !important;
  padding: 0;
}
.nopoint_box a {
  color: #26a2ff;
}
</style>
