<template>
  <view class="container">
    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
      <view class="search-view">
        <u--input 
          v-model="queryParams.keys" 
          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>
        <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.memberId == 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.status == 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">
          <view class="item-header">
            <view class="card-name-section">
              <view class="card-icon">
                <uni-icons type="clock" size="20" color="#ffffff"></uni-icons>
              </view>
              <view class="card-info">
                <text class="card-name">{{ item.planName || item.medicineName || '服药任务' }}</text>
              </view>
            </view>
            <view class="status-tag" :class="'status-' + item.status">
              {{ getStatusLabel(item.status) }}
            </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.medicineName || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">计划日期</text>
                <text class="info-value">{{ formatDate(item.plannedDate) }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">计划时间</text>
                <text class="info-value">{{ formatTime(item.plannedTime) }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">剂量</text>
                <text class="info-value">{{ item.plannedDosage || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">实际时间</text>
                <text class="info-value">{{ item.actualTime ? formatDateTime(item.actualTime) : '--' }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.notes">
                <text class="info-label">备注</text>
                <text class="info-value">{{ item.notes }}</text>
              </view>
            </view>
          </view>
          
          <view class="operate" @click.stop>
            <view class="btn-confirm-med" v-if="item.status === 0" @click="handleConfirm(item)">
              <uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
              <text>确认服药</text>
            </view>
            <view class="btn-skip" v-if="item.status === 0" @click="handleSkip(item)">
              <uni-icons type="close" size="16" color="#fa8c16"></uni-icons>
              <text>跳过</text>
            </view>
            <view class="btn-delete" v-show="auth.hasPermi('health:medicationTask: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>
    <!-- 确认服药弹窗 -->
    <u-modal :show="confirmModalShow" title="确认服药" :showCancelButton="true"
      @confirm="submitConfirm" @cancel="confirmModalShow = false">
      <view style="padding: 24rpx;">
        <text style="color:#666;font-size:28rpx;">实际服药时间：{{ actualTime }}</text>
      </view>
    </u-modal>
    <!-- 跳过弹窗 -->
    <u-modal :show="skipModalShow" title="跳过服药" :showCancelButton="true"
      @confirm="submitSkip" @cancel="skipModalShow = false">
      <view style="padding: 24rpx;">
        <u--input v-model="skipNotes" placeholder="请输入跳过原因（选填）" border="surround"></u--input>
      </view>
    </u-modal>
    <suspend></suspend>
  </view>
</template>

<script setup>
import { listMedicationTask, delMedicationTask, confirmMedication, skipMedication } from '@/api/health/medicationTask'
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 status = ref('loadmore')
const memberList = ref([])
const statusList = ref([
  { label: '未执行', value: 0 },
  { label: '已确认', value: 1 },
  { label: '已跳过', value: 2 },
  { label: '漏服', value: 3 }
])

const confirmModalShow = ref(false)
const skipModalShow = ref(false)
const currentRow = ref(null)
const actualTime = ref('')
const skipNotes = ref('')

const data = reactive({
  filterPanel: false,
  queryParams: {
    keys: null,
    memberId: null,
    status: null
  }
})
const { filterPanel, queryParams } = toRefs(data)

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

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

function getStatusLabel(s) {
  const map = { 0: '未执行', 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 formatTime(time) {
  if (!time) return '--'
  if (Array.isArray(time)) return `${String(time[0]).padStart(2, '0')}:${String(time[1]).padStart(2, '0')}`
  if (typeof time === 'string') return time.substring(0, 5)
  return '--'
}

function formatDateTime(datetime) {
  if (!datetime) return '--'
  return datetime.replace('T', ' ').substring(0, 16)
}

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

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

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

function getList() {
  status.value = 'loading'
  listMedicationTask({ 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.keys = null
  queryParams.value.memberId = null
  queryParams.value.status = null
}

function handleConfirm(item) {
  currentRow.value = item
  const now = new Date()
  actualTime.value = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
  confirmModalShow.value = true
}

function submitConfirm() {
  confirmMedication(currentRow.value.id, 1, actualTime.value).then(() => {
    uni.showToast({ title: '操作成功', icon: 'success' })
    confirmModalShow.value = false
    pageNum.value = 1
    listData.value = []
    getList()
  })
}

function handleSkip(item) {
  currentRow.value = item
  skipNotes.value = ''
  skipModalShow.value = true
}

function submitSkip() {
  skipMedication(currentRow.value.id, skipNotes.value).then(() => {
    uni.showToast({ title: '操作成功', icon: 'success' })
    skipModalShow.value = false
    pageNum.value = 1
    listData.value = []
    getList()
  })
}

function handleDelete(item) {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条记录吗？',
    confirmText: '删除',
    confirmColor: '#f5576c',
    success: function (res) {
      if (res.confirm) {
        delMedicationTask(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;
}

// 服药任务特有按钮
.operate {
  .btn-confirm-med {
    background: rgba(82, 196, 26, 0.1);
    color: #52c41a;
    border: 1rpx solid rgba(82, 196, 26, 0.3);
  }

  .btn-skip {
    background: rgba(250, 140, 22, 0.1);
    color: #fa8c16;
    border: 1rpx solid rgba(250, 140, 22, 0.3);
  }
}

// 服药任务特有状态色
.status-0 { background: rgba(102, 126, 234, 0.2); color: #667eea; }
.status-1 { background: rgba(82, 196, 26, 0.2); color: #52c41a; }
.status-2 { background: rgba(250, 140, 22, 0.2); color: #fa8c16; }
.status-3 { background: rgba(245, 87, 108, 0.2); color: #f5576c; }
</style>
