<template>
  <!-- 活动列表 ui -->
  <div class="hb_task_list">
    <!-- 标题 -->
    <ActiveTitle active="hb" acitveTitle="玩游戏 赚红包" />

    <!-- 信息 start -->
    <div class="top_info clear">
      <div class="task_service" @click="onService">联系客服</div>

      <!-- 玩家信息 换绑按钮 -->
      <div v-if="userHbInfo && userHbInfo.role_id" class="center_box">
        <div class="user_info">
          <div class="role text_overflow">
            {{ userHbInfo.server_name }}
          </div>
          <div class="role text_overflow">
            {{ userHbInfo.role_name }}
          </div>
          <div class="level">{{ userHbInfo.role_level }}</div>
        </div>

        <div class="exchange" @click="onBindRole">
          <i class="iconfont icon-zhuanhuan"></i>
        </div>
      </div>

      <!-- 绑定按钮 -->
      <div v-else class="bind" @click="onBindRole">绑定角色</div>

      <!-- 余额 -->
      <div class="money">
        <span>余额: </span>
        <span class="amount">
          {{ (userHbInfo && userHbInfo.amount) || 0 }}元
        </span>
      </div>
      <!-- 提现 -->
      <div class="cash" @click="onCash">提现</div>
    </div>
    <!-- 信息 end -->

    <!-- 活动列表 start -->
    <ul v-if="taskInfo && taskInfo.length && endTimeArr.length" class="list">
      <li v-for="(item, index) in taskInfo" :key="index" class="clear">
        <div class="task_content">
          <div class="text_overflow">
            任务：<span>{{ item.task_name }}</span>
          </div>
          <div>
            奖励：<span>{{ item.reward_name }}</span>
          </div>
        </div>
        <div class="time">{{ endTimeArr[index] }}</div>
        <!-- 去完成 -->
        <div
          v-if="
            item.task_status == 'uncomplete' && endTimeArr[index] !== '00:00:00'
          "
          class="btn"
          @click="onGame(item)"
        >
          <span>去完成</span>
          <img
            v-if="item.is_first && firstPage"
            class="to_complete"
            src="@/assets/image/hb/point.gif"
            alt=""
          />
        </div>
        <!-- 领取 -->
        <div
          v-else-if="
            item.task_status == 'completeable' &&
            endTimeArr[index] !== '00:00:00'
          "
          class="btn"
          @click="onReceive(item)"
        >
          领取
        </div>
        <!-- 已领取 -->
        <div v-else-if="item.task_status == 'completed'" class="btn already">
          已领取
        </div>
        <!-- 条件不足 -->
        <div v-else class="btn already">未达标</div>
      </li>
    </ul>
    <!-- 活动列表 end -->

    <!-- test -->
    <!-- <ul class="list">
      <li class="clear">
        <div class="task_content">
          <div>任务：<span>test </span></div>
          <div>奖励：<span>5元现金</span></div>
        </div>
        <div class="time">168:16:16</div>
        <div class="btn" @click="onGame()">
          <span>去完成</span>
          <img class="to_complete" src="@/assets/image/hb/point.gif" alt="" />
        </div>
      </li>
    </ul> -->
    <!-- test -->
  </div>
</template>

<script>
import ActiveTitle from "@/components/Active/ActiveTitle/ActiveTitle"; // 活动标题
export default {
  name: "HbTaskList",
  components: {
    ActiveTitle,
  },
  data() {
    return {};
  },
  props: {
    // 红包活动 用户 游戏角色信息
    userHbInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
    // 红包活动 任务列表
    taskInfo: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 倒计时
    endTimeArr: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 每日首次展示
    firstPage: {
      type: [Boolean, String],
      default: false,
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 联系客服
    onService() {
      this.$emit("onService");
    },

    // 提现
    onCash() {
      this.$emit("onCash");
    },

    // 领取
    onReceive(task) {
      this.$emit("onReceive", task);
    },

    // 去完成
    onGame() {
      this.$emit("onGame");
    },

    // 绑定角色
    onBindRole() {
      this.$emit("onShowDialog", "bindRole");
    },
  },
};
</script>

<style lang='less' scoped>
.hb_task_list {
  // 活动标题
  .active_title {
    margin-bottom: 20 / @rem;
  }

  .top_info {
    position: relative;

    .task_service {
      width: 170 / @rem;
      height: 80 / @rem;
      line-height: 80 / @rem;
      margin-right: 10 / @rem;
      border-radius: 40 / @rem;
      float: left;
      color: #fff;
      background-image: linear-gradient(#fbd8c0, #ff092e);
      //   background-image: linear-gradient(#fed5a4, #ff9d25);
      cursor: pointer;
    }

    .user_info,
    .money,
    .bind,
    .exchange {
      width: 170 / @rem;
      float: left;
    }

    .bind {
      height: 80 / @rem;
      line-height: 80 / @rem;
      border-radius: 40 / @rem;
      margin-left: 70 / @rem;
      color: #fff;
      background-image: linear-gradient(#fbd8c0, #ff092e);
      cursor: pointer;
    }

    .exchange {
      width: 90 / @rem;
      line-height: 80 / @rem;
      cursor: pointer;

      i {
        font-size: 45 / @rem;
      }
    }

    .user_info {
      width: 210 / @rem;
      margin-top: -20 / @rem;
    }

    .money {
      position: absolute;
      line-height: 80 / @rem;
      top: -80 / @rem;
      right: 0 / @rem;
      font-size: 30 / @rem;
    }

    .cash {
      width: 170 / @rem;
      height: 80 / @rem;
      line-height: 80 / @rem;
      border-radius: 40 / @rem;
      float: right;
      color: #fff;
      background-image: linear-gradient(#fbd8c0, #ff092e);
      //   background-image: linear-gradient(#fed5a4, #ff9d25);
      cursor: pointer;
    }
  }

  .list {
    margin-top: 20 / @rem;

    li {
      height: 140 / @rem;
      padding: 0 10 / @rem;
      margin-top: 20 / @rem;
      line-height: 70 / @rem;
      border-radius: 5px;
      background-color: #eee;
      box-sizing: border-box;

      .task_content,
      .time,
      .btn {
        width: 44%;
        float: left;
      }

      .time,
      .btn {
        width: 28%;
        margin-top: 35 / @rem;
      }

      .task_content {
        text-align: left;
      }

      .btn {
        float: right;
        border-radius: 36 / @rem;
        color: #fff;
        position: relative;
        background-image: linear-gradient(#fbd8c0, #ff092e);
        cursor: pointer;

        &.already {
          background-image: linear-gradient(#ffece0, #ff768a);
          cursor: not-allowed;
        }

        .to_complete {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          transform: rotate(90deg);
        }
      }
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .hb_task_list {
    // 活动标题
    .active_title {
      margin-bottom: 10 / @rem;
    }

    .top_info {
      .task_service {
        width: 90 / @rem;
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin-right: 5 / @rem;
        border-radius: 20 / @rem;
      }

      .user_info,
      .money,
      .bind,
      .exchange {
        width: 85 / @rem;
      }

      .bind {
        height: 40 / @rem;
        line-height: 40 / @rem;
        border-radius: 20 / @rem;
        margin-left: 90 / @rem;
      }

      .exchange {
        width: 45 / @rem;
        line-height: 40 / @rem;

        i {
          font-size: 23 / @rem;
        }
      }

      .user_info {
        width: 180 / @rem;
        margin-top: -10 / @rem;
      }

      .money {
        line-height: 40 / @rem;
        top: -40 / @rem;
        font-size: 15 / @rem;
      }

      .cash {
        width: 85 / @rem;
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin-left: 12.5 / @rem;
        border-radius: 20 / @rem;
      }
    }

    .list {
      margin-top: 10 / @rem;

      li {
        height: 70 / @rem;
        padding: 0 5 / @rem;
        margin-top: 10 / @rem;
        line-height: 35 / @rem;

        .time,
        .btn {
          margin-top: 17.5 / @rem;
        }

        .btn {
          border-radius: 18 / @rem;

          .to_complete {
            width: 80%;
            left: 10%;
          }
        }
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .hb_task_list {
    // 活动标题
    .active_title {
      margin-bottom: 10 / @rem;
    }

    .top_info {
      .task_service {
        width: 85 / @rem;
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin-right: 5 / @rem;
        border-radius: 20 / @rem;
      }

      .user_info,
      .money,
      .bind,
      .exchange {
        width: 85 / @rem;
      }

      .money {
        line-height: 40 / @rem;
        top: -40 / @rem;
        font-size: 15 / @rem;
      }

      .bind {
        height: 40 / @rem;
        line-height: 40 / @rem;
        border-radius: 20 / @rem;
        margin-left: 42.5 / @rem;
      }

      .user_info {
        width: 110 / @rem;
      }

      .exchange {
        width: 45 / @rem;
        line-height: 40 / @rem;

        i {
          font-size: 23 / @rem;
        }
      }

      .cash {
        width: 85 / @rem;
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin-left: 12.5 / @rem;
        border-radius: 20 / @rem;
      }
    }

    .list {
      margin-top: 10 / @rem;
      font-size: 12 / @rem;

      li {
        height: 70 / @rem;
        padding: 0 5 / @rem;
        margin-top: 10 / @rem;
        line-height: 35 / @rem;

        .time,
        .btn {
          margin-top: 17.5 / @rem;
        }

        .btn {
          border-radius: 18 / @rem;
        }
      }
    }
  }
}
</style>