<template>
  <div style>
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-cascader
        v-show="false"
        clearable
        :options="deptTree"
        change-on-select
        v-model="filter.dept_id"
        @change="loadChartData"
        placeholder="选择部门进行筛选"
        class="gap-right-8 first-element-btn"
      ></el-cascader>
      <el-cascader
        v-show="false"
        clearable
        :options="categoryTree"
        change-on-select
        v-model="filter.category_id"
        @change="loadChartData"
        placeholder="选择积分分类进行筛选"
        class="gap-right-8"
      ></el-cascader>

      <el-date-picker
        v-show="false"
        class="gap-right-8"
        v-model="filter.time_range"
        type="daterange"
        value-format="timestamp"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="instantPickerOptions"
        @change="loadChartData"
      ></el-date-picker>
    </div>

    <el-tabs v-model="tab_0" type="card" @tab-click="tabClick">
      <el-tab-pane
        v-for="(item, index) in dept_list.department_data"
        v-if="item.dept_id > 0"
        :key="item.dept_id"
        :label="item.dept_name"
        :name="'tab_'+index"
      >
        <div style="padding:15px; background-color: #fff;">
          <div style class="inline-block-btn-list">
            <el-select
              v-show="settings.point_set.indexOf('a') >= 0"
              v-model="filter.point_type"
              @change="loadChartData"
              class="gap-right-8"
              style="width:90px;"
            >
              <el-option
                v-for="item in pointTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

            <el-date-picker
              class="gap-right-8"
              v-model="filter.time_range"
              type="daterange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="instantPickerOptions"
              @change="loadChartData"
            ></el-date-picker>
          </div>
          <!-- <div
            style="
              position: absolute;
              width: 100%;
              top: 50%;
              margin-top: -115px;
          "
          >
            <img
              v-if="tableData.length == 0"
              src="static/images/nodata.png"
              style="display: block; margin:0 auto;"
            >
            <p style="color:#ccc; text-align: center">暂无积分事件</p>
          </div> -->
          <ChartDeptBar
            :dept_name="{
              text:item.dept_name+'（'+item.employee_count+'人)',
              top:10,
              left:10,
              textStyle:{
              fontSize:14,
              lineHeight:30
              },
              subtext:'负责人：'+item.employee_name
          }"
            :dept_id="item.dept_id"
            :ref="'chart_'+index"
            :time_range="time_range"
          ></ChartDeptBar>

          <div v-bind:class="{'display-table':true, 'f1f1f1': (index%3==0), 'f7f7f7':(index%3!=0)}">
            <div
              class="display-table-cell data-box"
              style="padding-right:10px;"
              v-loading="loading"
            >
              <div
                class="el-table__body-wrapper is-scrolling-none"
                style="min-width:350px;overflow: visible;"
              >
                <el-card shadow="always">
                  <table class="el-table__body" width="100%">
                    <tr class="thead">
                      <td width="120" style="font-weight: normal">部门奖扣统计</td>
                      <td>{{timeText}}</td>

                      <td>与{{timeTextBefore}}对比</td>
                    </tr>
                    <tr class="tbody">
                      <td align="left">部门奖分</td>
                      <td>
                        <span class="add_point">{{item.add_point.point_sum*1}}</span>
                        <span
                          v-if="item.add_point.point_sum>dept_list.department_data_before[index].add_point.point_sum"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          style="color:#5381ff;"
                          v-if="item.add_point.point_sum<dept_list.department_data_before[index].add_point.point_sum"
                        >⇩</span>
                      </td>
                      <td>
                        <span
                          class="add_point"
                        >{{dept_list.department_data_before[index].add_point.point_sum*1}}</span>
                      </td>
                    </tr>
                    <tr class="tbody">
                      <td align="left">部门扣分</td>
                      <td>
                        <span class="sub_point">{{item.sub_point.point_sum*1}}</span>
                        <span
                          v-if="item.sub_point.point_sum>dept_list.department_data_before[index].sub_point.point_sum"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          style="color:#5381ff;"
                          v-if="item.sub_point.point_sum<dept_list.department_data_before[index].sub_point.point_sum"
                        >⇩</span>
                      </td>
                      <td>
                        <span
                          class="sub_point"
                        >{{dept_list.department_data_before[index].sub_point.point_sum*1}}</span>
                      </td>
                    </tr>
                    <tr class="tbody">
                      <td align="left">奖分次数</td>
                      <td>
                        <span class="point_count">{{item.add_point.event_count*1}}</span>
                        <span
                          v-if="item.add_point.event_count>dept_list.department_data_before[index].add_point.event_count"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          style="color:#5381ff;"
                          v-if="item.add_point.event_count<dept_list.department_data_before[index].add_point.event_count"
                        >⇩</span>
                      </td>
                      <td>
                        <span
                          class="point_count"
                        >{{dept_list.department_data_before[index].add_point.event_count*1}}</span>
                      </td>
                    </tr>
                    <tr class="tbody">
                      <td style="border:none;" align="left">扣分次数</td>
                      <td style="border:none;">
                        <span class="point_count">{{item.sub_point.event_count*1}}</span>
                        <span
                          v-if="item.sub_point.event_count>dept_list.department_data_before[index].sub_point.event_count"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          v-if="item.sub_point.event_count<dept_list.department_data_before[index].sub_point.event_count"
                          style="color:#5381ff;"
                        >⇩</span>
                      </td>
                      <td style="border:none;">
                        <span
                          class="point_count"
                        >{{dept_list.department_data_before[index].sub_point.event_count*1}}</span>
                      </td>
                    </tr>
                  </table>
                </el-card>
              </div>
            </div>

            <div class="display-table-cell data-box" style="padding-left:0; " v-loading="loading">
              <div
                class="el-table__body-wrapper is-scrolling-none"
                style="min-width:350px; overflow: visible;"
              >
                <el-card shadow="always">
                  <table class="el-table__body" width="100%">
                    <tr class="thead">
                      <td width="180" style="font-weight: normal">管理者执行奖扣统计</td>
                      <td>{{timeText}}</td>

                      <td>与{{timeTextBefore}}对比</td>
                    </tr>
                    <tr class="tbody">
                      <td align="left">奖分</td>
                      <td>
                        <span class="add_point">{{dept_list.now[index].add_point.point_sum*1}}</span>
                        <span
                          v-if="dept_list.now[index].add_point.point_sum>dept_list.before[index].add_point.point_sum"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          style="color:#5381ff;"
                          v-if="dept_list.now[index].add_point.point_sum<dept_list.before[index].add_point.point_sum"
                        >⇩</span>
                      </td>
                      <td>
                        <span class="add_point">{{dept_list.before[index].add_point.point_sum*1}}</span>
                      </td>
                    </tr>
                    <tr class="tbody">
                      <td align="left">扣分</td>
                      <td>
                        <span class="sub_point">{{dept_list.now[index].sub_point.point_sum*1}}</span>
                        <span
                          v-if="dept_list.now[index].sub_point.point_sum>dept_list.before[index].sub_point.point_sum"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          style="color:#5381ff;"
                          v-if="dept_list.now[index].sub_point.point_sum<dept_list.before[index].sub_point.point_sum"
                        >⇩</span>
                      </td>
                      <td>
                        <span class="sub_point">{{dept_list.before[index].sub_point.point_sum*1}}</span>
                      </td>
                    </tr>
                    <tr class="tbody">
                      <td align="left">奖分次数</td>
                      <td>
                        <span class="point_count">{{dept_list.now[index].add_point.event_count*1}}</span>
                        <span
                          v-if="dept_list.now[index].add_point.event_count>dept_list.before[index].add_point.event_count"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          style="color:#5381ff;"
                          v-if="dept_list.now[index].add_point.event_count<dept_list.before[index].add_point.event_count"
                        >⇩</span>
                      </td>
                      <td>
                        <span
                          class="point_count"
                        >{{dept_list.before[index].add_point.event_count*1}}</span>
                      </td>
                    </tr>
                    <tr class="tbody">
                      <td style="border:none;" align="left">扣分次数</td>
                      <td style="border:none;">
                        <span class="point_count">{{dept_list.now[index].sub_point.event_count*1}}</span>
                        <span
                          v-if="dept_list.now[index].sub_point.event_count>dept_list.before[index].sub_point.event_count"
                          style="color:#f00;"
                        >⇧</span>
                        <span
                          v-if="dept_list.now[index].sub_point.event_count<dept_list.before[index].sub_point.event_count"
                          style="color:#5381ff;"
                        >⇩</span>
                      </td>
                      <td style="border:none;">
                        <span
                          class="point_count"
                        >{{dept_list.before[index].sub_point.event_count*1}}</span>
                      </td>
                    </tr>
                  </table>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div v-if="dept_list.department_data">
      <div v-if="dept_list.department_data.length == 0" style="background-color: #fff; padding-top:50px; height:750px;">
          <img src="static/images/nodata.png" style="display: block; margin:0 auto;" class="no-data-img">
          <p style="color: rgb(204, 204, 204); text-align: center;">暂无数据</p>
        </div>
    </div>

  </div>
</template>
<script>
import ChartDeptBar from '@/views/integral/ChartDeptBar'
import moment from 'moment'
export default {
  data() {
    const now = new Date()
    const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
    const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)

    return {
      settings: this.$store.getters.system_setting,
      tab_0: 'tab_0', //
      time_range: [startDate, endDate],
      filter: {
        dept_id: [],
        category_id: [],
        point_type: 0,
        time_range: ''
      },
      loading: false,
      timeText: '本月',
      timeTextBefore: '前一月',

      dept_list: [],

      profile: this.$store.getters.user_info,
      categoryTree: [],
      deptTree: [],
      pointTypes: [],
      trendChartContainerId: 'trend-chart-container',
      structurePositiveChartContainerId: 'structure-positive-chart-container',
      structureNegativeChartContainerId: 'structure-negative-chart-container',
      trendChartOptions: {
        chart: {
          type: 'line'
        },
        title: {
          text: '积分趋势图',
          style: {
            fontSize: '14px'
          }
        },
        credits: {
          enabled: false
        },
        colors: ['#42B983', '#F45B5B'],
        xAxis: {
          categories: [],
          labels: {
            style: {
              fontSize: '13px'
            }
          },
          title: {
            text: null
          }
        },
        yAxis: {
          title: {
            text: null
          },
          labels: {
            style: {
              fontSize: '13px'
            }
          },
          minTickInterval: 1
        },
        series: [],
        lang: {
          noData: '暂无数据'
        },
        noData: {
          style: {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#303030'
          }
        }
      },
      structurePositiveChartOptions: {
        chart: {
          type: 'pie'
        },
        title: {
          text: '奖分构成图',
          style: {
            fontSize: '14px'
          }
        },
        credits: {
          enabled: false
        },
        yAxis: {
          title: {
            text: null
          },
          labels: {
            style: {
              fontSize: '13px'
            }
          }
        },
        series: [],
        lang: {
          noData: '暂无数据'
        },
        noData: {
          style: {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#303030'
          }
        }
      },
      structureNegativeChartOptions: {
        chart: {
          type: 'pie'
        },
        title: {
          text: '扣分构成图',
          style: {
            fontSize: '14px'
          }
        },
        credits: {
          enabled: false
        },
        yAxis: {
          title: {
            text: null
          },
          labels: {
            style: {
              fontSize: '13px'
            }
          }
        },
        series: [],
        lang: {
          noData: '暂无数据'
        },
        noData: {
          style: {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#303030'
          }
        }
      },
      instantPickerOptions: {
        shortcuts: [
          {
            text: '本周',
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString())
              const start =
                now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000
              const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上周',
            onClick(picker) {
              const now = new Date(new Date().toLocaleDateString())
              const start =
                now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000
              const end = start + 7 * 24 * 60 * 60 * 1000 - 1000
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const now = new Date()
              const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
              const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
              picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
            }
          },
          {
            text: '上月',
            onClick(picker) {
              const now = new Date()
              const startDate = new Date(
                now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
                (now.getMonth() + 11) % 12,
                1
              )
              const endDate = new Date(now.getFullYear(), now.getMonth(), 0)
              picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
            }
          },
          {
            text: '本年',
            onClick(picker) {
              const now = new Date()
              const startDate = new Date(now.getFullYear(), 0, 1)
              const endDate = new Date(now.getFullYear() + 1, 0, 0)
              picker.$emit('pick', [startDate.getTime(), endDate.getTime()])
            }
          }
        ]
      }
    }
  },
  components: {
    ChartDeptBar
  },
  methods: {
    tabClick() {
      const e = document.createEvent('Event')
      e.initEvent('resize', true, true)
      window.dispatchEvent(e)
    },
    modeTypeFormatter: function(value) {
      switch (value) {
        case 1:
          return '积分录入'
        case 2:
          return '积分申请'
        default:
          return ''
      }
    },
    reviewStatusFormatter: function(row, column, cellValue) {
      return cellValue == 1 ? '待审核' : '已生效'
    },
    dateFormatter: function(row, column, cellValue) {
      return this.$moment(cellValue * 1000).format('YYYY年MM月DD日')
    },
    loadPointType: function() {
      var self = this
      this.$http('get','/integral.php/ajax_request_common/get_point_types')
        .then(function(response) {
          if (response.status == 200) {
            const jsonData = response.data
            try {
              self.pointTypes = jsonData
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 获取积分事件列表
    loadChartData: function() {
      this.loading = true
      let time_range = ''

      if (
        this.filter.time_range != null &&
        this.filter.time_range.length == 2
      ) {
        time_range =
          this.filter.time_range[0] / 1000 +
          ',' +
          (this.filter.time_range[1] / 1000 + 60 * 60 * 24 - 1)
        this.timeText =
          this.$moment(this.filter.time_range[0]).format('YYYY-MM-DD') +
          ' 至 ' +
          this.$moment(this.filter.time_range[1]).format('YYYY-MM-DD')

        const st = this.filter.time_range[1] - this.filter.time_range[0]
        this.timeTextBefore =
          this.$moment(this.filter.time_range[0] - st).format('YYYY-MM-DD') +
          ' 至 ' +
          this.$moment(this.filter.time_range[1] - st).format('YYYY-MM-DD')
      } else {
        this.timeText = '本月'
        this.timeTextBefore = '前一月'
      }

      if (time_range == '') {
        const now = new Date()
        const startDate = new Date(now.getFullYear(), now.getMonth(), 1)
        const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0)
        time_range =
          startDate / 1000 + ',' + (endDate / 1000 + 60 * 60 * 24 - 1)
        this.timeText = '本月'
        this.timeTextBefore = '前一月'
      }
      const params = {
        employee_id: this.profile.id,
        page: this.currentPage,
        time_range: time_range,
        point_type: this.filter.point_type
      }

      var self = this
      this.$http('get','/integral.php/point_data/get_department_point',params)
        .then(function(response) {
          if (response.status == 200) {
            const jsonData = response.data
            self.loading = false
            try {
              self.dept_list = jsonData.data
              console.log('图表重绘')
              self.$nextTick(() => {
                // 部门对应数据不对 需将数组反向才能对应
                self.dept_list.now.reverse()
                self.dept_list.before.reverse()
                self.dept_list.department_data_before.reverse()
                self.dept_list.department_data.reverse()
                for (let i = 0; i < self.dept_list.now.length; i++) {
                  if (self.dept_list.department_data[i].dept_id > 0) {
                    if (
                      self.filter.time_range != null &&
                      self.filter.time_range.length == 2
                    ) {

                      self.$nextTick(()=>{
                        if(self.$refs['chart_' + i][0]){
                          self.$refs['chart_' + i][0].filter.time_range = [
                            self.filter.time_range[0],
                            self.filter.time_range[1]
                          ]
                        }
                      })

                    } else {
                      self.$nextTick(()=>{
                        if(self.$refs['chart_' + i][0]){
                          self.$refs['chart_' + i][0].filter.time_range =
                          self.time_range
                        }
                      })

                    }
                    self.$nextTick(()=>{
                      if(self.$refs['chart_' + i][0]){
                        self.$refs['chart_' + i][0].filter.point_type = self.filter.point_type
                        self.$refs['chart_' + i][0].loadChartData()
                      }
                    })

                  }
                }
                // console.log()
                // for (const i in self.dept_list.department_data.reverse()) {
                //   // if(dept_list.department_data[i].dept_id > 0){
                //   // self.tab_0 = 'tab_'+(self.dept_list.department_data.length-i)
                //   // }
                // }
              })
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 获取控件所需数据
    loadWidgetData: function() {
      var self = this
      this.$http('get','/integral.php/ajax_request_common/prepare_integral_options',{
            id: this.profile.id,
            category_tree: 1,
            dept_tree: 1
          })
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data
            try {
              self.categoryTree = jsonData.category_tree
              self.deptTree = jsonData.dept_tree
            } catch (err) {
              console.log(err)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    }
  },
  created() {
    this.loadChartData()
    this.loadPointType()
  }
}
</script>
<style>
.display-table {
  width: 100%;
  display: table;
}

.display-table-cell {
  display: table-cell;
  padding: 0;
  width: auto;
  vertical-align: top;
}

.data-box td {
  padding: 8px;
}
.data-box table {
  background-color: #fff;
}
.data-box table {
  border-collapse: collapse;
}
.data-box .thead td {
  border-bottom: 2px solid #ebeef5;
  font-weight: bold;
  color: #666;
  height: 46px;
}
.data-box .tbody td {
  border-bottom: 1px solid #ebeef5;
}
/*.f1f1f1{background-color: #f1f1f1;}
  .f7f7f7{background-color: #f7f7f7;}*/

.sub_point,
.add_point,
.point_count {
  font-size: 24px;
}
.add_point {
  color: rgba(245, 108, 108, 1);
}
.sub_point {
  color: #5b8bf7;
}
.point_count {
  color: #666;
}

.data-box .el-table__body,
.data-box .el-table__footer,
.data-box .el-table__header {
  table-layout: auto;
}
</style>
