<template>
  <div class="body-util-box">
    <div class="body-util">
      <!-- 头部 -->
      <baby-header
        :babyInfo="babyInfo"
        @showModel="showModel"></baby-header>

      <!-- 导航 -->
      <baby-menu
        :menuIndex="menuIndex"
        :menuInfo="menuInfo"
        :recordList="recordList"
        :block="block"
        @changeMenu="changeMenu"></baby-menu>

      <!-- 边框 -->
      <div class="border-box">
        <!-- 时间选择 -->
        <div class="time-box" :class="{'tips': block === 4}">
          <div
            class="time"
            :class="{'active': ageRange === key}"
            @click="changeAge(key)"
            v-for="(item, key) in ageListData"
            :key="key">{{item.lable}}</div>
        </div>

        <!-- 曲线图 -->
        <baby-echarts
          v-if="tableData && !isShow"
          :tableData="tableData"
          ></baby-echarts>

        <!-- 标点解释 -->
        <div class="sign-box clearfix">
          <div class="sign fr"><span></span>实际{{menuInfo.lable}}</div>
          <!-- <div class="sign fr"><span></span>合理范围</div> -->
        </div>
      </div>

      <!-- 选项卡 -->
      <baby-tabs
        :tabIndex="tabIndex"
        :recordList="recordList"
        :guideList="guideList"
        @changeTab="changeTab"></baby-tabs>

      <!-- 弹窗 -->
      <baby-mask
        :isShow="isShow"
        :block="block"
        :isNew="isNew"
        :babyId="babyId"
        :babyInfo="babyInfo"
        :babyList="babyList"
        @submit="submit"
        @checkBaby="checkBaby"
        @showModel="showModel"></baby-mask>
    </div>
  </div>
</template>

<script>
import { getBaby, addBaby, addRecord, getRecord, getGuide, babyInit } from '@/utils/api'
import babyHeader from '@/components/baby-util/babyHeader'
import babyMenu from '@/components/baby-util/babyMenu'
import babyTabs from '@/components/baby-util/babyTabs'
import babyMask from '@/components/baby-util/babyMask'
import babyEcharts from '@/components/baby-util/babyEcharts'
export default {
  components: {
    babyHeader,
    babyMenu,
    babyTabs,
    babyMask,
    babyEcharts
  },
  computed: {
    babyInfo () {
      let babyInfo = null

      this.babyList.forEach(item => {
        if (item.id === this.babyId) {
          babyInfo = item
        }
      })
      return babyInfo
    },
    tableData () {
      if (!this.babyinitData) {
        return null
      }
      // 根据 年龄 和 类型 筛选基础
      let tableData = this.babyinitData.filter(item => {
        return item.gender === this.babyInfo.gender && item.ageRange === this.ageRange
      })[0]

      // 根据 年龄 获取年龄横坐标
      let ageListData = this.ageListData[this.ageRange]
      // 根据 类型 获取线条数据
      let tempData = tableData[this.menuInfo.key + 'List']

      // x 坐标数据
      let xDataList = []
      // 线条数据
      let lineDataList = []

      tempData.forEach(item => {
        if (item.key === 'COL') {
          xDataList = item.value
        } else {
          lineDataList.push(item)
        }
      })

      return {
        ageListData,
        xDataList,
        lineDataList,
        unit: this.menuInfo.unit
      }
    }
  },
  data () {
    return {
      babyId: '',
      babyList: [],
      // 历史记录
      recordList: [],
      // 建议
      guideList: [],
      // 弹窗
      isShow: false,
      block: '',
      isNew: false,
      menuInfo: {},
      menuIndex: 0,
      tabIndex: 1,
      ageRange: 0,
      ageListData: [
        {
          min: -30,
          max: 360,
          interval: 30,
          lable: '0-1岁'
        },
        {
          min: 300,
          max: 1080,
          interval: 60,
          lable: '1-3岁'
        },
        {
          min: 960,
          max: 2520,
          interval: 120,
          lable: '3-7岁'
        }
      ],
      babyinitData: null
    }
  },

  mounted () {
    this.init()
  },

  methods: {
    async init () {
      await this.getBaby()
      await this.getRecord()
      await this.getGuide()
      this.babyinitData = (await babyInit()).data
    },
    // 获取宝宝列表
    async getBaby () {
      wx.showLoading({
        title: '获取宝贝中'
      })
      let babyId = wx.getStorageSync('babyId') || ''
      let babyList = await getBaby()

      if (babyList.length && (babyId === '' || !babyList.some(item => { return item.id === babyId }))) {
        babyId = babyList[0].id
      }

      this.babyId = babyId
      this.babyList = babyList

      if (this.babyList.length === 0) {
        this.showModel({block: 3})
      }
      wx.hideLoading()
    },

    // 获取记录历史
    async getRecord () {
      this.recordList = []
      wx.showLoading({
        title: '获取记录历史中'
      })
      this.recordList = await getRecord(this.babyId, this.ageRange)
      wx.hideLoading()
    },

    // 获取专家指导
    async getGuide () {
      wx.showLoading({
        title: '获取专家指导中'
      })
      let guideList = await getGuide(this.babyId)

      this.guideList = guideList.map(item => {
        let index = Object.keys(item)[0]
        let value = Object.values(item)[0]
        return {
          title: index,
          content: value,
          isShow: false
        }
      }).filter(item => {
        return item.content
      })
      wx.hideLoading()
    },

    // 显示弹窗
    showModel ({block, isNew = false, isShow = true}) {
      this.isNew = isNew
      this.block = block
      this.isShow = isShow
    },

    // 提交数据
    async submit (newBabyInfo) {
      let { id, birthday, gender, name, head, height, weight, recordDate } = newBabyInfo

      if (id === '') {
        await this.addBaby(birthday, gender, name)
      }
      await this.addRecord(this.babyId, head, height, weight, recordDate)
    },

    // 添加宝宝
    async addBaby (birthday, gender, name) {
      wx.showLoading({
        title: '添加中'
      })
      let id = (await addBaby(birthday, gender, name)).id
      wx.hideLoading()

      await this.getBaby()
      await this.checkBaby({id, isGetRecord: false})
    },

    // 添加记录
    async addRecord (id, head, height, weight, recordDate) {
      wx.showLoading({
        title: '添加中'
      })
      await addRecord(id, head, height, weight, recordDate)
      wx.hideLoading()
      this.getRecord()
    },

    // 切换宝宝
    async checkBaby ({id, isGetRecord = true}) {
      wx.showLoading({
        title: '切换宝宝中'
      })
      this.menuIndex = 0
      this.tabIndex = 1
      this.ageRange = 0
      this.babyId = id
      wx.setStorageSync('babyId', id)

      if (isGetRecord) {
        await this.getRecord()
      }

      this.guideList = []
      await this.getGuide()

      wx.hideLoading()
    },
    // 切换年龄段
    changeAge (key) {
      this.ageRange = key
      this.getRecord()
    },

    // 切换 导航
    changeMenu (item) {
      this.menuInfo = item
      this.menuIndex = item.index
    },

    // 切换 tab
    changeTab (index) {
      this.tabIndex = index
    }
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/common.less';
.body-util-box{
  .body-util{
    padding: 0 @spacing 5px;
  }
  .border-box{
    margin: 0 0 @spacing;
    padding: 10px 0 25px;
    border: solid 1px @themeColor;
    box-sizing: border-box;
    .time-box{
      display: flex;
      justify-content: space-between;
      margin: 0 @spacing @spacing/2;
      padding: 2px 0;
      border-radius: 20px;
      background: #fff;
      &.tips{
        z-index: 100;
        position: relative;
      }
      .time{
        padding: 8px 30px;
        font-weight: 500px;
        color: #333;
        &.active{
          position: relative;
          color: @themeColor;
          &::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 20px;
            height: 2px;
            background: @themeColor;

          }
        }
      }
    }
    .echarts-box{
      height: 678px;
    }
    .sign-box{
      padding: 0 @spacing;
      .sign{
        margin-left: 22px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #ABABAB;
        span{
          display: inline-block;
          margin: 5px 4px 5px 0;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          vertical-align: top;
          overflow: hidden;
          background: #9CB2FF;
        }
        &:first-child span{
          background: #FFC891;
        }
      }
    }
  }
}
</style>
