<template>
  <div>
    <h5>当前可用积分：{{ totalPoints || 0 }}</h5>
    <el-table
       border
      :data="list || []"
      >
      <el-table-column
        label="序号"
        width="50"
        type="index">
      </el-table-column>
      <el-table-column
        prop="changeType"
        label="积分类型">
        <template slot-scope="scope">{{ showChangeType(scope.row.changeType) }}</template>
      </el-table-column>
      <el-table-column
        prop="pointsAmount"
        label="积分变化">
        <template slot-scope="scope">
          <span v-if="subPoints(scope.row.pointsAmount)" style="color: red;">{{ scope.row.pointsAmount }}</span>
          <span v-else>{{ scope.row.pointsAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="发生时间">
        <template slot-scope="scope">{{ formateDate(scope.row.createDate) }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      style="margin-top:10px;"
      layout="prev, pager, next"
      :current-page.sync="form.pageNum"
      :pageSize="form.pageSize"
      :total="total || 0"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import dayjs from 'dayjs'
const {
  mapState: mapDynamicState,
  mapActions: mapDynamicActions
} = createNamespacedHelpers("dynamic");
const {
  mapState: mapBuildingState,
  mapActions: mapBuildingActions
} = createNamespacedHelpers("building");

export default {
  data() {
    return {
      form: {
        customerId: '',
        pageSize: 20,
        pageNum: 1,
      },
      totalPoints: '', // 当前可用积分
      total: '',
      list: []
    };
  },
  computed: {
    ...mapDynamicState({
      dynamics: x => x.dynamics
    }),
    ...mapBuildingState({
      buildings: x => x.buildings
    })
  },
  methods: {
    ...mapDynamicActions([
      "getDynamics",
      "setDetailNull",
      "deleteDynamics",
      "publicDynamic",
      "cancelDynamic"
    ]),
    ...mapBuildingActions(["getBuildings"]),
    GetIndex(inx) {
      return (this.currentPage - 1) * this.pageSize + inx + 1;
    },
    FormatDate(date) {
      if (date) {
        return dayjs(date).formate("yyyy-MM-DD HH:mm:ss");
      } else {
        return "";
      }
    },
    getList() {
      this.$store.dispatch('customer/taPointsRecords', this.form).then((res) => {
        console.log('customer/taPointsRecords: ', res)
        this.total = res.result.total
        this.form.pageNum = res.result.current
        this.form.pageSize = res.result.size
        this.list = res.result.records
        this.totalPoints = res.totalPoints

      }).catch(() => {
        console.log('customer/taPointsRecords err')
      })
    },
    getBuildingName(id) {
      return (
        ((this.buildings.list || []).filter(x => x.buildingId === id)[0] || {})
          .buildingName || ""
      );
    },
    formateDate(dt) {
      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
    },
    showChangeType(str) { // 积分类型
      switch (str) {
        case 'goods':
          return '兑换商品'
        case 'checkin':
          return '签到'
        case 'share':
          return '分享'
        case 'authorize':
          return '授权'
        default:
          return '未知类型'
      }
    },
    subPoints(points) { // 判断是否是 - 开头
      let subStr = points.toString().substring(0, 1)
      if (subStr === '-') {
        return true
      }

      return false
    }
  },
  created() {
    this.form.customerId = this.$route.query.id
    this.getList()
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}

.el-dialog{
  z-index: 9999!important;
  .el-form-item__content{
    p{
      margin: 0;
    }
  }
}


.flex-h {
  display: flex;
  display: -webkit-flex;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>
