<template>
  <section class="gridScoreStatistics">
    <el-row class="overallStatistics">
      <div class="title">
        <p>总体统计</p>
        <div class="title_right">
          <div>
            <span v-for="(item,index) in timeCheck" :key="index" :class="type == index? 'active':''"
             @click="timeChange(index)">{{ item }}</span>
          </div>
            <el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small" 
              :props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader>
        </div>
      </div>
      <div class="card_list">
        <div class="card">
          <h2>积分余额汇总
            <el-tooltip
              placement="right"
              style="width: 16px;"
              content="截止目前所有网格员剩余可用积分余额的总和">
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </h2>
          <p class="color1">{{ data.nowIntegral || 0 }}</p>
        </div>
        <div class="card">
          <h2>发放积分</h2>
          <p class="color1">{{ data.addIntegral || 0 }}</p>
        </div>
        <div class="card">
          <h2>消耗积分</h2>
          <p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
        </div>
      </div>
      <div class="echertsBox">
        <div class="left_Box">
          <p>个人积分排行</p>
          <div>
            <div id="chart1" style="height: 300px; width: 100%;" v-show="userSortListX.length && userSortListY.length"></div>
            <ai-empty v-show="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
          </div>
        </div>
        <div class="right_Box">
          <p>网格积分排行</p>
          <div>
            <div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"></div>
            <ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
          </div>
        </div>
      </div>
    </el-row>

    <ai-card>
      <ai-title slot="title" title="积分明细"/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格" size="small" 
              :props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
            <ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()" 
            :selectList="dict.getDict('integralType')"/>
            <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd" 
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
            </el-date-picker>
          </template>
          <template #right>
            <el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
              @clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
              v-throttle="() => {(current = 1), getTableData();}" />
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
          <el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.integralRuleId">{{ row.integralRuleName }}</span>
              <span v-else>{{ row.eventDesc }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="integralType" label="类型" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.integralRuleId">{{ row.eventType }}</span>
              <span v-else>{{ row.integralRuleName }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="changeIntegral" label="积分变动" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.integralType == 3">{{ row.changeIntegral | formatTime }}</span>
              <span v-if="row.integralType == 0">{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作"  align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="open(row.id)">详情</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-card>

    <el-dialog title="详情" :visible.sync="dialog" customFooter width="700">
      <ai-detail>
        <template #content>
          <ai-wrapper>
            <ai-info-item label="姓名" :value="details.integralUserName" />
            <ai-info-item label="所属网格" :value="details.girdName"/>
            <ai-info-item label="事件" isLine :value="details.eventDesc">
              <span v-if="details.integralRuleId">{{ details.integralRuleName }}</span>
              <span v-else>{{ details.eventDesc }}</span>
            </ai-info-item>
            <ai-info-item label="时间" isLine :value="details.createTime"/>
            <ai-info-item label="积分变动" v-if="details.integralType == 3">
              {{ details.changeIntegral | formatTime }}
            </ai-info-item>
            <ai-info-item label="积分变动" v-if="details.integralType == 0">
              {{ details.changeIntegral > 0 ? '+' : '-' }}{{ details.changeIntegral }}
            </ai-info-item>
            <ai-info-item label="积分余额" :value="details.nowIntegral"/>
            <ai-info-item label="凭证" isLine v-if="fileDownLoad.length">
              <ai-file-list :fileList="fileDownLoad" style="width: 200px;" :fileOps="{name: 'name'}"></ai-file-list>
            </ai-info-item>
          </ai-wrapper>
        </template>
      </ai-detail>
      <span slot="footer" class="dialog-footer" center>
        <el-button @click="dialog = false" style="width: 92px">关闭</el-button>
      </span>
    </el-dialog>

    <ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
      <el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
    </ai-dialog>
  </section>
</template>

<script>
import { mapState } from "vuex"
import * as echarts from 'echarts';
export default {
  name: "gridScoreStatistics",
  label: "积分统计",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      myChart1: null,
      myChart2: null,
      tableData: [],
      search: {
        current: 1,
        userName: '',
        girdId: '',
        integralType: '',
        startTime: '',
        endTime: '',
      },
      girdIdArr:[],
      total: 0,
      size: 10,
      current: 1,
      girdList: [],
      time: [],
      timeCheck: ['昨日','近7天','近30天','自定义'],
      dialog: false,
      dialogDate: false,
      timeList: [],
      type: '1',
      startTime: '',
      endTime: '',
      data: {},
      girdId: '',
      girdArr: [],
      girdOptions: [],
      defaultProps: {
        label: 'girdName',
        value: 'id',
        children: 'children',
        checkStrictly: true,
      },
      details: {},
      fileDownLoad: [],
      userSortListX: [],
      userSortListY: [],
      girdSortListX: [],
      girdSortListY: [],
    }
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        { prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
        { prop: "girdName", label: '所属网格', align: "center", width: "180px" },
        { slot: "eventDesc"},
        { slot: "integralType", label: '类型' },
        { slot: "changeIntegral", label: '积分变动', align: "center", },
        { prop: "nowIntegral", label: '剩余积分', align: "center", },
        { prop: "createTime", label: '时间', align: "center", },
        { slot: "options" }
      ]
    }
  },
  created() {
    this.$dict.load('epidemicDangerousAreaLevel','integralType','integralRuleEvent','integralRuleEventType').then(() => {
      this.getStatistics()
      this.getGridList()
      this.getRanking()
      this.getTableData()
    })
  },
  methods: {
    // 统计接口
    getStatistics() {
      this.instance.post('/app/appintegraluser/allGirdIntegral',null, {
        params: {
          type: this.type,
          girdId: this.girdId,
          startTime: this.startTime,
          endTime: this.endTime,
        }
      }).then(res => {
        if(res?.data) {
          this.data = res.data
        }
      })
    },
    
    // 人员、网格排行
    getRanking() {
      this.instance.post('/app/appintegraluser/userAndGirdIntegralSort',null,{
        params: {
          type: this.type,
          girdId: this.girdId,
          startTime: this.startTime,
          endTime: this.endTime
        }
      }).then((res) => {
        if(res?.data) {
          this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
          this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
          this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
          this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
          this.getColEcherts1(this.userSortListX,this.userSortListY)
          this.getColEcherts2(this.girdSortListX,this.girdSortListY)
        }
      })
    },
    // 积分明细
    getTableData() {
      this.instance.post('/app/appintegraluser/girdIntegralDetail',null,{
        params: {
          ...this.search,
          current: this.current,
          size: this.size,
          total: this.total,
        }
      }).then(res => {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    gridChangeOpt(val) {
      this.girdIdArr = val
      this.search.girdId = val?.[val.length - 1]
      this.$refs.cascader2.dropDownVisible = false;
      this.getTableData()
    },

    getColEcherts1(xData,yData) {
      let chartDom1 = document.getElementById('chart1');
      chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
      this.myChart1 = echarts.init(chartDom1);
      this.myChart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '16px',
          right: '28px',
          bottom: '14px',
          top: '16px',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',
          data: xData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },

        series: [
          {
            data: yData,
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#5087ec",
                label: {
                  show: true,  //开启显示
                  position: 'right',    //在上方显示
                  textStyle: {
                    fontSize: 13,
                    color: '#666'
                  }
                },
              },
            },
            barWidth: 10,
            barGap: '20%',
          }
        ]
      }, true);
      window.addEventListener("resize", this.onResize)
    },
    getColEcherts2(xData,yData) {
      let chartDom2 = document.getElementById('chart2');
      chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
      this.myChart2 = echarts.init(chartDom2);
      this.myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '16px',
          right: '28px',
          bottom: '14px',
          top: '16px',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',
          data: xData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          triggerEvent: true,
            //设置文本过长超出隐藏...表示
            axisLabel:{
              margin: 8,
              formatter: function(params){
                var val=""
                if(params.length > 8) {
                  val = params.substr(0,8)+'...'
                  return val
                } else {
                  return params;
              }
            }
          },
        },
        series: [
          {
            data: yData,
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#5087ec",
                label: {
                  show: true,  //开启显示
                  position: 'right',    //在右方显示
                  textStyle: {
                    fontSize: 13,
                    color: '#666'
                  }
                },
              },
            },
            barWidth: 10,
            barGap: '20%',
          }
        ]
      }, true);
      window.addEventListener("resize", this.onResize2)
      // this.extension(this.myChart2)
    },
    onResize1() {
      this.myChart1.resize()
    },
    onResize2() {
      this.myChart2.resize()
    },
    gridChange(val) {
      this.girdArr = val
      this.girdId = val?.[val.length - 1]
      this.$refs.cascader1.dropDownVisible = false;
      this.getStatistics()
      this.getRanking()
    },
    // 所有网格
    getGridList() {
      this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
        if (res?.code == 0) {
          this.girdOptions = this.toTree(res.data)
        }
      })
    },

    // 转树形结构
    toTree(data) {
      let result = [];
      if (!Array.isArray(data)) {
        return result
      }
      let map = {};
      data.forEach(item => {
        map[item.id] = item;
      });
      data.forEach(item => {
        let parent = map[item.parentGirdId];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },

    timeChange(index) {
      if(index == 3) {
        this.dialogDate = true
      } 
      this.type = index
      this.getStatistics()
      this.getRanking()
    },

    open(id) {
      this.dialog = true
      this.getDetail(id)
    },

    onChange(val) {
      this.search.startTime = val?.[0]
      this.search.endTime = val?.[1]
      this.getTableData()
    },

    getDetail(id) {
      this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
        if(res?.data) {
          this.details = res.data
          if(res.data.enclosure) {
            let str = res.data.enclosure.split('/')
            this.fileDownLoad = [{ 
              url:res.data.enclosure,
              name: str?.[str.length - 1]
            }]
          }
        }
      })
    },

    selectDete() {
      if(!this.timeList || !this.timeList.length) {
        return this.$message.error('请选择自定义时间');
      }
      this.startTime = this.timeList?.[0]
      this.endTime = this.timeList?.[1]
      this.dialogDate = false
      this.getStatistics()
      this.getRanking()
    },

  },

  filters: {
    formatTime(num) {
      if(num > 0) {
        return '+' + num
      } else {
        return num
      }
    }
  },

  mounted() {
    this.getColEcherts1()
    this.getColEcherts2()
  },

  destroyed () {
    window.removeEventListener('resize', this.onResize1)
    window.removeEventListener('resize', this.onResize2)
  },

}
</script>

<style lang="scss" scoped>
.gridScoreStatistics {
  height: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  .overallStatistics {
    width: 100%;
    margin-bottom: 16px;
    padding: 20px;
    box-sizing: border-box;
    background: #FFF;

    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      p {
        font-size: 16px;
        font-family: MicrosoftYaHeiSemibold;
        color: #222222;
        font-weight: 600;
      }

      .title_right {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 70px;
          height: 32px;
          line-height: 32px;
          border-radius: 2px;
          border: 1px solid #D0D4DC;
          margin-right: 8px;
          text-align: center;
          cursor: pointer;
        }
        .active {
          color: #2266FF;
          border: 1px solid #2266FF;
        }
      }
    }

    .card_list {
      display: flex;
      .card {
        flex: 1;
        height: 96px;
        background: #F9F9F9;
        border-radius: 2px;
        margin-right: 20px;
        padding: 16px 24px;
        box-sizing: border-box;
        h2 {
          color: #888888;
          font-weight: 600;
          font-size: 16px;
        }
        p {
          margin-top: 8px;
          font-size: 24px;
          font-weight: 600;
        }
        .color1 {
          color: #2891FF;
        }
        .color2 {
          color: #22AA99;
        }
        .color3 {
          color: #F8B425;
        }
      }
      .card:last-child {
        margin-right: 0;
      }
    }
    .echertsBox {
      width: 100%;
      margin-top: 20px;
      background: #FFF;
      display: flex;
      .left_Box {
        margin-right: 16px;
        flex: 1;
      }
      .right_Box {
        width: 100%;
        flex: 1;
      }

      .left_Box,
      .right_Box {
        background: #F9F9F9;
        box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
        border-radius: 4px;
        padding: 16px;
        box-sizing: border-box;
        #chart1,
        #chart2 {
          width: 100%;
          height: 300px;
        }
        p {
          font-weight: 600;
        }
      }
    }
  }

  // .chartCss {
  //   position: absolute;
  //   color: black;
  //   background:white;
  //   font-family: Aril;
  //   font-size: 12px;
  //   padding: 5px;
  //   display: inline;
  // }

  ::v-deep .el-dialog__footer {
    text-align: center;
  }
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #DDD;
  }
  ::v-deep .ai-detail {
    background: #FFF;
  }
 }
</style>