<!--
 * @Description: 进步积分
 * @Author: 空白格
 * @Date: 2022-08-24 10:06:50
 * @LastEditors: gcz
 * @LastEditTime: 2022-08-26 14:20:56
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\ProgressPoints\ProgressPointsIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="">
    <section class="banner">
      <div class="total">{{totalCount}}</div>
      <div class="sub-title">
        <img src="@/assets/images/progresspoints-title.png" alt="">
        <span class="text">累计获得积分</span>
        <img src="@/assets/images/progresspoints-title.png" alt="">
      </div>
      <div class="behavior">
        <span class="item" v-for="(item, index) in behaviorList" :key="index">
					<b class="num">{{ item.count }}</b>个{{ item.type == 1 ? '加' : '减' }}分行为</span>
      </div>
    </section>
    <section class="wrap">
      <section class="explain">
        <div class="top u-flex u-row-between">
          <div class="title">获得进步积分可以</div>
          <div class="link" @click="jumpPage('/personalcenter/progresspoints/integralrule')">积分规则 ></div>
        </div>
        <div class="explain-list u-flex u-row-between">
          <div class="list-item u-flex u-row-between">
            <div class="text">
              <div class="han">推荐工作</div>
              <div class="en">Recommended work</div>
            </div>
            <img src="@/assets/images/progresspoints-good.png" alt="">
          </div>
          <div class="list-item u-flex u-row-between">
            <div class="text">
              <div class="han">优先分班</div>
              <div class="en">priority placement</div>
            </div>
            <img src="@/assets/images/progresspoints-class.png" alt="">
          </div> 
          <div class="list-item u-flex u-row-between">
            <div class="text">
              <div class="han">专家辅导</div>
              <div class="en">Expert guidance</div>
            </div>
            <img src="@/assets/images/progresspoints-home.png" alt="">
          </div>       
        </div>
      </section>
    </section>
    <section class="wrap">
        <div class="integral-list">
          <div class="integral-list-item u-flex u-row-between" v-for="(item,index) in integralList" :key="index">
            <div class="left">
              <div class="name u-line-1">{{ item.remark }}</div>
              <div class="time">{{ item.createTime }}</div>
            </div>
            <div class="right">
              <div v-if="item.type === 1">+{{ item.integral }}</div>
							<div v-else class="reduce">-{{ item.integral }}</div>
            </div>
          </div>          
        </div>
        <div class="pagination" v-if="total">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="currentChange"
          />
        </div>
        <el-empty description="列表数据为空" v-else></el-empty>
    </section>
    
  </div>
</template>

<script>
import { getIntegralCount, getIntegralList } from "@/api/ProgressiveIntegral";
export default {
  name: "",
  components: {},
  data() {
    return {
      // 积分列表
      integralList: [],
      // 积分行为
      behaviorList: [],
      // 总分
      totalCount: 0,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.handleGetIntegralCount();
    this.handleGetIntegralList();
  },
  methods: {
    handleGetIntegralCount() {
      getIntegralCount().then((res) => {
        let list = []
						res.data.forEach(item => {
							if (item.type == 0) {
								const obj = {
									type: 1, count: 0, total: 0
								}
								if (res.data.length == 1) {
									list.push(obj)
								}
							} else  if (item.type == 1) {
								const obj = {
									type: 0, count: 0, total: 0
								}
								if (res.data.length == 1) {
									list.push(obj)
								}
							}
						});
						if (list.length == 1) {
							list = list.concat(res.data)
						}
						this.behaviorList = list
						// 计算总分
						let total = 0
						this.totalCount = res.data.reduce((total, item) => total + item.total, 0)
      });
    },
    handleGetIntegralList() {
      getIntegralList(this.queryParams).then((res) => {
        this.integralList = res.rows;
        this.total = Number(res.total);
        // console.log("getIntegralCount", res);
      });
    },
    /**
     * 分页切换触发
     * @date 2022-08-16
     * @param {any} page
     * @returns {any}
     */
    currentChange(page) {
      this.queryParams.pageNum = page;
      this.handleGetIntegralList();
    },
    /**
     * 跳转到指定页面
     * @date 2022-08-11
     * @param {any} path
     * @returns {any}
     */
    jumpPage(path, param) {
      if (path) {
        this.$router.push({ path: path, query: param });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.wrap{
  width: 1200px;
  margin: 0 auto;
}
.pagination {
  padding-bottom: 24px;
  text-align: center;
  :deep(.el-pager .active) {
    background-color: #ff3939;
  }
  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #ff3939;
  }
}
.banner {
  text-align: center;
  position: relative;
  height: 350px;
  background: url(@/assets/images/progresspoints-bg.png) no-repeat;
  background-position: top center;
  color: #FFF;
  .total{
    font-family: PingFangSC-S0pxibold;
    padding-top: 100px;
    font-weight: 600;
    font-size: 50px;
    letter-spacing: 3.75px;
    margin-bottom: 10px;
  }
  .sub-title{
    font-size: 14px;
    margin-bottom: 24px;
    .text{
      margin: 0 5px;
    }
    img{
      vertical-align: middle;
    }
  }
  .behavior{
    .item{
      display: inline-block;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: rgba(255,255,255,.3);
      padding: 0 24px;
      border-radius: 5px;
      font-size: 14px;
      & + .item{
        margin-left: 15px
      };
      .num{
        font-size: 20px;
        margin-right: 5px;
        vertical-align: -2px;
      }
    }
  }
}
.explain{
  background: #fff;
  padding: 20px;
  margin: 20px auto;
  .top{
    margin-bottom: 20px;
    .title{
      font-size: 20px;
      color: #393939;
    }
    .link{
      background: rgba(239, 101, 31, .1);
      padding: 0 20px;
      color: rgb(239, 101, 31);
      height: 26px;
      line-height: 26px;
      border-radius: 26px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .explain-list{
    .list-item{
      box-sizing: border-box;
      width: 32%;
      padding: 10px 20px;
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.10);
      .han{
        font-size: 20px;
        color: #666;
        margin-bottom: 5px;
      }
      .en{
        font-size: 12px;
        color: #ccc;
        text-transform: uppercase;
      }
    }
  }
}
.integral-list{
  background: #fff;
  padding: 20px;
  margin-bottom: 24px;
  &-item{
    padding: 10px 0;
    border-bottom: 1px solid #DBDBDB;
    .name{
      font-size: 20px;
      margin-bottom: 5px;
    }
    .time{
      font-size: 12px;
      color: #B2B2B2;
    }
    .right{
      font-size: 30px;
      color: #709078;
      .reduce{
        color: #EF651F;
      }
    }
  }
}
</style>
