<template>
  <window-size :showBackNav="false">
    <div class="logo-div">
      <div style="width: 3%"></div>
      <div><img src="../../assets/thyylogo.png" style="height: 60px" /></div>
      <div style="height: 60px; line-height: 60px; color: #00525e">
        <h3>微信医疗服务平台</h3>
      </div>
    </div>
    <div class="yuyueguahao" @click="toVaccinateAppointment">
      <div>
        <img class="large-icon" src="../../assets/hospital-service/vaccinate.png" />
      </div>
      <p>预约新冠疫苗接种</p>
      <img class="thumb-icon" src="../../assets/hospital-service/click2.png" />
    </div>
    <div id="router-lane">
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo('/appointment')">
          <img src="../../assets/hospital-service/yuyueguahao.png" />
          <div class="icon-label">预约挂号</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/unPaidList/', '/selectPayPatient'))">
          <img src="../../assets/hospital-service/menzhenjiaofei.png" />
          <div class="icon-label">门诊缴费</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/checkExamIndex/', '/selectExamPatient'))">
          <img src="../../assets/hospital-service/baogaochaxun.png" />
          <div class="icon-label">报告查询</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/inPatientService/', '/selectInpatientCard'))">
          <img src="../../assets/hospital-service/zhuyuanfuwu.png" />
          <div class="icon-label">住院服务</div>
        </van-col>
      </van-row>
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo(filterPath('/assessments/', '/selectAssessmentPatient'))">
          <img src="../../assets/hospital-service/wenjuandiaocha.png" />
          <div class="icon-label">问卷调查</div>
        </van-col>
        <van-col span="6" @click="openExternalLink">
          <img src="../../assets/hospital-service/tijianbaogao.png" />
          <div class="icon-label">体检报告</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/healthCartCategory/', '/selectHealthCartPatient'))">
          <img src="../../assets/hospital-service/gouwuche.png" />
          <div class="icon-label">自助预约</div>
        </van-col>

        <van-col span="6" @click="routeTo('/onlineConsult')">
          <img src="../../assets/hospital-service/online-consult.png" />
          <div class="icon-label">在线咨询</div>
        </van-col>
      </van-row>
    </div>
    <div
      class="yuyueguahao xinguanjiance"
      @click="routeTo(filterPath('/selectCovidBranch/', '/selectOrderCovidPatient'))"
    >
      <div>
        <img class="large-icon" src="../../assets/hospital-service/xinguanjiance2.png" />
      </div>
      <p>新冠检测快速下单与查询</p>
    </div>
    <div style="width: 90%; margin-left: 5%; margin-top: 15px">
      <van-tag size="large" type="warning">名医直达</van-tag>
    </div>
    <div :style="swipeStyle">
      <div :style="loadingStyle" v-show="loading">
        <van-loading size="24px" type="spinner" vertical></van-loading>
      </div>
      <van-swipe :autoplay="10000" :show-indicators="false" vertical style="height: 100%">
        <van-swipe-item v-for="(arr, index) in doctors" :key="index">
          <div :style="swipeRowStyle" v-for="item in arr" :key="item.doctorCode" @click="clickDoctor(item)">
            <van-image
              round
              fit="cover"
              style="margin-top: 5px; margin-left: 5px"
              :width="portraitWidth"
              :height="portraitHeight"
              :src="'data:image/png;base64,' + item.portrait"
            />
            <div :style="infoStyle">
              {{ item.doctorName }} | {{ item.deptName }} | {{ item.doctorTitle }}
              <div v-show="item.introduction" :style="specialtyStyle">{{ item.introduction }}</div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </window-size>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import store from '../../store'
import { getDate } from '../../utils/date'
import router from '../../router'
import axios from 'axios'
import { apiUrl } from '../../utils/dev-prod'
export default {
  setup() {
    const windowSize = store.state.windowSize
    const swipeStyle = {
      width: '90%',
      marginLeft: '5%',
      marginTop: '5px',
      height: windowSize.h - 460 + 'px',
      h: windowSize.h - 460,
      w: windowSize.w * 0.9,
    }

    const swipeRowStyle = {
      width: '100%',
      height: swipeStyle.h / 3 - 5 + 'px',
      marginBottom: '5px',
      borderRadius: '8px',
      backgroundColor: '#00525e',
      backgroundImage: 'linear-gradient(to bottom right, #03a0b8, #00525e)',
      display: 'flex',
      h: swipeStyle.h / 3 - 5,
      color: 'white',
    }

    const loadingStyle = {
      position: 'fixed',
      top: 400 + swipeStyle.h / 2 - 32 + 'px',
      left: 0,
      right: 0,
      bottom: '50px',
    }

    const portraitHeight = swipeRowStyle.h - 10 + 'px'
    const portraitWidth = swipeRowStyle.h * 0.65 + 'px'

    const infoStyle = {
      width: swipeStyle.w - swipeRowStyle.h * 0.65 - 10 + 'px',
      height: '32px',
      fontSize: '13px',
      fontWeight: 'bold',
      marginLeft: '10px',
      marginTop: swipeRowStyle.h / 2 - 20 + 'px',
    }

    const specialtyStyle = {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      fontSize: '12px',
      fontWeight: 'normal',
      paddingRight: '15px',
    }

    const cards = computed(() => {
      return store.state.patientCards
    })
    const filterPath = (singleCardPath, multipleCardsPath) => {
      return cards.value.length === 1 ? singleCardPath + cards.value[0].patientId : multipleCardsPath
    }
    const doctors = computed(() => {
      return store.state.homePageDoctors
    })
    const date = getDate()
    const clickDoctor = (val) => {
      const path = '/doctorArrangement/' + date + '/' + val.deptCode + '/' + val.doctorCode
      router.push(path)
    }

    const routeTo = (val) => {
      router.push(val)
    }

    const openExternalLink = () => {
      window.open('http://staticweb.hnthyy.cn:1080', '_self')
    }

    const toVaccinateAppointment = () => {
      if (cards.value.length === 1) {
        window.open('http://www.hnthyy.cn/covidVaccinate/' + cards.value[0].patientId, '_self')
      } else {
        router.push('/selectCovidVaccinatePatient')
      }
    }

    const loading = ref(false)
    onMounted(() => {
      if (doctors.value.length === 0) {
        loading.value = true
        const url = apiUrl + '/homepage/selectHomePageDoctors'
        axios({
          withCredentials: true,
          url: url,
        }).then((res) => {
          store.commit('SET_HOMEPAGEDOCTORS', res.data.data)
          loading.value = false
        })
      }
    })
    return {
      filterPath,
      doctors,
      clickDoctor,
      swipeStyle,
      swipeRowStyle,
      portraitHeight,
      portraitWidth,
      infoStyle,
      specialtyStyle,
      openExternalLink,
      routeTo,
      toVaccinateAppointment,
      loadingStyle,
      loading,
    }
  },
}
</script>

<style scoped>
.logo-div {
  width: 100%;
  height: 60px;
  display: flex;
}
.yuyueguahao {
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  height: 70px;
  background: url('../../assets/hospital-service/yuyueguahaobackground.png') no-repeat;
  background-size: 100%;
  border-radius: 8px;
  display: flex;
}
.large-icon {
  margin-left: 10px;
  margin-top: 11px;
}
.yuyueguahao p {
  color: white;
  font-size: 18px;
  font-weight: bold;
  height: 70px;
  line-height: 70px;
  padding-left: 10px;
}
.thumb-icon {
  margin-top: 19px;
  width: 32px;
  height: 32px;
}

.xinguanjiance {
  background: url('../../assets/hospital-service/xinguanjiancebackground.png') no-repeat !important;
  background-size: 100% !important;
}

.bold-text {
  font-weight: bold;
}

#router-lane .van-col {
  text-align: center;
}

#router-lane img {
  width: 32px;
  height: 32px;
}

.icon-label {
  font-size: 13px;
  color: #333;
  /* color:#048a9e; */
}

.doctor-loading-box {
  position: fixed;
  display: inline-block;
  width: 120px;
  padding: 15px 0;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 1px 2px 9px 5px rgba(0, 0, 0, 0.1);
}
</style>