<template>
  <div class="explain-box">
    <div
      v-for="(item, key) in helpData"
      :key="key">
      <title-more
        v-if="item.title"
        :title="item.title"
        bgColor="#AFBEF2"></title-more>

      <h4 v-if="item.subTitle" class="sub-title">{{item.subTitle}}</h4>
      <p v-if="item.content" class="content">{{item.content}}</p>
    </div>
  </div>
</template>

<script>
import { babyInit } from '@/utils/api'
import titleMore from '@/components/titleMore'
export default {
  components: {
    titleMore
  },
  data () {
    return {
      helpData: []
    }
  },

  async mounted () {
    wx.showLoading({
      title: '加载中'
    })
    let helpData = (await babyInit()).help
    let tempData = []

    helpData.forEach((item, key) => {
      let index = Object.keys(item)[0]
      let value = Object.values(item)[0]
      let temp = {}

      if (value === '') {
        temp.title = index
      } else {
        temp.subTitle = index
        temp.content = value
      }
      tempData.push(temp)
    })
    this.helpData = tempData
    wx.hideLoading()
  },

  methods: {
  }
}
</script>
<style scoped lang="less">
.explain-box{
  .sub-title{
    margin: 0 28px 5px 28px;
    color: #000;
  }
  .content{
    margin: 0 28px 20px 28px;
    font-size: 10px;
    color: #999999;
  }
}
</style>
