<!--
 * @Date: 2023-11-17 11:44:58
 * @LastEditTime: 2023-11-30 18:08:33
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      title="道具卡"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="$c.back"
    ></uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view
        class="card-item"
        v-for="(item, i) in listData"
        :key="i">
        <view class="icon">
          <image src="/static/common/cardIcon.png"></image>
        </view>
        <view class="card-r">
          <view class="title">{{item.title}}</view>
          <view class="desc">抽赏时可选择重新抽赏</view>
        </view>
        <view class="card-num">×1</view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: []
    }
  },

  methods: {
    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'item_card_list',
        data: {
          page: num
        },

        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.list)
            this.mescroll.endByPage(res.data.list.length, res.data.last_page)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 0 30rpx;

  .card-item {
    width: 710rpx;
    margin: 20rpx auto 0;
    box-sizing: border-box;
    padding: 30rpx 40rpx;
    display: flex;
    align-items: center;
	background: #3B3941;

    .icon {
      width: 100rpx;
      height: 58rpx;
    }

    .card-r {
      width: 300rpx;
      box-sizing: border-box;
      margin-left: 30rpx;

      .title {
        font-weight: bold;
        font-size: 40rpx;
        color: #B07AF3; 
      }

      .desc {
        margin-top: 10rpx;
        word-wrap: break-word;
        word-break: break-all;

        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }

    .card-num {
      flex: 1;
      text-align: right;
      font-size: 36rpx;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .common_bg {
  }
}
</style>
