<template>
  <view class="container">
    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
      <view class="search-view">
        <u--input 
          v-model="queryParams.name" 
          border="surround"
          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"
          @blur="handleSearch" 
          suffixIcon="search" 
          suffixIconStyle="color: #667eea">
        </u--input>
        <view class="add-btn" @click="handleAdd()">
          <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
          <text>新增</text>
        </view>
      </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="flag-filled" size="20" color="#ffffff"></uni-icons>
              </view>
              <view class="place-info">
                <text class="place-text">{{ item.place }}</text>
              </view>
            </view>
            <view class="duration-section">
              <text class="duration-value">{{ item.exerciseTimeStr || '--' }}</text>
            </view>
            <view class="name-section">
              <text class="name-value">{{ item.name }}</text>
            </view>
          </view>
          
          <view class="card-body">
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">活动类型</text>
                <text class="info-value">{{ dictStr(item.type,typeList) || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">总费用</text>
                <text class="info-value cost-value">{{ item.totalCost }} 元</text>
              </view>
              <view class="info-item">
                <text class="info-label">成员</text>
                <text class="info-value">{{ item.partner || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">活动量</text>
                <text class="info-value">{{ dictStr(item.activityVolume,activityVolumeList) || '--' }}</text>
              </view>
              <view class="info-item" style="flex: 0 0 100%;">
              </view>
              <view class="info-item">
                <text class="info-label">开始时间</text>
                <text class="info-value">{{ item.startTime || '--' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">结束时间</text>
                <text class="info-value">{{ item.endTime || '--' }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.costDetail">
                <text class="info-label">费用明细</text>
                <text class="info-value">{{ item.costDetail }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.foods">
                <text class="info-label">饮食</text>
                <text class="info-value">{{ item.foods }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.harvest">
                <text class="info-label">收获</text>
                <text class="info-value">{{ item.harvest }}</text>
              </view>
              <view class="info-item info-item-full" v-if="item.remark">
                <text class="info-label">备注</text>
                <text class="info-value">{{ item.remark }}</text>
              </view>
              <view class="info-item info-item-full" v-if="parseAttachment(item.attachment).length">
                <text class="info-label">附件</text>
                <view class="attachment-list">
                  <image
                    v-for="(img, imgIdx) in parseAttachment(item.attachment)"
                    :key="imgIdx"
                    :src="img"
                    class="attachment-thumb"
                    mode="aspectFill"
                    @click.stop="previewAttachment(parseAttachment(item.attachment), imgIdx)"
                  ></image>
                </view>
              </view>
            </view>
          </view>
          
          <view class="operate" @click.stop>
            <view class="btn-summary" @click="handleCostSummary(item)">
              <uni-icons type="list" size="16" color="#13c2c2"></uni-icons>
              <text>费用</text>
            </view>
            <view class="btn-edit" @click="handleEdit(item)">
              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
              <text>修改</text>
            </view>
            <view class="btn-copy" @click="handleCopy(item)">
              <uni-icons type="paperplane" size="16" color="#fa8c16"></uni-icons>
              <text>复制</text>
            </view>
            <view class="btn-delete" @click="handleDelete(item)">
              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
              <text>删除</text>
            </view>
          </view>
        </view>
      </u-list-item>
      <view>
      </view>
      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
    </u-list>

    <view v-if="summaryVisible" class="summary-mask" @click="closeSummary">
      <view class="summary-panel" @click.stop>
        <view class="summary-header">
          <view class="summary-title">
            <text class="summary-name">费用汇总</text>
            <text class="summary-subtitle">{{ currentActivity.name || '--' }}</text>
          </view>
          <view class="summary-close" @click="closeSummary">
            <uni-icons type="closeempty" size="24" color="#909399"></uni-icons>
          </view>
        </view>

        <view class="summary-meta">
          <view class="summary-meta-item">
            <text class="meta-label">已选</text>
            <text class="meta-value">{{ selectedExpenses.length }} 条</text>
          </view>
          <view class="summary-meta-item">
            <text class="meta-label">合计金额</text>
            <text class="meta-value amount">{{ selectedTotalAmount }} 元</text>
          </view>
        </view>

        <scroll-view scroll-y class="summary-scroll">
          <view v-if="summaryLoading" class="summary-empty">加载中...</view>
          <view v-else-if="expenseList.length === 0" class="summary-empty">暂无可汇总支出</view>
          <block v-else>
            <view
              v-for="expense in expenseList"
              :key="expense.id"
              class="expense-item"
              :class="{ selected: isExpenseSelected(expense) }"
              @click="toggleExpense(expense)"
            >
              <view class="expense-checkbox" :class="{ active: isExpenseSelected(expense) }"></view>
              <view class="expense-content">
                <view class="expense-main">
                  <text class="expense-category">{{ expense.childCategoryName || dictStr(expense.dealCategory, dealCategoryList) || '日常支出' }}</text>
                  <text class="expense-amount">{{ expense.amount || 0 }} 元</text>
                </view>
                <view class="expense-sub">
                  <text>{{ expense.accountName || '--' }}</text>
                  <text>{{ expense.createTime || '--' }}</text>
                </view>
                <text v-if="expense.remark" class="expense-remark">{{ expense.remark }}</text>
              </view>
            </view>
          </block>
        </scroll-view>

        <view class="summary-footer">
          <view class="summary-cancel" @click="closeSummary">取消</view>
          <view class="summary-confirm" :class="{ disabled: selectedExpenses.length === 0 }" @click="confirmSummary">确认汇总</view>
        </view>
      </view>
    </view>
  </view>
     <!--返回首页按钮 -->
     <suspend></suspend>
</template>

<script setup>
import { listActivity, getActivity, delActivity, updateActivity } from '@/api/health/activity'
import { listAccountDealRecord } from '@/api/invest/accountDealRecord'
import { getDicts } from '@/api/system/dict/data.js'
import { timeHandler } from '@/utils/common.ts'
import {onLoad,onShow} from "@dcloudio/uni-app";
import dayjs from 'dayjs'
import config from '@/config'
    // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
import {reactive ,toRefs,ref,computed }from "vue";
const pageNum = ref(1)
const listData = ref([])
const isShow = ref(false)
const status = ref('loadmore')
const typeList = ref([])
const activityVolumeList = ref([])
const dealCategoryList = ref([])
const summaryVisible = ref(false)
const summaryLoading = ref(false)
const expenseList = ref([])
const selectedExpenses = ref([])
const currentActivityId = ref(null)
const currentActivity = ref({})


const  flag= ref(true)
const data = reactive({
  filterPanel: false,
  queryParams: {
    name: null,
    type: null,
    nickName: null
   } 
})
const { filterPanel, queryParams} = toRefs(data)
const windowHeight = computed(() => {
			uni.getSystemInfoSync().windowHeight - 50
		})	
const selectedTotalAmount = computed(() => {
  return selectedExpenses.value
    .reduce((sum, item) => {
      return sum + (parseFloat(item.amount) || 0)
    }, 0)
    .toFixed(2)
})
onLoad(() => {
    getList()
  });

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

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

  function dictStr(val, arr) {
      let str = ''
      arr.map(item => {
        if (item.dictValue === val) {
          str = item.dictLabel
        }
      })
      return str
    }

function loadmore() {
      pageNum.value += 1
      if (status.value == 'loadmore') {
        getList()
      }
    }
function getList() {
       // 类型
       getDicts('activity_type').then(res => {
        typeList.value = res.data
      })
             // 类型
             getDicts('activity_exercise').then(res => {
              activityVolumeList.value = res.data
      })
      getDicts('deal_category').then(res => {
        dealCategoryList.value = res.data
      })
      status.value = 'loading'
      listActivity({ 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 handleEdit(item) {
      uni.navigateTo({ url: `/pages/health/activity/addEdit?id=${item.id}` })
      isShow.value = true
    }
    function handleCopy(item) {
      uni.navigateTo({ url: `/pages/health/activity/addEdit?flag=copy&id=${item.id}` })
      isShow.value = true
    }
    function handleAdd() {
      uni.navigateTo({ url: `/pages/health/activity/addEdit` })
      isShow.value = true
    }
    function handleCostSummary(item) {
      currentActivityId.value = item.id
      currentActivity.value = item
      selectedExpenses.value = []
      expenseList.value = []
      summaryVisible.value = true
      summaryLoading.value = true

      const queryExpenseParams = {
        pageNum: 1,
        pageSize: 1000,
        dealCategory: '1',
        startTime: item.startTime ? dayjs(item.startTime).format('YYYY-MM-DD') : '',
        endTime: item.endTime ? dayjs(item.endTime).format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD')
      }

      listAccountDealRecord(queryExpenseParams).then(res => {
        expenseList.value = res.rows || []
        summaryLoading.value = false
      }).catch(() => {
        summaryLoading.value = false
      })
    }
    function closeSummary() {
      summaryVisible.value = false
      selectedExpenses.value = []
      expenseList.value = []
    }
    function isExpenseSelected(item) {
      return selectedExpenses.value.some(expense => expense.id === item.id)
    }
    function toggleExpense(item) {
      if (isExpenseSelected(item)) {
        selectedExpenses.value = selectedExpenses.value.filter(expense => expense.id !== item.id)
      } else {
        selectedExpenses.value.push(item)
      }
    }
    function buildCostDetail(activity) {
      const startDate = activity.startTime ? dayjs(activity.startTime).format('YYYY-MM-DD') : ''
      const endDate = activity.endTime ? dayjs(activity.endTime).format('YYYY-MM-DD') : ''
      const isMultiDay = startDate !== endDate

      if (isMultiDay) {
        const groupedByDate = {}
        selectedExpenses.value.forEach(item => {
          const date = dayjs(item.createTime).format('MM-DD')
          if (!groupedByDate[date]) {
            groupedByDate[date] = []
          }
          const category = item.childCategoryName || ''
          groupedByDate[date].push(`${category} ${item.amount}元${item.remark ? '(' + item.remark + ')' : ''}`)
        })
        return Object.keys(groupedByDate)
          .sort()
          .map(date => `${date} ${groupedByDate[date].join('、')}`)
          .join('；')
      }

      return selectedExpenses.value
        .map(item => {
          const category = item.childCategoryName || ''
          return `${category} ${item.amount}元${item.remark ? '(' + item.remark + ')' : ''}`
        })
        .join('；')
    }
    function confirmSummary() {
      if (selectedExpenses.value.length === 0) {
        uni.showToast({
          title: '请选择费用记录',
          icon: 'none'
        })
        return
      }

      getActivity(currentActivityId.value).then(res => {
        const activity = res.data
        const totalAmount = parseFloat(selectedTotalAmount.value)
        const currentTotal = parseFloat(activity.totalCost) || 0
        const detailsWithDate = buildCostDetail(activity)
        const updateData = {
          ...activity,
          totalCost: (currentTotal + totalAmount).toFixed(2),
          costDetail: activity.costDetail ? `${activity.costDetail}；${detailsWithDate}` : detailsWithDate
        }

        updateActivity(updateData).then(() => {
          uni.showToast({
            title: '汇总成功',
            icon: 'success'
          })
          closeSummary()
          pageNum.value = 1
          listData.value = []
          getList()
        })
      })
    }
    function handleDelete(item) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条记录吗？',
        confirmText: '删除',
        cancelText: '取消',
        confirmColor: '#f5576c',
        cancelColor: '#909399',
        success: function (res) {
          if (res.confirm) {
            delActivity(item.id).then(() => {
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              pageNum.value = 1
              listData.value = []
              getList()
            })
          }
        }
      });
    }

function parseAttachment(attachment) {
  if (!attachment) return []
  // 附件是后端静态资源直链，需要用域名拼接，不能带网关前缀 prod-api
  const origin = config.baseUrl.replace(/^(https?:\/\/[^/]+).*$/, '$1')
  return attachment.split(',').filter(url => url).map(url => {
    if (url.startsWith('http')) return url
    return origin + url
  })
}

function previewAttachment(urls, index) {
  uni.previewImage({
    urls: urls,
    current: urls[index]
  })
}
	
</script>

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

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

// 活动特有 - 卡片头部布局
.item-header {
  gap: 12rpx;
  /* 允许 header 内容换行，避免长地点/长名字被省略号截断 */
  align-items: flex-start;

  .place-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;

    .place-text {
      color: #ffffff;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 1.3;
      /* 长地点名称最多2行后省略 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
    }
  }

  .duration-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .duration-value {
      color: #fa8c16;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 1.3;
      white-space: nowrap;
    }
  }

  .name-section {
    display: flex;
    align-items: flex-start;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    justify-content: flex-end;

    .name-value {
      color: #ffffff;
      font-size: 30rpx;
      font-weight: 700;
      line-height: 1.3;
      /* 长活动名最多2行后省略 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      text-align: right;
      letter-spacing: 0.5rpx;
    }
  }
}

// 活动特有 - 费用色
.info-value.cost-value {
  color: #fa8c16;
  font-weight: 600;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 4rpx;
  width: 100%;

  .attachment-thumb {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    background: #f5f7fa;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.95);
    }
  }
}

// ==================== 费用汇总面板 ====================
.summary-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
}

.summary-panel {
  width: 100%;
  max-height: 82vh;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.summary-header {
  padding: 24rpx 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #ebeef5;
}

.summary-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.summary-name {
  color: #2c3e50;
  font-size: 32rpx;
  font-weight: 700;
}

.summary-subtitle {
  color: #909399;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-close {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.summary-meta {
  padding: 18rpx 28rpx;
  background: #fafbfc;
  display: flex;
  gap: 20rpx;
}

.summary-meta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  min-width: 0;
}

.meta-label {
  color: #909399;
  font-size: 24rpx;
}

.meta-value {
  color: #2c3e50;
  font-size: 30rpx;
  font-weight: 700;

  &.amount {
    color: #f5576c;
  }
}

.summary-scroll {
  height: 58vh;
  padding: 16rpx 24rpx;
  box-sizing: border-box;
}

.summary-empty {
  color: #909399;
  font-size: 28rpx;
  text-align: center;
  padding: 120rpx 0;
}

.expense-item {
  display: flex;
  gap: 16rpx;
  padding: 18rpx;
  margin-bottom: 16rpx;
  border: 2rpx solid #ebeef5;
  border-radius: 14rpx;
  background: #ffffff;

  &.selected {
    border-color: rgba(102, 126, 234, 0.55);
    background: rgba(102, 126, 234, 0.06);
  }
}

.expense-checkbox {
  width: 34rpx;
  height: 34rpx;
  margin-top: 4rpx;
  border-radius: 50%;
  border: 3rpx solid #dcdfe6;
  flex-shrink: 0;

  &.active {
    border-color: #667eea;
    background: #667eea;
    box-shadow: inset 0 0 0 7rpx #ffffff;
  }
}

.expense-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.expense-main {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
  align-items: center;
}

.expense-category {
  color: #2c3e50;
  font-size: 28rpx;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-amount {
  color: #f5576c;
  font-size: 28rpx;
  font-weight: 700;
  flex-shrink: 0;
}

.expense-sub {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
  color: #909399;
  font-size: 24rpx;
}

.expense-remark {
  color: #606266;
  font-size: 24rpx;
  line-height: 1.5;
  word-break: break-all;
}

.summary-footer {
  padding: 18rpx 24rpx 28rpx;
  display: flex;
  gap: 16rpx;
  border-top: 1rpx solid #ebeef5;
}

.summary-cancel,
.summary-confirm {
  flex: 1;
  height: 78rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
}

.summary-cancel {
  color: #606266;
  background: #f5f7fa;
  border: 2rpx solid #dcdfe6;
}

.summary-confirm {
  color: #ffffff;
  background: #667eea;

  &.disabled {
    opacity: 0.5;
  }
}
</style>
