<!--  -->
<template>
  <div class="pageContent devlopment">
    <router-link to="/planDescription">
      <div class="bannar radius">
        <div class="image">
          <img src="@/assets/development/images/banner1.png" alt="" />
        </div>
        <div class="button min-text">了解详情</div>
      </div>
    </router-link>
    <div class="gap">当前任务</div>
    <div class="task radius">
      <div class="image">
        <img src="@/assets/development/images/task.png" alt="" />
      </div>
      <div class="task-detail">
        <div class="task-title">
          <div>
            <span>幸运熊计划LV</span>
            <span>{{ task.level < 10 ? `0${task.level}` : task.level }}</span>
          </div>
          <div class="mid-text bold">{{ task.detail }}</div>
        </div>
        <div class="task-times">
          <div class="task-time" v-for="(item, index) in task.taskList" :key="index" @click="toTask(item)">
            <div class="task-time-info">
              <div class="task-time-text">{{ item.title }}</div>
              <div class="task-time-button min-text" v-if="item.status === 0">查看进度</div>
              <div class="task-time-button min-text" v-else>上传打卡</div>
            </div>
            <div class="task-time-icon">
              <div class="task-time-icon-active" v-if="item.status === 0">
                <div class="image">
                  <img src="@/assets/development/images/active.png" alt="" />
                </div>
              </div>
              <div class="task-time-icon-unactive" v-else>
                <div class="image">
                  <img src="@/assets/development/images/unactive.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="levels">
      <div
        class="level"
        v-for="(item, index) in levels"
        :key="index"
        :class="{
          unlock: item.level === task.level + 1,
          now: item.level === task.level,
          active: item.level < task.level
        }"
        @click="toDetail(item, task)"
      >
        <div class="bg">
          <div class="image">
            <img :src="item.image" alt="" />
          </div>
        </div>
        <div class="level-info">
          <div class="level-info-level">
            <div class="level-info-text">LV{{ item.level < 10 ? `0${item.level}` : item.level }}</div>
            <div class="level-info-status">
              {{
                item.level > task.level + 1
                  ? '未解锁'
                  : item.level === task.level + 1
                  ? '可查看'
                  : item.level === task.level
                  ? '进行中'
                  : '已完成'
              }}
            </div>
          </div>
          <div class="level-info-title">
            <div class="level-info-title-text">{{ item.title }}</div>
            <div class="level-info-title-desc">{{ item.desc }}</div>
          </div>
        </div>
        <div class="tip">
          <div class="image">
            <img :src="active" alt="" v-if="item.level <= task.level + 1" />
            <img :src="unactive" alt="" v-else />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const active = require('@/assets/development/images/leveTip.png');
const unactive = require('@/assets/development/images/leveTipGray.png');

export default {
  data() {
    return {
      active,
      unactive,
      task: {
        level: 2,
        detail: '学讲礼貌',
        taskList: [
          {
            title: '格言朗读',
            status: 1
          },
          {
            title: '佩戴习惯',
            status: 0
          }
        ]
      },
      levels: [
        {
          level: 1,
          title: '美好开始',
          desc: '赢取启蒙熊',
          image: require('@/assets/development/images/leve_1.png')
        },
        {
          level: 2,
          title: '学讲礼貌',
          desc: '赢取启蒙熊',
          image: require('@/assets/development/images/leve_2.png')
        },
        {
          level: 3,
          title: '学讲礼貌',
          desc: '赢取启蒙熊',
          image: require('@/assets/development/images/leve_3.png')
        },
        {
          level: 4,
          title: '学讲礼貌',
          desc: '赢取启蒙熊',
          image: require('@/assets/development/images/leve_4.png')
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    toTask(item) {
      console.log(item);
      if (item.status === 0) {
        this.$router.push({
          name: 'taskWearing',
          params: {}
        });
      } else {
        this.$router.push({
          name: 'taskSubmission',
          params: {}
        });
      }
    },
    toDetail(item, task) {
      console.log(item);
      console.log(task);
      this.$router.push({
        name: 'taskDetail',
        params: {}
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import './include.scss';
.min-text {
  font-size: 25px;
  font-weight: 400;
}
.mid-text {
  font-size: 28px;
  font-weight: 400;
}
.radius {
  border-radius: 70px;
}
.bold {
  font-weight: bold;
}
.devlopment {
  padding-top: 30px;
  font-weight: bold;

  .bannar {
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 200px;
    .button {
      position: absolute;
      right: 5%;
      bottom: 9%;
      padding: 10px 20px;
      color: white;
      background-color: #000;
      border-radius: 40px;
    }
  }

  .task {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 750px;
    background: #ff5f8b;

    .image {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .task-detail {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;

      .task-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 60px;
        .mid-text {
          font-size: 30px;
        }
      }
      .task-times {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0px 60px;
        padding-top: 20px;

        .task-time {
          display: flex;
          align-items: flex-end;
          margin-bottom: 20px;

          .task-time-info {
            display: flex;
            flex-direction: column;
            align-items: center;

            .task-time-text {
              letter-spacing: 5px;
            }
            .task-time-button {
              padding: 0px 30px;
              color: white;
              background-color: #000;
              border-radius: 40px;
            }
          }
          .task-time-icon {
            width: 50px;
            height: 50px;
            margin-left: 20px;

            div {
              width: 100%;
              height: 100%;
            }
            .image {
              position: relative;
            }
          }
        }
      }
    }
  }

  .levels {
    position: relative;
    padding-top: 20px;
    .level {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 300px;
      color: white;
      border-radius: 60px;
      margin-top: 20px;
      background: #b3b3b3;

      .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      .level-info {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        padding-left: 260px;
        z-index: 3;

        .level-info-level {
          .level-info-text {
          }
          .level-info-status {
          }
        }
        .level-info-title {
          .level-info-title-text {
          }
          .level-info-title-desc {
          }
        }
      }
      .tip {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 150px;
        height: 215.5px;
        z-index: 3;
      }
    }
    .unlock {
      background: #ff5f8b;
    }
    .now {
      background: #8dc21f;
    }
    .active {
      background: #179b3b;
    }
  }
}
</style>
