<template>
  <view class="container">
    <view class="wrapper">
      <view class="imgnav">
        <view class="habits-item" v-for="(item, index) in habitList" :key="index" @click="handleItem(item.habitId)">
          <image class="habits-img" :class="{ active: activeHabitId == item.habitId }" :src="item.habitImage"
            mode="aspectFill"></image>
          <text class="habits-text">{{ item.habitName }}</text>
        </view>
      </view>

      <view class=""><rich-page :data="habitDetailList" v-if="habitDetailList.length > 0"></rich-page></view>
    </view>
  </view>
</template>

<script>
  import {
    httpRequest,
    reportRequest
  } from '@/utils/api'
  import {
    shareAppMessage
  } from '@/utils/app.js'
  import {
    mapGetters,
    mapMutations
  } from 'vuex'

  export default {
    data() {
      return {
        habitList: [],
        habitInfo: {},
        habitDetailList: [],
        activeHabitId: 'hb-14'
      }
    },
    onLoad(options) {
      if (options.id) {
        this.activeHabitId = options.id
      }

      this.getHabitList()
      this.getHabitInfo()

      uni.setNavigationBarTitle({
        title: '七大生活习惯'
      })

      reportRequest({
        eventType: 'enterPage'
      })
    },
    onShareAppMessage() {
      return shareAppMessage({
        title: this.newTitle
      })
    },
    computed: {
      ...mapGetters(['user', 'lang', 'langMap']),
      newTitle() {
        return this.lang === 'en' ? '音昱生活' : '音昱生活'
      }
    },
    methods: {
      handleItem(habitId) {
        this.activeHabitId = habitId
        this.habitDetailList = []
        this.getHabitInfo(habitId)
      },
      getHabitList() {
        httpRequest({
          url: 'organizer/habitList',
          method: 'get',
          success: res => {
            this.habitList = res.data
          }
        })
      },
      getHabitInfo() {
        uni.showLoading()
        httpRequest({
          url: 'organizer/habitInfo',
          method: 'get',
          data: {
            habitId: this.activeHabitId
          },
          success: res => {
            this.habitInfo = res.data
            this.habitDetailList = res.data.habitDetailList
            uni.hideLoading()
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding-bottom: calc(80px + constant(safe-area-inset-bottom));
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #f9f9f7;
  }

  .wrapper {
    box-sizing: border-box;
  }

  .imgnav {
    padding: 10px 16px;
    display: flex;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
  }

  .habits-item {
    position: relative;
  }

  .habits-text {
    display: block;
    position: absolute;
    color: #ffffff;
    font-size: 12px;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 1px 1px 0px #333;
  }

  .habits-img {
    display: block;
    width: 80rpx;
    height: 160rpx;
    margin-left: 2px;
    margin-right: 2px;

    &.active {
      width: 160rpx;
      border-style: 160rpx;
    }
  }
</style>
这个代码是干嘛的