<template>
  <div class="full-page">
    <div class="container">
      <div class="p-title">
        <span class="label">我的健康券</span>
        <span class="link" @click="goToVouchers">查看全部 <i class="glyphicon glyphicon-menu-right"></i></span>
      </div>
      <ul>
        <li v-for="(item, index) in voucherData" :key="index" @click="goToDetail(item.voucherId, item.makeId)">
          <CardItem :data="item"></CardItem>
        </li>
      </ul>
      <div class="p-title">
        <span class="label">我的福利</span>
      </div>
      <div @click="goToUser">
        <ListItem :data="userInfo"></ListItem>
      </div>
    </div>
  </div>
</template>

<script>
import { getStore } from '@/util/store'
// import store from '@/store'
import CardItem from '@/components/cardItem'
import ListItem from '@/components/listItem'
import { getUserCard, getunUsedCountById } from '@/api/apply/apply'
import { getUserInfoByUserId } from '@/api/basic/basic'
import _itemPoster from '../../assets/images/doctor.jpg'

export default {
  name: 'Home',
  data () {
    return {
      userId: getStore({ name: 'user_id' }),
      voucherData: [],
      userInfo: {
        name: '',
        subTitle: 0,
        itemPoster: _itemPoster,
        des: [
          '国家基本公卫服务；',
          '家庭医疗健康服务；'
        ]
      }
    }
  },
  created () {
    this.getUserCardByIdFn() // 获取当前用户待使用健康券(前3条)
    this.getUserInfoByUserIdFn() // 获取当前用户基本信息
    this.getunUsedCountByIdFn() // 获取当前用户待使用健康券数量
    // store.commit('SET_USERIFNO', {name: '1'})
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
    CardItem,
    ListItem
  },
  methods: {
    getUserCardByIdFn () {
      let parmas = {
        states: [1],
        userId: this.userId
      }
      getUserCard(3, parmas).then(res => {
        if (res.code === 0) {
          this.voucherData = res.data
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    getUserInfoByUserIdFn () {
      getUserInfoByUserId(this.userId).then(res => {
        if (res.code === 0) {
          this.userInfo.title = res.data[0].name
          this.$store.commit('SET_USERIFNO', res.data[0])
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    getunUsedCountByIdFn () {
      let parmas = {
        states: [1],
        userId: this.userId
      }
      getunUsedCountById(parmas).then(res => {
        if (res.code === 0) {
          this.userInfo.subTitle = res.data
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    goToDetail (voucherId, makeId) {
      this.$router.push({
        path: '/voucherDetail',
        query: {
          voucherId: voucherId,
          makeId: makeId
        }
      })
    },
    goToUser () {
      console.log('go to user page')
      this.$router.push({
        path: '/user',
        query: {
          userId: this.userId
        }
      })
    },
    goToVouchers () {
      this.$router.push({
        path: '/vouchers'
      })
    }
  }
}
</script>

<style scoped>
  .full-page {
    background-color: #f5f6f7;
  }
</style>