<template>
  <section class="gridScoreDetail">
    <ai-title slot="title" title="网格员积分详情" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
    <el-row style="margin-top: 20px;">
      <div class="card_list">
        <div class="card">
          <h2>姓名</h2>
          <p class="color1">{{ data.userName }}</p>
        </div>
        <div class="card">
          <h2>积分余额</h2>
          <p class="color2">{{ data.integral || 0 }}</p>
        </div>
        <div class="card">
          <h2>已用积分</h2>
          <p class="color3">{{ data.usedIntegral || 0 }}</p>
        </div>
      </div>
    </el-row>
    <el-row class="echertsBox" style="margin-bottom: 16px">
      <div class="title">
        <h4>事件汇总</h4>
        <div class="timecSelect">
          时间：<el-date-picker size="small" value-format="yyyy-MM-dd" @change="timeChange" v-model="timeList" type="daterange" range-separator="至" :start-placeholder="startPla" :end-placeholder="endPla"></el-date-picker>
        </div>
      </div>
      <div class="bar_Box">
        <div id="chartDom" style="height: 230px; width: 100%;" v-show="xData.length && yData.length"></div>
        <ai-empty style="height: 200px; width: 100%;" v-show="!xData.length && !yData.length"></ai-empty>
      </div>
    </el-row>
    <ai-card>
      <ai-title slot="title" title="余额变动明细"/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.type" placeholder="请选择类型" @change="search.current=1,getIntegralChange()" 
            :selectList="dict.getDict('integralType')"/>
          </template>
          <template #right>
            <ai-download :instance="instance" :url="`/app/appintegraluser/changeIntegralExport?id=${$route.query.id}`" :params="search" fileName="网格员余额变动明细"
              :disabled="tableData.length == 0">
              <el-button size="small">导出</el-button>
            </ai-download>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                  @getList="getIntegralChange" :col-configs="colConfigs" :dict="dict">
          <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="integralType" label="类型" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.integralType == 0">积分调整</span>
              <span v-else>{{ row.eventType }}</span>
            </template>
          </el-table-column>
          <el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.integralType == 0">{{ row.eventDesc }}</span>
              <span v-else>{{ row.eventName }}</span>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-card>
  </section>
</template>

<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
export default {
  name: "gridScoreDetail",
  data() {
    return {
      myChart: null,
      tableData: [],
      search: {
        name: '',
        girdId: '',
        type: '',
        current: 1,
        size: 10,
      },
      total: 0,
      girdList: [],
      timeList: [],
      data: {},
      startTime: '',
      endTime: '',
      xData: [],
      yData: [],
      startPla: '',
      endPla: ''
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },

  computed: {
    colConfigs() {
      return [
        { prop: "doTime", label: '时间', align: "left", width: "200px" },
        { slot: "integralType", label: '类型', align: "center", width: "240px", dict:"integralType"},
        { slot: "changeIntegral"},
        { prop: "nowIntegral", label: '剩余积分', align: "center",width: "200px" },
        { slot: "eventDesc"},
      ]
    }
  },
  created() {
    this.$dict.load('integralType').then(() => {
      this.getDetail()
      this.getIntegralChange()
      this.getEventSummary()
      let nowTime = dayjs().format('YYYY-MM-DD')
      let timeAgo = dayjs().subtract(29, 'day').format('YYYY-MM-DD')
      this.startPla = timeAgo
      this.endPla = nowTime
    })
    
  },
  methods: {
    // 详情
    getDetail() {
      this.instance.post(`/app/appintegraluser/girdDetail`,null,{
        params: {
          id: this.$route.query.id
        }
      }).then(res=>{
        if(res?.data) {
          this.data = res.data
        }
      })
    },

    // 事件汇总
    getEventSummary() {
      this.instance.post(`/app/appintegraluser/eventSummary`,null,{
        params: {
          id: this.$route.query.id,
          startTime: this.startTime,
          endTime: this.endTime, 
        }
      }).then(res=>{
        if(res?.data) {
          this.xData = res.data.map(x=> x.eventName)
          this.yData = res.data.map(y=> y.totalIntegral)
          this.getColEcherts(this.xData, this.yData)
        }
      })
    },

    // 余额变动明细
    getIntegralChange() {
      this.instance.post(`/app/appintegraluser/getChangeDetail`, null, {
        params: {
          ...this.search,  //积分类型
          total: this.total,
          id: this.$route.query.id,
        }
      }).then(res => {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    timeChange() {
      if(this.timeList.length) {
        this.startTime = this.timeList[0]
        this.endTime = this.timeList[1]
        this.getEventSummary()
      }
    },

    getColEcherts(xData, yData) {
      let chartDom = document.getElementById('chartDom');
      chartDom.style.width = window.innerWidth - 335 + "px";
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption({
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: [0],
            filterMode: "filter",
          },
        ],
        grid: {
          left: '16px',
          right: '28px',
          bottom: '14px',
          top: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            type: 'bar',
            itemStyle: {
              normal: {
                color: "#5087ec",
                label: {
                  show: true,  //开启显示
                  position: 'top',    //在上方显示
                  textStyle: {
                    fontSize: 13,
                    color: '#666'
                  }
                },
              },
            },
            barWidth: 20,
            barGap: '20%',
          }
        ]
      }, true);
      window.addEventListener("resize", this.onResize)
    },

    onResize() {
      this.myChart.resize()
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'gridScoreManage',
        isRefresh: !!isRefresh
      })
    }

  },

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

  mounted() {
    this.getColEcherts()
  },

  destroyed () {
    window.removeEventListener('resize', this.onResize)
  },
}
</script>

<style lang="scss" scoped>
.gridScoreDetail {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  .card_list {
    display: flex;
    .card {
      flex: 1;
      height: 96px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
      border-radius: 4px;
      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: #FFFFFF;
    box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      h4 {
        color: #222222;
        font-style: 16px;
        font-weight: 600;
      }

    }

    .bar_Box {
      width: 100%;
      #chartDom {
        width: 100%;
        height: 230px;
        margin-top: 16px;
      }
    }
    
  }
}
</style>