<template>
  <view class="stop-page">
    <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">
          <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)" />
            <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"/>
         <!-- <view class="voice-btn" @click="recordVoice">🎤</view> -->
        </view>
      </view>
    </view>

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

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

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 }
const addRange = () => { ranges.value.push([]) }

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

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

const submit = () => {
  console.log(ranges.value)
  const invalid = ranges.value.some(r => r.length==0)
  if (invalid) {
    uni.showToast({ title: '请选择停诊起止时间', icon: 'none' })
    return
  }
  addStopPatient()
}
</script>

<style lang="scss" scoped>
.stop-page { min-height: 100vh; background: #fff; }
.content-area { padding: 30rpx; margin-top: calc(var(--status-bar-height) + 44px);}

.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; font-weight: 600; }
.required { color: #8B2316; margin-left: 6rpx; font-size: 28rpx; }

.reason-row { display: flex; gap: 20rpx; flex-wrap: wrap; }
.reason-btn { flex: 1; 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; gap: 20rpx; 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 { 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; }
.confirm-btn { background: #8B2316; border-radius: 12rpx; padding: 24rpx 0; text-align: center; }
.btn-text { color: #fff; font-size: 32rpx; font-weight: 600; }
</style>

