<template>
  <view class="add-schedule-page">
    <!-- 导航栏 -->
    <navBar :title="title" />

    <!-- 主内容区域 -->
    <view class="content-area">
      <!-- 门诊时间选择 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">门诊时间</text>
          <text class="required-mark">*</text>
        </view>
        
        <!-- 星期选择 -->
        <view class="weekday-selection">
          <view class="weekday-row">
             <view 
               class="weekday-btn" 
               :class="{ active: selectedWeekday == 1 }"
               @click="selectWeekday(1)"
             >
               <text class="weekday-text">周一</text>
             </view>
             <view 
               class="weekday-btn" 
               :class="{ active: selectedWeekday == 2 }"
               @click="selectWeekday(2)"
             >
               <text class="weekday-text">周二</text>
             </view>
             <view 
               class="weekday-btn" 
               :class="{ active: selectedWeekday == 3 }"
               @click="selectWeekday(3)"
             >
               <text class="weekday-text">周三</text>
             </view>
             <view 
               class="weekday-btn" 
               :class="{ active: selectedWeekday == 4 }"
               @click="selectWeekday(4)"
             >
               <text class="weekday-text">周四</text>
             </view>
          </view>
          <view class="weekday-row">
            <view 
              class="weekday-btn" 
              :class="{ active: selectedWeekday == 5 }"
              @click="selectWeekday(5)"
            >
              <text class="weekday-text">周五</text>
            </view>
            <view 
              class="weekday-btn" 
              :class="{ active: selectedWeekday == 6 }"
              @click="selectWeekday(6)"
            >
              <text class="weekday-text">周六</text>
            </view>
            <view 
              class="weekday-btn" 
              :class="{ active: selectedWeekday== 7 }"
              @click="selectWeekday(7)"
            >
              <text class="weekday-text">周日</text>
            </view>
            <view class="weekday-btn empty"></view>
          </view>
        </view>

        <!-- 时间段选择 -->
        <view class="time-period-selection">
          <view 
            class="time-btn" 
            :class="{ active: selectedTimePeriod === 'a' }"
            @click="selectTimePeriod('a')"
          >
            <text class="time-text">上午</text>
          </view>
          <view 
            class="time-btn" 
            :class="{ active: selectedTimePeriod === 'b' }"
            @click="selectTimePeriod('b')"
          >
            <text class="time-text">下午</text>
          </view>
          <view 
            class="time-btn" 
            :class="{ active: selectedTimePeriod === 'c' }"
            @click="selectTimePeriod('c')"
          >
            <text class="time-text">晚上</text>
          </view>
          <view 
            class="time-btn" 
            :class="{ active: selectedTimePeriod === 'd' }"
            @click="selectTimePeriod('d')"
          >
            <text class="time-text">全天</text>
          </view>
        </view>
      </view>

      <!-- 门诊地点选择 -->
      <view class="form-section form-site">
        <view class="section-title">
          <text class="title-text">门诊地点</text>
          <text class="required-mark">*</text>
        </view>
        
        <view class="location-card" 
          v-for="item in workPlaceList" 
          :key="item.uuid"
          :class="{ active:selectedLocation.uuid === item.uuid }"
          @click="chooseLocation(item)">
          <view class="location-content">
            <text class="hospital-name">{{ item.hospital_name }}</text>
            <text class="office-number">{{ item.office_name }}</text>
            <view class="location-bottom">
              <text class="location-text">{{ item.location }}</text>
              <view class="clinic-type-tag">
                    {{ getTypeText(item.type) }}
              </view>
            </view>
          </view>
          <!-- <view class="check-icon">✓</view> -->
        </view>
      </view>
    </view>

    <!-- 底部确定按钮 -->
    <view class="bottom-actions">
      <view class="confirm-btn" @click="confirmPublish">
        <text class="btn-text">{{ uuid? '确定修改' : '确定发布' }}</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" style="display: flex;align-items: center;gap: 10rpx;">
            <text class="weekday-text">{{ getWeekdayText(selectedWeekday) }}</text>
            <text class="time-text">{{ getTimePeriodText(selectedTimePeriod) }}</text>
          </view>
          
       </view>
       <view class="notice-row">
          <view class="name">门诊地点：</view>
          <view class="value">
            <text class="value-text">{{ selectedLocation.hospital_name }};</text>
            <text class="value-text">{{ selectedLocation.office_name }};</text>
            <text class="value-text">{{ selectedLocation.location }};</text>
            <text class="value-text">
              {{ getTypeText(selectedLocation.type) }}
            </text>
          </view>
       </view>
    </view>
   </template>
  </unidialog>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import unidialog from '@/components/dialog/dialog.vue'
import api from "@/api/api.js";
import navTo from '@/utils/navTo'
import navBar from '@/components/navBar/navBar.vue'
const title = ref('增加门诊安排')
const uuid=ref('')
const noticeVisible=ref(false)
const noticeConfirm = () => {
  noticeVisible.value = false
  submit()
}
// 响应式数据
const selectedWeekday = ref(null)
const selectedTimePeriod = ref('')
const selectedLocation = ref({})
 const getTypeText = (type) => {
  const map = { 1: '普通门诊', 2: '专家门诊', 3: '特需门诊', 4: '专科/专病门诊' }
  return map[type] || '普通门诊'
}
const getWeekdayText = (weekday) => {
  const map = { 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六', 7: '周日' }
  return map[weekday] 
}
const getTimePeriodText = (timePeriod) => {
  const map = { a: '上午', b: '下午', c: '晚上', d: '全天' }
  return map[timePeriod] 
}
onShow(()=>{
  listWorkPlace()
})
// 方法
const goBack = () => {
  uni.navigateBack()
}
const workPlaceList=ref([])
const listWorkPlace=async()=>{
  const res = await api.listWorkPlace()
  if(res.code == 200){
    workPlaceList.value = res.data;
      for(let i=0;i<workPlaceList.value.length;i++){
        if(workPlaceList.value[i].uuid == selectedLocation.value.uuid){
           chooseLocation(workPlaceList.value[i]);
          break
        }
      }
  }
}
const selectWeekday = (weekday) => {
  selectedWeekday.value = weekday
}
const addOutPatient=async()=>{
  const res = await api.addOutPatient({
    week: selectedWeekday.value,
    day: selectedTimePeriod.value,
    note:'',
    type:1,
    workplace_uuid: selectedLocation.value.uuid
  })
  if(res.code == 200){
    uni.showToast({
      title: '发布成功',
      icon: 'none'
    })
    uni.$emit('updateOutPatient');
    uni.navigateBack()
    
  }
}

const updateOutPatient=async()=>{
  const res = await api.updateOutPatient({
    uuid: uuid.value,
    note:'',
    type:1,
    week: selectedWeekday.value,
    day: selectedTimePeriod.value,
    workplace_uuid: selectedLocation.value.uuid
  })

if(res.code == 200){
    uni.showToast({
      title: '修改成功',
      icon: 'none'
    })
    uni.$emit('updateOutPatient')
    uni.navigateBack()
  }
}
const selectTimePeriod = (period) => {
  selectedTimePeriod.value = period
}

 const chooseLocation = (item) => {
  console.log(item)
   selectedLocation.value = item
 }
const getType=(type)=>{
  const map = { 1: 'a', 2: 'b', 3: 'c', 4: 'd' }
  return map[type] 
}
const submit=()=>{
  if(uuid.value){
    updateOutPatient()
  }else{
    addOutPatient()
  }
}
const confirmPublish = () => {
  if (!selectedWeekday.value) {
    uni.showToast({
      title: '请选择门诊时间',
      icon: 'none'
    })
    return
  }
  
  if (!selectedTimePeriod.value) {
    uni.showToast({
      title: '请选择时间段',
      icon: 'none'
    })
    return
  }

  if (!selectedLocation.value.uuid) {
    uni.showToast({
      title: '请选择门诊地点',
      icon: 'none'
    })
    return
  }

  noticeVisible.value = true
} 
 
  onLoad((options)=>{
    console.log(options)
    uuid.value = options.uuid;
    selectedWeekday.value = options.week;
    selectedLocation.value.uuid = options.workplace_uuid;
    selectedTimePeriod.value =options.type;
    
    if(uuid.value){
      title.value = '编辑门诊安排'
    }
  })
</script>

<style lang="scss" scoped>
.value .weekday-text{
  color:red
}
.value .time-text{
  color:red;
  margin-left: 10rpx;
}
.add-schedule-page {
  min-height: 100vh;
  background-color: #fff;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  font-size: 28rpx;
  color: #333;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.network-speed {
  font-size: 24rpx;
  color: #666;
}

.network-type {
  font-size: 24rpx;
  color: #666;
}

.wifi-icon, .battery-icon {
  font-size: 24rpx;
}

.battery {
  font-size: 24rpx;
  color: #333;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-left {
  width: 60rpx;
}

.back-arrow {
  font-size: 50rpx;
  color: #8B2316;
  font-weight: bold;
}

.nav-center {
  flex: 1;
  text-align: center;
}
.notice-row{
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-start;
  
  .name{
    width: 160rpx;
    white-space: nowrap;
    text-align: right;

  font-size: 28rpx;
  color: #333;
}
.value{
  flex: 1;
  font-size: 28rpx;
  text-align: left;
  color: #333;
}
}

.nav-title {
  font-size: 34rpx;
  color: #8B2316;
  font-weight: bold;
}

.nav-right {
  width: 60rpx;
}

/* 主内容区域 */
.content-area {
  margin-top: calc(var(--status-bar-height) + 44px);
  padding: 40rpx 30rpx;
}

/* 表单区域 */
.form-section {
  margin-bottom: 60rpx;
}
.form-site{
    margin-bottom: 120rpx;
}
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  color: #8B2316;
}

.required-mark {
  color: #8B2316;
  font-size: 32rpx;
  margin-left: 4rpx;
}

/* 星期选择样式 */

.weekday-row {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.weekday-btn {
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;

}

.weekday-btn.active {
  border-color: #8B2316;
  background: url('@/static/addoutpa_true.png') no-repeat right bottom;
  background-size:39rpx 39rpx;
//   

}

.weekday-btn.empty {
  border: none;
  background-color: transparent;
}

.weekday-text {
  font-size: 28rpx;
  color: #666;
}

.weekday-btn.active .weekday-text {
  color:#8B2316;
}

/* 时间段选择样式 */
.time-period-selection {
    padding-top: 20rpx;
  display: flex;
  border-top: 2rpx solid #f0f0f0;
  gap: 20rpx;
}

.time-btn {
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.time-btn.active {
  border-color: #8B2316;
  background: url('@/static/addoutpa_true.png') no-repeat right bottom;
  background-size:39rpx 39rpx;
}

.time-text {
  font-size: 28rpx;
  color: #666;
}

.time-btn.active .time-text {
  color:#8B2316;
}

/* 门诊地点选择样式 */
.location-card {
  border: 2rpx solid #999;
  border-radius: 12rpx;
  padding: 30rpx;
  background-color: #fff;
  position: relative;
  min-height: 200rpx;
  margin-bottom: 30rpx;
 
}
.location-card.active{
    border: 2rpx solid #8B2316;
    background: url('@/static/addoutpa_true.png') no-repeat right bottom;
    background-size:77rpx 77rpx;
}
.location-content {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.hospital-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}

.office-number {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.location-bottom {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.location-text {
  font-size: 28rpx;
  color: #333;
}

.clinic-type-tag {
  border: 2rpx solid #8B2316;
  border-radius: 20rpx;
  padding: 2rpx 16rpx;
  white-space: nowrap;
  background-color: transparent;
  font-size: 24rpx;
  color: #8B2316;
  display: flex;
  align-items: center;
  justify-content: center;
}


.check-icon {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #8B2316;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

/* 底部按钮样式 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.confirm-btn {
  background-color: #8B2316;
  border-radius: 12rpx;
  padding: 25rpx;
  text-align: center;
}

.btn-text {
  color: #fff;
  font-size: 32rpx;
}
</style>
