<template>
  <div class="luck-info" @click.stop>
    <div class="header-box">
      <div class="content">{{ luckInfo.content }}</div>
      <div class="name">{{ luckInfo.userNick }}的红包</div>
    </div>
    <div class="num-sum-box">
      {{ luckInfo.num }}
      个红包共
      {{ luckInfo.amount | floatNum }}
      元
    </div>
    <div class="luck-list">
      <ul class="list">
        <li class="item" v-for="(item, index) in luckInfo.detail" :key="index">
          <div class="head">
            <img v-if="item.userHeadImg" :src="item.userHeadImg" />
            <img v-else :src="channelInfo.defaultPhoneHeadAva" />
          </div>
          <div class="content">
            <div class="name">{{ item.userNick }}</div>
            <div class="time">{{ item.createTime }}</div>
          </div>
          <div class="money">
            <div>{{ item.amount | floatNum }}元</div>
            <div class="best" v-if="bestUser == item.userId">手气最佳</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'red-password-luck',
  props: {
    luckInfo: {},
    channelInfo: {}
  },
  data() {
    return {};
  },
  computed: {
    bestUser() {
      const arr = [];
      const num = this.luckInfo.num || 1;
      const detail = this.luckInfo.detail || {};
      for (const key in detail) {
        if (detail.hasOwnProperty(key)) {
          arr.push(detail[key]);
        }
      }
      if (arr.length < num) {
        return '';
      } else {
        arr.sort((a, b) => {
          return b.amount - a.amount;
        });
        return arr[0].userId || '';
      }
    }
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.luck-info {
  position: relative;
  margin: auto;
  padding-top: 1.4rem;
  width: 2.75rem;
  height: 3.5rem;
  background: url('./img/luck-bg.png') no-repeat 0 0;
  background-size: 100% 100%;
  .header-box {
    position: absolute;
    top: 0.1rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.12rem;
    .content {
      margin-bottom: 0.1rem;
      color: #febe5c;
      font-weight: 800;
      font-size: 0.14rem;
    }
    .name {
      color: #fff;
    }
  }
  .num-sum-box {
    padding: 0 0.1rem;
    height: 0.2rem;
    line-height: 0.2rem;
    color: #febe5c;
    font-size: 0.12rem;
  }
  .luck-list {
    height: 1.9rem;
    overflow: auto;
    .list {
      padding: 0 0.1rem;
      .item {
        display: flex;
        align-items: center;
        padding: 0.06rem 0;
        .head {
          flex: 0 0 auto;
          width: 0.36rem;
          height: 0.36rem;
          border-radius: 0.04rem;
          overflow: hidden;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .content {
          flex: 1;
          margin: 0 0.06rem;
          .name {
            margin-bottom: 0.1rem;
            font-size: 0.12rem;
            color: #000;
          }
          .time {
            font-size: 0.1rem;
            color: #999;
          }
        }
        .money {
          flex: 0 0 auto;
          text-align: right;
          font-size: 0.12rem;
          color: #000;
          .best {
            margin-top: 0.1rem;
            padding-left: 0.16rem;
            color: #f4c600;
            background: url('./img/icon-best.png') no-repeat 0 0;
            background-size: 0.12rem 0.12rem;
          }
        }
      }
    }
  }
}
</style>
