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

    <!-- 列表区域 -->
    <view class="list-container">
      <view v-for="item in addressList" :key="item.uuid" class="card">
        <view class="card-body">
          <view class="name">{{ item.hospital_name }}</view>
          <view class="dept">{{ item.office_name }}</view>
          <view class="city-and-tag">
            <text class="city">{{ item.location }}</text>
            <view class="tag">{{ getTypeTag(item.type) }}</view>
          </view>
        </view>

        <view class="card-actions">
          <view class="action" @click="edit(item)">
            <up-image :src="editImg" width="30rpx" height="30rpx"></up-image>
            <text class="text">编辑</text>
          </view>
          <view class="action" @click="remove(item)">
            <up-image :src="deleteImg" width="30rpx" height="30rpx"></up-image>
            <text class="text">删除</text>
          </view>
        </view>
      </view>
      <empty v-if="addressList.length === 0" :emptyDesc="'暂无执业地点'"/>
    </view>

    <!-- 底部新增按钮 -->
    <view class="bottom-actions">
      <view class="add-btn" @click="addNew">
        <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 empty from '@/components/empty/empty.vue'
import api from '@/api/api.js'
import navTo from '@/utils/navTo'
const title = ref('执业地点管理')
import editImg from '@/static/edit_icon.png'
import deleteImg from '@/static/delete_icon.png'
const addressList = ref([])

const getTypeTag = (type) => {
  // 与设计稿一致：1=普通门诊；其他展示“专科/专病门诊”
  return type === 1 ? '普通门诊' : '专科/专病门诊'
}

const fetchList = async () => {
  const res = await api.listWorkPlace({})
  if (res && res.code === 200 && Array.isArray(res.data)) {
    addressList.value = res.data
  }
}

onShow(() => {
  fetchList()
})

const edit = (item) => {
  navTo({
    url: '/pages_chat/editAddress/editAddress?uuid='+item.uuid+'&type='+item.type+'&hospital_uuid='+item.hospital_uuid+'&hospital_name='+item.hospital_name+'&office_name='+item.office_name+'&location='+item.location
  })
}

const remove = (item) => {
  uni.showModal({
    title: '删除确认',
    content: '确定删除该执业地点吗？',
    success: (res) => {
      if (res.confirm) {
        api.deleteWorkPlace({uuid:item.uuid}).then(res=>{
          if(res.code==200){
            uni.showToast({ title: '已删除', icon: 'none' })
            fetchList()
          }
        })
       
      }
    }
  })
}

const addNew = () => {
  navTo({
    url: '/pages_chat/editAddress/editAddress'
  })
}
</script>

<style lang="scss" scoped>
.address-manage-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.list-container {
  top: calc(var(--status-bar-height) + 54px);
  width: 100%;
  bottom: 120rpx;
  left: 0rpc;
  right: 0rpx;
  overflow-y: scroll;
  position: fixed;
 
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 0 30rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

.card-body {
  padding: 28rpx;
}

.name {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
}

.dept {
  margin-top: 18rpx;
  font-size: 28rpx;
  color: #666;
}

.city-and-tag {
  margin-top: 18rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

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

.tag {
  border: 2rpx solid #8B2316;
  color: #8B2316;
  border-radius: 24rpx;
  padding: 2rpx 18rpx;
  white-space: nowrap;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 36rpx;
  padding: 20rpx 28rpx;
  border-top: 2rpx solid #f0f0f0;
}

.action {
  display: flex;
  align-items: center;
 
}

.icon { font-size: 26rpx; }
.text { font-size: 26rpx; color: #666; margin-left: 8rpx;margin-top: 3rpx;}

.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 24rpx;
  border-top: 1rpx solid #eee;
}

.add-btn {
  background: #8B2316;
  border-radius: 12rpx;
  padding: 24rpx 0;
  text-align: center;
}

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

