<template>
  <div class="detail-list br">
    <div v-if="dataList.length">
      <ul>
        <div v-for="(item, index) in dataList" :key="index">
          <li class="list" v-if="item.timsRewardResp[0].rewardType == 3">
            <!-- 1.课程 2.考试 3.调查问卷 4.患者招募 5.宣教漫画 6.打卡 7.邀请 8.任务排查 9.绑定居民到微信 10.首次进入 11.邀请点赞-->
              <img v-if="item.resourceType == 1" src="../../static/images/task-two.png" /> 
              <img v-if="item.resourceType == 4" src="../../static/images/task-five.png" /> 
              <img v-if="item.resourceType == 11" src="../../static/images/task-one.png" /> 
              <img v-if="item.resourceType == 8" src="../../static/images/task-three.png" />
              <img v-if="item.resourceType == 9" src="../../static/images/task-four.png" />
              <img v-if="item.resourceType == 10" src="../../static/images/task-six.png" />
              <ul class="desc">
                <li class="text">{{item.taskName}}</li>
                <li class="time">{{item.sortFinishTime}}</li>
              </ul>
              <span class="score"><span>+{{getRewardType(item.timsRewardResp)}}</span>勤奋分</span>
          </li>
        </div>
      </ul>
      <DetailBtn 
      style="margin-top: 30px;" 
      btnText="获得更多勤奋分" 
      :isFixed="!isFixed" 
      :needBT="needBT"
      btnWidth="100%" 
      v-bp="{ component_tag: '364#360018' }"
      @btnClick="btnClick"/>
    </div>
    <div v-if="!dataList.length" class="no-content">
      <img src="../../assets/no-content.png" alt="">
      <div class="text">暂无记录,您还没有参加活动</div>
      <DetailBtn 
      style="margin-top: 30px;" 
      btnText="立即参加" 
      :isFixed="isFixed" 
      btnWidth="50%" 
      @btnClick="btnClick"/>
    </div>
  </div>
</template>
<script>
import DetailBtn from '@/components/bussiness/detail-btn';
export default {
  components: {
    DetailBtn
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      needBT: true,
      isFixed: false
    }
  },
  created() {
    
  },
  methods: {
    getRewardType(data) {
      if(data && data.length > 0) {
        for(let i = 0;i < data.length;i++) {
          if(data[i].rewardType == 3) {
            return data[i].rewardQuantity;
          }
        }
      }
    },
    btnClick() {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="less">
  .detail-list {
    font-size: 16px;
    &.br {
      border-radius: 20px 20px 0 0;
      margin-top: -24px;
      position: relative;
      top: 0;
      left: 0;
      z-index: 3;
      background: #fff;
    }
    .list {
      display: flex;
      flex-direction: row;
      height: 79px;
      // line-height: 79px;
      align-content: space-between;
      align-items: center;
      margin: 0 15px;
      border-bottom: 1px solid #F8F9FA;
      img {
        width: 50px;
        height: 50px;
        border-radius: 25px;
      }
      .desc {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        .text {
          height: 16px;
          line-height: 16px;
          font-size: 16px;
          font-weight: 700;
          color: #373839;
        }
        .time {
          margin-top: 8px;
          height: 13px;
          line-height: 13px;
          font-size: 13px;
          font-size: 13px;
          font-weight: 400;
          color: #676869;
        }
      }
      .score {
        height: 13px;
        line-height: 13px;
        font-size: 13px;
        font-weight: 700;
        color: #373839;
        span {
          color: #FD5A2F;
        }
      }
    }
    .no-content {
      padding-top: 100px;
      text-align: center;
      .text {
        font-size: 15px;
        color: #999999;
      }
      img {
        width: 150px;
        height: 150px;
      }
    }
  }

</style>