<template>
  <window-size :showTitle="false">
    <div class="logo-div">
      <div style="display: flex">
        <div><img src="@/assets/thyy_logo.png" style="height: 60px"/></div>
        <div style="color: #00525e">
          <h3>医疗服务平台</h3>
        </div>
      </div>
      <div style="font-size: 13px">
        <i class="van-icon van-icon-user-o"></i>
        <span style="margin-left: 4px; color: #777" @click="router.push('/myPatientIdCards')">
          {{ defaultCard.patientId  || '未绑卡' }}
        </span>
      </div>
    </div>

    <div v-if="defaultCard.cardType && defaultCard.cardType === 1" style="margin: 8px 12px;width: calc(100% - 24px);
                height:70px;display: flex;border-radius: 8px;
                background: linear-gradient(to bottom right,rgb(255,209,0),rgb(211,144,0));">
      <div style="flex:1;display:flex;align-items: center" @click="toybdzpz">
        <div style="width:100%; height:70px;display:flex;align-items: center;justify-content: center">
          <div style="text-align: center">
            <img style="width:32px;height: 32px" :src="qrcode" alt="">
            <div style="color: white; font-size: 16px;font-weight: bold">
              医保码
            </div>
          </div>
        </div>
        <div style="width:1px;height:50%;background-color: #e0e0e0"></div>
      </div>

      <div style="flex:1;display:flex;align-items: center" @click="todzjkk">
        <div style="width:100%; height:70px;display:flex;align-items: center;justify-content: center">
          <div style="text-align: center">
            <img style="width:32px;height: 32px" :src="healthcard" alt="">
            <div style="color: white; font-size: 16px;font-weight: bold">
              电子健康卡
            </div>
          </div>
        </div>
      </div>

      <div style="flex:1;display:flex;align-items: center" @click="togdqy">
        <div style="width:1px;height:50%;background-color: #e0e0e0"></div>
        <div style="width:100%; height:70px;display:flex;align-items: center;justify-content: center">
          <div style="text-align: center">
            <img style="width:32px;height: 32px" :src="vipcard" alt="">
            <div style="color: white; font-size: 16px;font-weight: bold">
              股东卡
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else style="padding: 8px 12px;width: calc(100% - 24px); margin-top: 10px;display: flex">
      <div
          style="
            flex: 1;
            height: 70px;
            border-radius: 8px;
            background: linear-gradient(rgb(1,119,255),rgb(40,138,254));
            display: flex;
            align-items: center;
            position: relative;
        "
          @click="toybdzpz"
      >
        <div style="margin-left: 12px">
          <div style="color: white; font-size: 17px;font-weight: bold">
            医保电子凭证
          </div>
          <div style="color: #ececec; font-size: 12px">
            医保查询|医保支付
          </div>
        </div>
        <img style="width:32px; position:absolute;right: 8px" :src="qrcode" alt="">
      </div>

      <div
          style="
            flex: 1;
            margin-left: 8px;
            height: 70px;
            border-radius: 8px;
            background: linear-gradient(rgb(1,119,255),rgb(40,138,254));
            display: flex;
            align-items: center;
            position: relative;
        "
          @click="todzjkk"
      >
        <div style="margin-left: 12px">
          <div style="color: white; font-size: 17px;font-weight: bold">
            电子健康卡
          </div>
          <div style="color: #ececec; font-size: 12px">
            国家卫生健康委
          </div>
        </div>
        <img style="width:32px; position:absolute;right: 8px" :src="healthcard" alt="">
      </div>
    </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('/nightClinic')">
          <img src="@/assets/hospital-service/night-clinic.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('/selectExamBranch/', '/selectExamPatient'))">
          <img src="@/assets/hospital-service/baogaochaxun.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('/inPatientService/', '/selectInpatientCard'))">
          <img src="@/assets/hospital-service/zhuyuanfuwu.png"/>
          <div class="icon-label">住院服务</div>
        </van-col>
        <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="routeTo(filterPath('/physicalExamIndex/', '/selectPhysicalExamPatient'))">
          <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-row>
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo('/onlineConsult')">
          <img src="@/assets/hospital-service/online-consult.png"/>
          <div class="icon-label">在线咨询</div>
        </van-col>
        <van-col span="6" @click="routeTo('/selectTargetPatient')">
          <img src="@/assets/hospital-service/appointmentmanagement.png"/>
          <div class="icon-label">挂号管理</div>
        </van-col>
        <van-col span="6" @click="routeTo('/selectPriceQueryBranch')">
          <img src="@/assets/hospital-service/price-query.png"/>
          <div class="icon-label">价格查询</div>
        </van-col>
        <van-col span="6" @click="clickComplaintsAndSuggestions">
          <img src="@/assets/hospital-service/complaints_and_suggestions.png"/>
          <div class="icon-label">投诉与建议</div>
        </van-col>
      </van-row>
    </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 homepageDoctors" :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>
    <div class="van-overlay" style="z-index: 2001" v-show="showComplaintsAndSuggestions">
      <div
          style="position: absolute; top: 60px; left: 30px; right: 30px; background: white; border-radius: 10px; padding-bottom: 20px">
        <div
            style="margin: 20px 0 20px 20px;font-size: 15px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid rgb(128, 128, 128)">
          投诉与建议
        </div>
        <van-field required v-model="complaintsAndSuggestions.department" label="投诉科室"></van-field>
        <van-field required v-model="complaintsAndSuggestions.object" label="投诉对象"></van-field>
        <van-field required v-model="complaintsAndSuggestions.content" label="投诉与建议"></van-field>
        <van-field required v-model="complaintsAndSuggestions.contact" label="联系方式"></van-field>
        <van-field v-model="complaintsAndSuggestions.name" label="您的姓名"></van-field>
        <div style="padding: 0 20px; color: orangered; font-size: 12px">
          我们将在48小时之内和您进行联系，您的建议和意见是我们进步的动力！
        </div>
        <div style="display: flex; margin-top: 30px">
          <div style="width: 50%; padding: 12px">
            <van-button block @click="showComplaintsAndSuggestions = false">取消</van-button>
          </div>
          <div style="width: 50%; padding: 12px">
            <van-button block type="primary" @click="confirmComplaints">提交</van-button>
          </div>
        </div>
      </div>
    </div>
  </window-size>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import store from '@/store'
import {getDate} from '@/utils/date'
import router from '@/router'
import axios from 'axios'
import {submitComplaintsAndSuggestions} from "@/api/assessments";
import {showDialog} from "vant";
import qrcode from '@/assets/qrcode2.png'
import healthcard from '@/assets/healthcard.png'
import vipcard from '@/assets/vipcard.png'
import Cookies from "js-cookie";

const screenSize = store.state.screenSize
const swipeStyle = {
  width: '90%',
  marginLeft: '5%',
  marginTop: '5px',
  height: screenSize.h - 460 + 'px',
  h: screenSize.h - 460,
  w: screenSize.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 homepageDoctors = ref([])
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 defaultCard = store.getters.getDefaultCard

const filterPath = (singleCardPath, multipleCardsPath) => {
  return store.getters.onlyOneCard ? singleCardPath + defaultCard.patientId : multipleCardsPath
}

const date = getDate()
const clickDoctor = (val) => {
  Cookies.set('appointmentDeptName', val.deptName)
  const path = '/doctorArrangement/' + date + '/' + val.deptCode + '/' + val.doctorCode
  router.push(path)
}

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

// 前往医保电子凭证
const toybdzpz = () => {
  store.commit('SET_LOADING', true)
  window.location.href =
      'https://mp.weixin.qq.com/insurance/card/creditjump?cityid=430100&from=u1ZYLGrYTJspxoHAQoU96w.%3D#wechat_redirect'
}

const todzjkk = () => {
  router.push('/electronicHealthCardHome')
}

const togdqy = () => {
  router.push('/shareholdersEquity')
}

const showComplaintsAndSuggestions = ref(false)
const complaintsAndSuggestions = reactive({
  department: null,
  object: null,
  content: null,
  contact: null,
  name: null,
})
const clickComplaintsAndSuggestions = () => {
  showComplaintsAndSuggestions.value = true
}
const confirmComplaints = () => {
  submitComplaintsAndSuggestions(complaintsAndSuggestions).then(res => {
    showComplaintsAndSuggestions.value = false
    complaintsAndSuggestions.department = null
    complaintsAndSuggestions.object = null
    complaintsAndSuggestions.content = null
    complaintsAndSuggestions.contact = null
    complaintsAndSuggestions.name = null
    showDialog({
      title: '提示',
      message: '提交成功！',
    }).then(() => {})
  })
}

const loading = ref(false)
onMounted(() => {
  homepageDoctors.value = store.state.homePageDoctors
  if (homepageDoctors.value.length === 0) {
    loading.value = true
    const url = import.meta.env.VITE_BASE_URL + '/homepage/selectHomePageDoctors'
    axios({
      withCredentials: true,
      url: url,
    }).then((res) => {
      homepageDoctors.value = res.data.data
      store.dispatch({
        type: 'storeHomepageDoctors',
        doctorList: res.data.data
      }).then(() => {
        loading.value = false
      })
    })
  }
})
</script>

<style scoped>
.logo-div {
  width: 92.5%;
  margin-left: 3%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.big-box {
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  height: 70px;
  background-size: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.hsjctext {
  font-size: 36px;
  color: rgba(4, 59, 104, 0.9);
  font-weight: bold;
  padding-left: 8px;
}

.large-icon {
  margin-left: 10px;
  margin-top: 11px;
}

.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>
