<template>
  <ul class="menu-box" :class="{'tips': block === 4}">
    <li
      class="menu"
      :class="{'active': key == index}"
      v-for="(item, key) in menuList"
      :key="key"
      @click="index = key">
      <img :src="key == index ? item.activeIimgUrl : item.imgUrl">
      <div class="lable">{{item.lable}}</div>
      <div class="value"><span>{{item.value}}</span> {{item.unit}}</div>
      <!-- 箭头 -->
      <div v-if="block !== 4 && key == index" class="arrow"><span></span></div>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    menuList () {
      let recordInfo = this.recordList[0] || {}
      let menuList = [
        {
          key: 'height',
          lable: '身高',
          value: recordInfo.height || '--',
          unit: '厘米',
          imgUrl: require('../../assets/images/body-util/icon_height.png'),
          activeIimgUrl: require('../../assets/images/body-util/icon_height_active.png')
        },
        {
          key: 'weight',
          lable: '体重',
          value: recordInfo.weight || '--',
          unit: '公斤',
          imgUrl: require('../../assets/images/body-util/icon_weight.png'),
          activeIimgUrl: require('../../assets/images/body-util/icon_weight_active.png')
        },
        {
          key: 'head',
          lable: '头围',
          value: recordInfo.head || '--',
          unit: '厘米',
          imgUrl: require('../../assets/images/body-util/icon_head.png'),
          activeIimgUrl: require('../../assets/images/body-util/icon_head_active.png')
        },
        {
          key: 'bmi',
          lable: 'BMI',
          value: recordInfo.bmi || '--',
          unit: '',
          imgUrl: require('../../assets/images/body-util/icon_bmi.png'),
          activeIimgUrl: require('../../assets/images/body-util/icon_bmi_active.png')
        }
      ]

      return menuList
    }
  },
  props: ['menuIndex', 'recordList', 'block'],
  watch: {
    menuIndex (value) {
      this.index = value
    },
    index: {
      handler (newValue, oldValue) {
        this.$emit('changeMenu', {...this.menuList[newValue], index: newValue})
      },
      immediate: true
    }
  },
  created () {
  },
  data () {
    return {
      index: 0
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.menu-box{
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 25px;
  background: #fff;
  &.tips{
    z-index: 100;
    position: relative;
  }
  .menu{
    position: relative;
    width: 60px;
    font-size: 10px;
    text-align: center;
    color: #A4A4A4;
    &.active{
      color: @themeColor;
      .value{
        color: @themeColor;
      }
    }
    img{
      width: 60px;
      height: 60px;
    }
    .lable{
      margin-top: @spacing/2;
    }
    .value{
      margin-top: @spacing;
      color: #000;
      span{
        font-size: 18px;
        font-weight: bold;
      }
    }
    .arrow{
      position: absolute;
      left: 50%;
      bottom: -20px;
      transform: translate(-50%, 0);
      border: solid 8px transparent;
      border-bottom-color: @themeColor;
      span{
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, 0);
        border: solid 8px transparent;
        border-bottom-color: #fff;
      }
    }
  }
}
</style>
