<template>
  <view class="container">
    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
      <view class="search-view">
        <u--input 
          v-model="queryParams.diseaseName" 
          border="surround"
          @change="searchBlur"
          placeholder="请输入疾病名称" 
          placeholderStyle="color: #909399"
          color="#333333"
          customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
          class="search-input" 
          suffixIcon="search" 
          suffixIconStyle="color: #667eea">
        </u--input>
        <view class="filter-btn" @click="filterPanel = !filterPanel">
          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
          <text>筛选</text>
        </view>
        <view class="add-btn" v-show="auth.hasPermi('health:chronicDisease:add')" @click="handleAdd()">
          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
          <text>新增</text>
        </view>
        <u-transition :show="filterPanel" mode="fade">
          <view class="filter-panel">
            <view class="filter-panel-content">
              <view class="filter-title">成员</view>
              <view class="state-list">
                <view v-for="item in memberList" :key="item.id" class="state-item"
                  :class="queryParams.personId == item.id ? 'active' : ''" @click="selectMember(item)">{{ item.name }}</view>
              </view>
              <view class="filter-title">疾病状态</view>
              <view class="state-list">
                <view v-for="item in statusList" :key="item.value" class="state-item"
                  :class="queryParams.diseaseStatus == item.value ? 'active' : ''" @click="selectStatus(item)">{{ item.label }}</view>
              </view>
            </view>
            <view class="btn-box">
              <view class="btn-reset" @click="resetQuery()">
                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
                <text>重置</text>
              </view>
              <view class="btn-confirm" @click="searchSubmit()">
                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
                <text>确定</text>
              </view>
            </view>
          </view>
        </u-transition>
      </view>
    </u-sticky>
    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
      <u-list-item v-for="(item, index) in listData" :key="index">
        <view class="list-item" @click="enterDetails(item)">
          <view class="item-header">
            <view class="card-name-section">
              <view class="card-icon">
                <uni-icons type="heart" size="20" color="#ffffff"></uni-icons>
              </view>
              <view class="card-info">
                <text class="card-name">{{ item.diseaseName || '--' }}</text>
              </view>
            </view>
            <view class="status-tag" :class="'status-' + item.diseaseStatus">
              {{ getStatusLabel(item.diseaseStatus) }}
            </view>
          </view>
          
          <view class="card-body">
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">成员</text>
                <text class="info-value">{{ item.personName || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">疾病编码</text>
                <text class="info-value">{{ item.diseaseCode || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">确诊日期</text>
                <text class="info-value">{{ formatDate(item.diagnosisDate) }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">主治医生</text>
                <text class="info-value">{{ item.mainDoctor || '--' }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.hospital">
                <text class="info-label">就诊医院</text>
                <text class="info-value">{{ item.hospital }} {{ item.department ? '- ' + item.department : '' }}</text>
              </view>
              <view class="info-item info-item-full">
                <text class="info-label">启用状态</text>
                <text class="info-value" :style="{ color: item.isActive === 1 ? '#52c41a' : '#909399' }">{{ item.isActive === 1 ? '已启用' : '已停用' }}</text>
              </view>
            </view>
          </view>
          
          <view class="operate" @click.stop>
            <view class="btn-edit" v-show="auth.hasPermi('health:chronicDisease:edit')" @click="handleEdit(item)">
              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
              <text>修改</text>
            </view>
            <view class="btn-delete" v-show="auth.hasPermi('health:chronicDisease:remove')" @click="handleDelete(item)">
              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
              <text>删除</text>
            </view>
          </view>
        </view>
      </u-list-item>
      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
    </u-list>
    <suspend></suspend>
  </view>
</template>

<script setup>
import { listChronicDisease, delChronicDisease } from '@/api/health/chronicDisease'
import { listPerson } from '@/api/health/person'
import { onLoad, onShow } from "@dcloudio/uni-app"
import auth from "@/plugins/auth"
import { reactive, toRefs, ref } from "vue"

const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const status = ref('loadmore')
const memberList = ref([])
const statusList = ref([
  { label: '稳定', value: 1 },
  { label: '需关注', value: 2 },
  { label: '急性期', value: 3 }
])

const data = reactive({
  filterPanel: false,
  queryParams: {
    diseaseName: null,
    personId: null,
    diseaseStatus: null
  }
})
const { filterPanel, queryParams } = toRefs(data)

onLoad(() => {
  getMemberList()
  getList()
})

onShow(() => {
  if (isShow.value) {
    listData.value = []
    pageNum.value = 1
    getList()
    isShow.value = false
  }
})

function getMemberList() {
  listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
    memberList.value = res.rows || []
  })
}

function getStatusLabel(s) {
  const map = { 1: '稳定', 2: '需关注', 3: '急性期' }
  return map[s] || '未知'
}

function formatDate(date) {
  if (!date) return '--'
  if (Array.isArray(date)) return `${date[0]}-${String(date[1]).padStart(2, '0')}-${String(date[2]).padStart(2, '0')}`
  if (typeof date === 'string') return date.substring(0, 10)
  return '--'
}

function selectMember(item) {
  queryParams.value.personId = queryParams.value.personId == item.id ? null : item.id
}

function selectStatus(item) {
  queryParams.value.diseaseStatus = queryParams.value.diseaseStatus == item.value ? null : item.value
}

function loadmore() {
  pageNum.value += 1
  if (status.value == 'loadmore') getList()
}

function getList() {
  status.value = 'loading'
  listChronicDisease({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
    listData.value = listData.value.concat(res.rows || [])
    if (listData.value.length < res.total) {
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
  }).catch(() => { status.value = 'nomore' })
}

function searchSubmit() {
  pageNum.value = 1
  listData.value = []
  getList()
  filterPanel.value = false
}

function searchBlur() {
  pageNum.value = 1
  listData.value = []
  getList()
}

function resetQuery() {
  queryParams.value.diseaseName = null
  queryParams.value.personId = null
  queryParams.value.diseaseStatus = null
}

function handleAdd() {
  uni.navigateTo({ url: '/pages/health/chronicDisease/addEdit' })
  isShow.value = true
}

function handleEdit(item) {
  uni.navigateTo({ url: `/pages/health/chronicDisease/addEdit?id=${item.id}` })
  isShow.value = true
}

function enterDetails(item) {
  uni.navigateTo({ url: `/pages/health/chronicDisease/details?id=${item.id}` })
  isShow.value = true
}

function handleDelete(item) {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条记录吗？',
    confirmText: '删除',
    confirmColor: '#f5576c',
    success: function (res) {
      if (res.confirm) {
        delChronicDisease(item.id).then(() => {
          uni.showToast({ title: '删除成功', icon: 'success' })
          pageNum.value = 1
          listData.value = []
          getList()
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/health-common.scss';

// 筛选面板位置补充（单行模式）
.search-view .filter-panel {
  top: 96rpx;
}
</style>
