<template>
  <div class="integralApply">
    <div class="card-list" v-if="list.length">
      <div class="card" v-for="(item,index) in list" :key="index" @click="$linkTo(`./integralDetail?id=${item.id}`)">
        <div class="left">
          <div class="title">{{ item.applyItemName }}</div>
          <div class="time">{{ item.createTime.slice(0,16) }}</div>
        </div>
        <div class="right">
          <div class="integral">+{{ item.applyIntegral }}</div>
          <div class="status" :class="item.status==0? 'status0':item.status==1? 'status1':'status2'">{{ $dict.getLabel('appIntegralApplyEventStatus',item.status) }}</div>
        </div>
      </div>
    </div>
    <AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="toAdd">积分申请</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "integralApply",
  appName: "积分申请",
  data() {
    return {
      current: 1,
      list: [],
    }
  },
  methods: {
    toAdd() {
      this.$linkTo('./integralAdd')
    },
    getList() {
      this.$instance.post(`/app/appintegraluserapply/listByAppletUser`,null,{
        params: {
          current: this.current,
          size: 10
        }
      }).then(res => {
        if (res?.data) {
          this.list = this.current==1 ? res.data.records: [...this.list, ...res.data.records]
        }
      })
    }
  },
  onShow() {
    this.$dict.load('appIntegralApplyEventStatus').then(()=> {
      this.getList()
    })
  },
  onReachBottom() {
    this.current++ 
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.integralApply {
  padding: 24px 0 130px 0;
  box-sizing: border-box;

  .card-list {
    background: #FFF;
    .card {
      padding: 32px 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #EEEEEE;
      display: flex;
      align-items: center;
      .left {
        width: calc(100% - 200px);
        .title {
          font-size: 32px;
          font-weight: 600;
        }
        .time {
          font-size: 28px;
          font-weight: 400;
          color: #666666;
          margin-top: 8px;
        }
      }
      .right {
        width: 200px;
        text-align: right;
        .integral {
          font-size: 38px;
          font-weight: 600;
        }
        .status {
          font-size: 28px;
          font-weight: 400;
          margin-top: 8px;
        }

        .status0 {
          color: #FF9A40;
        }
        .status1 {
          color: #5AAD6A;
        }
        .status2 {
          color: #CD413A;
        }
      }
    }
  }

  ::v-deep .btn-wrapper {
    background: #FFF;
  }

  ::v-deep .btn-wrapper .btn {
    height: 80px;
    line-height: 80px;
    border-radius: 40px;
  }


}
</style>