<template>
  <div class="mainPage" v-if="showPage">
    <img :src="title" class="title" alt="">
    <div v-if="result && result.length">
      <div class="userInfo flex-h">
        <div class="flex-item">
          <span>{{user.Name}}</span>
          <!-- <span>{{user.Sex=='0' ? '先生' : '女士'}}</span> -->
        </div>
        <div>
          <span>体检时间</span>
          <span>{{toolClass.dateFormat(mainInfo.CreateDate)}}</span>
        </div>
      </div>
      <ul>
        <li v-for="(item,index) in result" @click="linkTo(item.ReportUrl)" :key="index" class="flex-h">
            <div class="flex-item">
            <h1>{{item.TypeName}}：</h1>
            <span v-for="(subItem,subIndex) in item.Details" :key="subIndex">{{subItem.SpecName}}（{{subItem.CheckName}}）：{{subItem.CheckVal}}</span>
            </div>
            <i class="iconfont icon-buoumaotubiao52"></i>
        </li>
      </ul>
      <span class="tip">本报告单仅提供临床参考，不作为诊断依据</span>
      <div class="view-report">
        <i class="iconfont icon-shuoming" style="font-size: 1.2em"></i> <a :href="mainInfo.ReportUrl">点击查看完整报告</a>
      </div>
    </div>
    <div v-else class="nodata">
        暂无体检数据
    </div>
    <div class="bg-white" :hidden="ishidden">
    </div>
  </div>
</template>

<script>
// import { Indicator } from 'mint-ui'
import title from '../../../common/icon/title.png'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapBodyCheckState, mapActions: mapBodyCheckActions } = createNamespacedHelpers('bodyCheck')
export default {
  data () {
    return {
      title,
      ishidden: true,
      showPage: false
    }
  },
  computed: {
    ...mapBodyCheckState({
      result: x => x.result,
      mainInfo: x => x.mainInfo,
      user: x => x.user
    })
  },
  methods: {
    ...mapBodyCheckActions(['getBodyCheck']),
    linkTo (url) {
      window.location.href = url
    },
    loaded () {
      var _that = this
      setTimeout(() => {
        // Indicator.close()
        _that.ishidden = true
      }, 500)
    },
  },
  beforeMount () {
    // Indicator.open()
  },
  created () {
    this.getBodyCheck().then(() => {
      this.showPage = true
    }).catch(() => {
      this.showPage = true
    })
  }
}
</script>

<style lang="scss" scoped>
@import 'page.scss';

.bg-white {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
}
</style>
