<template>
  <view class="stop-page" :class="{ 'picker-open': !showBottom }">
    <navBar :title="title" />

    <view class="content-area">
      <!-- 停诊原因 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">停诊原因</text>
          <text class="required">*</text>
        </view>
        <view class="reason-row">
          <view class="reason-btn" :class="{active: reason===1}" @click="selectReason(1)">出差</view>
          <view class="reason-btn" :class="{active: reason===2}" @click="selectReason(2)">休假</view>
          <view class="reason-btn" :class="{active: reason===3}" @click="selectReason(3)">临时安排</view>
          <view class="reason-btn" :class="{active: reason===4}" @click="selectReason(4)">其他</view>
        </view>
      </view>

      <!-- 停诊时间 -->
      <view class="form-section">
        <view class="section-head">
          <view class="section-title">
            <text class="title-text">停诊时间</text>
            <text class="required">*</text>
          </view>
          <view class="add-more" @click="addRange">+ 再次添加</view>
        </view>

        <view class="range-list" v-if="reason!=3">
          <view class="range-row" v-for="(item,idx) in ranges" :key="idx">
            <uni-datetime-picker type="daterange" value="item" :start="start" @change="(e)=>handleChange(e,idx)" @show="closeBottom" @close="openBottom" @maskClick="openBottom"/>
            <uni-icons type="minus" size="30" color="#8B2316" @click="removeRange(idx)" v-if="idx > 0"></uni-icons>

          </view>
        </view>
        <view class="range-list" v-if="reason==3">
          <view class="range-row" v-for="(item,idx) in ranges" :key="idx">
            <uni-datetime-picker type="date" value="item[0]" :start="start" @change="(e)=>handleChangeDate(e,idx)" @show="closeBottom" @close="openBottom" @maskClick="openBottom"/>
            <view class="rowbox">
              <uni-data-select v-model="item[1]" placeholder="请选择时段" :localdata="rangeData" @change="(e)=>changeRangeData(e,idx)"></uni-data-select>
            </view>
            <uni-icons type="minus" size="30" color="#8B2316" @click="removeRange(idx)" v-if="idx > 0"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 备注 -->
      <view class="form-section">
        <view class="section-title"><text class="title-text">备注</text></view>
        <view class="remark-box">
          <textarea v-model="remark" class="remark" maxlength="300" :placeholder="remarkPh" :adjust-position="false"/>
         <!-- <view class="voice-btn" @click="recordVoice">🎤</view> -->
        </view>
      </view>
    </view>

    <view class="bottom-actions" v-if="showBottom">
      <view class="confirm-btn" @click="submit">
        <text class="btn-text">确定发布</text>
      </view>
    </view>
  </view>

  <unidialog
    :visible="noticeVisible"
    :title="'公告内容'"
    :cancelText="'返回修改'"
    :confirmText="'确认发布'"
   
    @close="noticeVisible=false"
    @confirm="noticeConfirm"
  >
   <template v-slot:content>
    <view class="ppt-content">
	     <view class="notice-row">
          <view class="name">停诊原因：</view>
          <view class="value" v-if="reason==1">出差</view>
          <view class="value" v-if="reason==2">休假</view>
          <view class="value" v-if="reason==3">临时安排</view>
          <view class="value" v-if="reason==4">其他</view>
       </view>
       <view class="notice-row">
          <view class="name">停诊时间：</view>
          <view class="value">
            <view class="value-item" v-for="(item,idx) in ranges" :key="idx">
              <view class="value-item-date">{{ item[0] }}</view>
              <view class="value-item-separator" >{{ reason==3?' ':'至' }}</view>
              <view class="value-item-time">{{ item[1] }}</view>
            </view>
          </view>
       </view>
       <view class="notice-row" v-if="remark">
          <view class="name">备注：</view>
          <view class="value">{{ remark }}</view>
       </view>
     <view class="tip">
      <view class="name"></view>
      <view class="value">{{date}}由医生本人发布</view>
     </view>
    </view>
   </template>
  </unidialog>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import unidialog from '@/components/dialog/dialog.vue'
import navBar from '@/components/navBar/navBar.vue'

import dayjs from 'dayjs'
import api from '@/api/api'
const noticeVisible = ref(false)
const date = ref(dayjs().format('YYYY年MM月DD日'))
const removeRange = (idx) => {
  ranges.value.splice(idx,1)
}
const noticeConfirm = () => {
  noticeVisible.value = false
  addStopPatient()
}
const showBottom = ref(true)
const title = ref('发布停诊')
const reason = ref(1)
const ranges = ref([{}])
const remark = ref('')
const remarkPh = '您可以在这里填写想告诉患者的停诊补充信息，最多填写300个字哦~'
const start = ref(new Date().getTime())
const end = ref( Date.now()+10*365*24*3600*1000)
const selectReason = (val) => { 
  reason.value = val;
  if(val==3){
    ranges.value=[{}];
  }
}
const addRange = () => { ranges.value.push([]) }
const rangeData=ref([{text:'上午',value:'上午'},{text:'下午',value:'下午'},{text:'晚上',value:'晚上'},{text:'全天',value:'全天'}])


const closeBottom = () => {
  showBottom.value = false
}
const openBottom = () => {
  showBottom.value = true
}
const handleChange = (e,idx) => {
  console.log(e)
  ranges.value[idx] =e;
  openBottom();
  console.log(showBottom.value)
}
const handleChangeDate = (e,idx) => {
  console.log(e)
  ranges.value[idx][0] =e;
  openBottom();
  console.log(showBottom.value)
}
const changeRangeData = (e,idx) => {
  console.log(e)
  ranges.value[idx][1] =e;
  
}
const addStopPatient = async () => {
  let date_arr=[]
  ranges.value.forEach(item=>{
    date_arr.push({
      param1:item[0],
      param2:item[1]
    })
  })
  //console.log(date_arr)
  const res = await api.addStopPatient({
    type: reason.value,
    date_list: date_arr,
    note: remark.value
  })
  if(res.code==200){
    uni.$emit('updateOutPatient')
    uni.showToast({ title: '发布成功', icon: 'none' })
    uni.navigateBack()
  }
}

const recordVoice = () => {
  uni.showToast({ title: '语音录入（示意）', icon: 'none' })
}

const submit = () => {

  let invalid=ranges.value.some(r => !r[0] || !r[1])
  if (invalid) {
    if(reason.value==3){
      uni.showToast({ title: '请选择停诊时间或者时间段', icon: 'none' })
      return
  }else{
    uni.showToast({ title: '请选择停诊起止时间', icon: 'none' })
    return
  }
   
  }
  //addStopPatient()
  noticeVisible.value = true
}
</script>

<style lang="scss" scoped>
.range-list{
  position: relative;
  z-index:99;
  :deep(.uni-date-btn--ok){
    position: relative;
    z-index:9999;
  }
}
.ppt-content{
 
  .tip{
    display: flex;
    align-items: center;
    margin-top:50rpx;
    text-align: right;
    color: #999;
    font-size: 28rpx;
    .name{
      width: 160rpx;
      text-align: right;
    }
    .value{
      flex: 1;
      text-align: left;
    }
  
  }
}
.notice-row{
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .value-item-separator{
    min-width: 20rpx;
  }
  .name{
    width: 160rpx;
    text-align: right;
  }
  .value{
    flex: 1;
    text-align: left;
  }
  .value-item{
    display: flex;
    align-items: center;
   
  }
}
.rowbox{
  flex:1;
  margin-left: 30rpx;
}
.stop-page {
   min-height: 100vh; background: #fff; 
   :deep(.uni-date){
    position: relative;
    z-index:99;
   }
   /* iOS 端日期弹层容易被滚动容器裁切，强制提高层级并贴底展示 */
   :deep(.uni-calendar__mask){
    z-index: 9998 !important;
   }
   :deep(.uni-calendar--fixed){
    z-index: 9999 !important;
    bottom: 0 !important;
   }
   :deep(.uni-date-btn--ok){
    position: relative;
    z-index: 10000 !important;
   }
  }
.content-area { 
  position: fixed;
  overflow-y: scroll;
   padding: 30rpx;
   width: 100%;
   z-index:2;
   box-sizing: border-box;
   top: calc(var(--status-bar-height) + 44px);
   bottom:152rpx;
  }
.stop-page.picker-open .content-area{
  overflow: visible;
}

.form-section { margin-bottom: 40rpx; }
.section-head { display: flex; justify-content: space-between; align-items: center; }
.section-title { display: flex; align-items: center; margin-bottom: 20rpx; }
.title-text { font-size: 32rpx; color: #8B2316; }
.required { color: #8B2316; margin-left: 6rpx; font-size: 28rpx; }

.reason-row { display: flex;  flex-wrap: wrap; justify-content: space-between;}
.reason-btn { width:150rpx; text-align: center; height: 80rpx; line-height: 80rpx; border: 2rpx solid #ddd; border-radius: 10rpx; color: #666; }
.reason-btn.active { border-color: #8B2316; color: #8B2316; background: url('@/static/addoutpa_true.png') right bottom/39rpx 39rpx no-repeat; }

.add-more { color: #8B2316; font-size: 28rpx; }
.range-row { display: flex; align-items: center;  margin-bottom: 20rpx; }
.date-input { flex: 1; height: 80rpx; border: 2rpx solid #ddd; border-radius: 10rpx; display: flex; align-items: center; padding: 0 24rpx; color: #333; }
.placeholder { color: #999; }
.to-text { color: #666; }

.remark-box { position: relative; }
.remark {box-sizing: border-box; width: 100%; min-height: 220rpx; background: #f2f2f2; border-radius: 10rpx; padding: 20rpx; color: #333; }
.voice-btn { position: absolute; right: 20rpx; bottom: 20rpx; width: 88rpx; height: 88rpx; border-radius: 50%; background: #8B2316; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40rpx; }

.bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 30rpx; border-top: 1rpx solid #eee; z-index:1;}
.confirm-btn { background: #8B2316; border-radius: 12rpx; padding: 24rpx 0; text-align: center; }
.btn-text { color: #fff; font-size: 32rpx; }
</style>

