<template>
  <view class="edit-address-page">
    <navBar :title="pageTitle" />

    <view class="form-container">
      <!-- 医院（输入联想搜索） -->
      <view class="form-item">
        <view class="label">医院 <text class="required">*</text></view>
        <view class="value full">
          <input class="input hospital-input" v-model.trim="form.hospital_name" placeholder="请输入医院名称" @input="onHospitalInput" @keydown.enter.prevent="onHospitalEnter" />
          <view v-if="showHospitalList" class="suggestion">
            <view v-for="h in hospitalList" :key="h.uuid" class="suggestion-item" @click="pickHospital(h)">
              {{ h.name }}
            </view>
            <view v-if="hospitalList.length===0" class="suggestion-empty">无匹配医院</view>
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 科室 -->
      <view class="form-item">
        <view class="label">科室 <text class="required">*</text></view>
        <view class="value">
          <input class="input" v-model.trim="form.office_name" placeholder="请输入科室" />
        </view>
      </view>

      <view class="divider"></view>

      <!-- 地址 -->
      <view class="form-item">
        <view class="label">地址 <text class="required">*</text></view>
        <view class="value">
          <input class="input" v-model.trim="form.location" placeholder="如门诊楼东侧502室" />
        </view>
      </view>

      <view class="divider big"></view>

      <!-- 门诊类型 -->
      <view class="form-item column">
        <view class="label">门诊类型 <text class="required">*</text></view>
        <view class="type-row">
          <view class="type-btn" :class="{active: form.type==1}" @click="selectType(1)">普通门诊</view>
          <view class="type-btn" :class="{active: form.type==2}" @click="selectType(2)">专家门诊</view>
          <view class="type-btn" :class="{active: form.type==3}" @click="selectType(3)">特需门诊</view>
          <view class="type-btn" :class="{active: form.type==4}" @click="selectType(4)">专科/专病门诊</view>
        </view>
      </view>
    </view>

    <view class="bottom-actions">
      <view class="submit-btn" @click="alertDialog">
        <text class="btn-text">{{form.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">{{ form.hospital_name }}</view>
          
       </view>
       <view class="notice-row">
          <view class="name">科室：</view>
          <view class="value">
           {{ form.office_name }}
          </view>
       </view>
       <view class="notice-row">
          <view class="name">地址：</view>
          <view class="value">
           {{ form.location }}
          </view>
       </view>
       <view class="notice-row">
        <view class="name">门诊类型：</view>
        <view class="value" v-if="form.type==1">
          普通门诊
        </view>
        <view class="value" v-if="form.type==2">
          专家门诊
        </view>
        <view class="value" v-if="form.type==3">
          特需门诊
        </view>
        <view class="value" v-if="form.type==4">
          专科/专病门诊
        </view>
       </view>
    
    </view>
   </template>
  </unidialog>
</template>

<script setup>
 import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar/navBar.vue'
import unidialog from '@/components/dialog/dialog.vue'
import api from '@/api/api.js'
const noticeVisible = ref(false)
const noticeConfirm = () => {
  noticeVisible.value = false
  submit()
}

const pageTitle = ref('新增执业地点')
const form = ref({
  hospital_uuid: '',
  hospital_name: '',
  office_name: '',
  location: '',
  type: 1
})

const selectType = (t) => { form.value.type = t }

// 医院联想搜索
const hospitalList = ref([])
const showHospitalList = ref(false)
let hospitalTimer = null
const onHospitalInput = (e) => {
  showHospitalList.value = true
  if (hospitalTimer) clearTimeout(hospitalTimer)
  hospitalTimer = setTimeout(() => {
    fetchHospitals(e.detail.value || form.value.hospital_name)
  }, 300)
}
const onHospitalEnter = () => {
  fetchHospitals(form.value.hospital_name)
}
const fetchHospitals = async (keyword) => {
  if (!keyword) { hospitalList.value = []; return }
  const res = await api.getHospitalList({ name: keyword })
  if (res && res.code === 200) {
    hospitalList.value = res.data || []
  }
}
const pickHospital = (h) => {
  form.value.hospital_uuid = h.uuid
  form.value.hospital_name = h.name
  showHospitalList.value = false
}
const validate = () => {
  if (!form.value.hospital_name) return '请选择医院'
  if (!form.value.office_name) return '请输入科室'
  if (!form.value.location) return '请输入地址'
  if (!form.value.type) return '请选择门诊类型'
  return ''
}



const alertDialog = () => {
  const err = validate()
  if (err) { uni.showToast({ title: err, icon: 'none' }); return }
  noticeVisible.value = true
}
const submit = async () => {
  
  // 示例更新接口；若不存在可替换为新增或本地处理
  try {
    const res =form.value.uuid?await api.updateWorkPlace(form.value) : await api.addWorkPlace(form.value)
    if (res.code === 200) {
        let title = form.value.uuid ? '修改成功' : '新增成功'
      uni.showToast({ title: title, icon: 'none' })
      uni.navigateBack()
    }
  } catch (e) {
    uni.showToast({ title: '提交失败', icon: 'none' })
  }
}

onLoad((options) => {
  // 支持从列表/详情传参回填
  if (options) {
    if(options.uuid){
        form.value.uuid = options.uuid;
        form.value.type = options.type;
        form.value.hospital_uuid = options.hospital_uuid;
        form.value.hospital_name = options.hospital_name;
        form.value.office_name = options.office_name;
        form.value.location = options.location;
    }
    if(options.uuid){
      pageTitle.value = '修改执业地点'
    }
  }
})
</script>

<style lang="scss" scoped>
.notice-row{
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .name{
    width: 160rpx;
    text-align: right;
  }
  .value{
    flex: 1;
    text-align: left;
  }
}
.edit-address-page { min-height: 100vh; background: #fff; }
.form-container {
   padding: 0 24rpx;
  top: calc(var(--status-bar-height) + 44px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 160rpx;
  overflow-y: scroll;
  z-index: 1;
  box-sizing: border-box;
 }

.form-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx 0; }
.form-item.column { flex-direction: column; align-items: flex-start; }
.label { font-size: 30rpx; color: #333; }
.required { color: #8B2316; margin-left: 6rpx; }
.value { flex: 1; margin-left: 24rpx; }
.value.full { width: 100%; margin-left: 0; position: relative; }
.value-text { font-size: 30rpx; color: #333; }
.value-text.placeholder { color: #999; }
.input { width: 100%; font-size: 30rpx; color: #333; }
.hospital-input{
  padding-left:24rpx;
}
.suggestion { position: absolute; top: 84rpx; left: 0; right: 0; background: #fff; border: 2rpx solid #eee; border-radius: 10rpx; max-height: 480rpx; overflow-y: auto; z-index: 10; }
.suggestion-item { padding: 20rpx 24rpx; font-size: 28rpx; color: #333; border-bottom: 2rpx solid #f5f5f5; }
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-empty { padding: 20rpx 24rpx; font-size: 26rpx; color: #999; }

.divider { height: 2rpx; background: #eee; }
.divider.big { margin-top: 10rpx; }

.type-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rpx; margin-top: 20rpx; width: 100%; }
.type-btn { text-align: center; border: 2rpx solid #ddd; border-radius: 12rpx; height: 96rpx; line-height: 96rpx; color: #999; font-size: 24rpx;}
.type-btn.active { border-color: #8B2316; color: #8B2316; background: url('@/static/addoutpa_true.png') right bottom/39rpx 39rpx no-repeat; }

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

