<template>
  <window-size>
    <van-notice-bar
      v-show="data.doctorSources.length > 0"
      left-icon="warning-o"
      text="挂号后，号源仅就诊当天有效，逾时失效！"
    />
    <van-grid direction="horizontal" :column-num="7">
      <van-grid-item v-for="item in data.oneWeekText" :key="item" :text="'周' + item" />
    </van-grid>
    <van-grid direction="horizontal" :column-num="7">
      <van-grid-item v-for="(item, index) in data.nextSevenDate" :key="index">
        <van-badge :content="hasSource(index)" :color="badgeColor(index)">
          <van-button
            :disabled="disabledBtn(index)"
            :type="getType(index)"
            size="small"
            round
            @click="handleClickDate(index, false)"
            >{{ item.date }}</van-button
          >
        </van-badge>
      </van-grid-item>
    </van-grid>
    <div v-if="data.deptDescription">
      <p style="padding: 8px 12px 2px 12px; font-size: 14px; background: white">
        科室简介
        <div style="margin-top:6px;border-bottom: 1px solid lightgray"></div>
      </p>
      <p style="padding: 4px 12px; font-size: 13px;">
        <span v-html="data.deptDescription"></span>
      </p>
    </div>
    <div style=" background: white; margin-top: 12px">
      <p style="padding: 8px 12px 2px 12px; font-size: 14px;">
        当班医生<van-tag type="primary" plain style="margin-left: 5px">{{ data.dateSelected }}</van-tag>
        <div style="margin-top:6px;border-bottom: 1px solid lightgray"></div>
      </p>
      <div v-for="(item, index) in data.doctorSources" :key="index">
        <van-cell center is-link @click="handleClickDoctor(item)">
          <template #icon>
            <van-image
                style="width: 44.11px; height: 60.36px"
                round
                fit="cover"
                :src="'data:image/png;base64,' + item.portrait"
            />&nbsp;
          </template>
          <template #title>
            <span>{{item.doctorName}} | {{item.chargeType}}</span>
          </template>
          <template #label>
            <div :style="labelStyle" v-show="item.introduction">{{ item.introduction }}</div>
          </template>
        </van-cell>
      </div>
    </div>
    <van-empty :image="empty" description="暂未获取到医生数据" v-show="data.doctorSources.length === 0" />
  </window-size>
</template>

<script setup>
import empty from '@/assets/empty.png'
import { useRouter } from 'vue-router'
import { getOneWeekText, getNextSevenDate } from '@/utils/date'
import { onMounted, reactive } from 'vue'
import { getSourcesByDate, getDoctorSources } from '@/api/appointment'
import store from '@/store'
import {showConfirmDialog} from "vant";

const screenSize = store.state.screenSize
const labelStyle = {
  width: screenSize.w - 100 + 'px',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
}
const router = useRouter()
const deptCode = router.currentRoute.value.params.deptCode
const nightClinic = router.currentRoute.value.params.nightClinic
const data = reactive({
  currentIndex: 0,
  oneWeekText: getOneWeekText(),
  nextSevenDate: getNextSevenDate(),
  nextSevenDaySources: new Array(7).fill({}),
  doctorSources: [],
  dateSelected: '',
  deptDescription: null,
  activeCollapse: ['1']
})
const getType = (index) => {
  return index === data.currentIndex ? 'primary' : 'default'
}
const hasSource = (index) => {
  return data.nextSevenDaySources[index] === 1 ? '有' : '无'
}
const badgeColor = (index) => {
  return data.nextSevenDaySources[index] === 1 ? 'green' : 'red'
}
const disabledBtn = (index) => {
  return data.nextSevenDaySources[index] === 0
}
const handleClickDate = (index, isFromMounted) => {
  data.currentIndex = index
  data.dateSelected = data.nextSevenDate[index].fullDate
  const param = {
    date: data.dateSelected,
    deptCode: deptCode,
    nightClinic: nightClinic === 'yes'
  }
  getDoctorSources(param).then((res) => {
    data.doctorSources = res
  }).catch(() => {
    data.doctorSources = []
    if (isFromMounted && index < 6) {
      handleClickDate(++index, isFromMounted)
    }
  })
}
const handleClickDoctor = (val) => {
  if (val.isrubric === '1') {
    showConfirmDialog({
      title: '温馨提示',
      message: val.rubricTxt
    }).then(() => {
      toAppointment(val)
    }).catch(() => {
      console.log('cancel choose doctor')
    })
  } else {
    toAppointment(val)
  }
}

function toAppointment(val) {
  const to = '/doctorArrangement/' + data.dateSelected + '/' + deptCode + '/' + val.doctorCode
  router.push(to)
}

onMounted(() => {
  const param = {
    start: data.nextSevenDate[0].fullDate,
    end: data.nextSevenDate[6].fullDate,
    dept: deptCode,
    nightClinic: nightClinic === 'yes'
  }
  getSourcesByDate(param).then((res) => {
    data.nextSevenDaySources = res.sources
    if (res.description) {
      data.deptDescription = res.description.replaceAll('\r\n', '<br/>')
    }
    handleClickDate(0, true)
  })
})
</script>
