<template>
  <!-- Mobile 来源: ykt-management-mobile/src/pages/customer/customer-detail/service-info/service-info.vue -->
  <view class="wrap">
    <view class="filters">
      <picker mode="selector" :range="typeList" range-key="label" @change="pickType">
        <view class="filter-pill">
          <view class="pill-text" :class="{ muted: currentType.value === 'ALL' }">{{ currentType.value === 'ALL' ? '服务类型' : currentType.label }}</view>
          <uni-icons type="arrowdown" size="12" color="#666" />
        </view>
      </picker>

      <uni-datetime-picker v-model="dateRange" type="daterange" rangeSeparator="-" @change="changeDates">
        <view class="filter-pill wide">
          <view class="pill-text" :class="{ muted: !dateRange.length }">
            {{ dateRange.length ? dateRange.join('~') : '服务时间' }}
          </view>
          <view class="pill-icon" @click.stop="clearDates">
            <uni-icons v-if="dateRange.length" type="closeempty" size="14" color="#666" />
            <uni-icons v-else type="arrowdown" size="12" color="#666" />
          </view>
        </view>
      </uni-datetime-picker>

      <picker mode="selector" :range="teamList" range-key="label" @change="pickTeam">
        <view class="filter-pill">
          <view class="pill-text">{{ currentTeam.label }}</view>
          <uni-icons type="arrowdown" size="12" color="#666" />
        </view>
      </picker>
    </view>

    <view class="timeline">
      <view v-for="(i, idx) in list" :key="i._id" class="cell" @click="toggleExpand(i)">
        <view class="head">
          <view class="dot"></view>
          <view class="time">{{ i.timeStr }}</view>
          <view v-if="i.hasFile" class="file-link" @click.stop="viewFile(i)">
            {{ i.fileType === 'article' ? '查看文章' : '查看问卷' }}
          </view>
        </view>
        <view class="meta">
          <view class="tag">{{ i.typeStr }}</view>
          <view class="meta-text">{{ i.executorName }}</view>
          <view class="meta-text truncate">{{ i.executeTeamName }}</view>
        </view>
        <view class="body">
          <view class="content" :class="{ clamp: !expandMap[i._id] }">
            {{ i.taskContent || '暂无内容' }}<text v-if="i.result">（处理结果: {{ i.result }}）</text>
          </view>
          <image class="pen" src="/static/icons/icon-pen.svg" @click.stop="edit(i)" />
        </view>
        <view v-if="idx < list.length - 1" class="line"></view>
      </view>

      <view v-if="list.length === 0" class="empty">暂无数据</view>
      <uni-load-more
        v-if="list.length"
        :status="moreStatus"
        :contentText="loadMoreText"
        @clickLoadMore="getMore"
      />
    </view>

    <view class="fab" :style="{ bottom: `${floatingBottom}px` }" @click="add">
      <uni-icons type="plusempty" size="24" color="#fff" />
    </view>

    <uni-popup ref="filePopupRef" type="bottom" :mask-click="true">
      <view class="popup">
        <view class="popup-title">
          <view class="popup-title-text">{{ fileTitle }}</view>
          <view class="popup-close" @click="closeFilePopup">
            <uni-icons type="closeempty" size="18" color="#666" />
          </view>
        </view>
        <view class="popup-body2">
          <view class="desc">{{ fileDesc }}</view>
          <button class="btn primary" @click="copyFile">{{ fileAction }}</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import dayjs from 'dayjs';
import { ensureSeed, queryServiceRecords } from './mock';

const props = defineProps({
  data: { type: Object, default: () => ({}) },
  archiveId: { type: String, default: '' },
  reachBottomTime: { type: [String, Number], default: '' },
  floatingBottom: { type: Number, default: 16 },
});

const typeList = [
  { label: '全部', value: 'ALL' },
  { label: '电话回访', value: 'phone' },
  { label: '短信提醒', value: 'sms' },
  { label: '问卷', value: 'questionnaire' },
  { label: '文章', value: 'article' },
];
const teamList = [
  { label: '全部', value: 'ALL' },
  { label: '口腔一科（示例）', value: 'team_1' },
  { label: '正畸团队（示例）', value: 'team_2' },
];

const currentType = ref(typeList[0]);
const currentTeam = ref(teamList[0]);
const dateRange = ref([]);

const page = ref(1);
const pageSize = 10;
const pages = ref(1);
const loading = ref(false);
const list = ref([]);
const expandMap = ref({});

const moreStatus = computed(() => {
  if (loading.value) return 'loading';
  return page.value <= pages.value ? 'more' : 'no-more';
});
const loadMoreText = {
  contentdown: '点击加载更多',
  contentrefresh: '加载中...',
  contentnomore: '没有更多了',
};

function mapRow(i) {
  const hasFile = Boolean(i.pannedEventSendFile);
  const fileType = i.pannedEventSendFile?.type === 'article' ? 'article' : i.pannedEventSendFile?.type === 'questionnaire' ? 'questionnaire' : '';
  return {
    ...i,
    hasFile,
    fileType,
    timeStr: i.executionTime ? dayjs(i.executionTime).format('YYYY-MM-DD HH:mm') : '--',
    typeStr: typeList.find((t) => t.value === i.eventType)?.label || '',
  };
}

function reset() {
  page.value = 1;
  pages.value = 1;
  list.value = [];
  getMore();
}

function getMore() {
  if (!props.archiveId) return;
  if (loading.value) return;
  if (page.value > pages.value) return;

  loading.value = true;
  try {
    const { list: arr, pages: p } = queryServiceRecords({
      archiveId: props.archiveId,
      page: page.value,
      pageSize,
      eventType: currentType.value.value,
      teamId: currentTeam.value.value,
      dateRange: dateRange.value,
    });
    pages.value = p;
    const mapped = arr.map(mapRow);
    list.value = page.value === 1 ? mapped : [...list.value, ...mapped];
    page.value += 1;
  } finally {
    loading.value = false;
  }
}

function toggleExpand(r) {
  expandMap.value[r._id] = !expandMap.value[r._id];
}

function pickType(e) {
  currentType.value = typeList[e.detail.value] || typeList[0];
  reset();
}
function pickTeam(e) {
  currentTeam.value = teamList[e.detail.value] || teamList[0];
  reset();
}

function changeDates() {
  reset();
}
function clearDates() {
  if (!dateRange.value.length) return;
  dateRange.value = [];
  reset();
}

function add() {
  uni.navigateTo({ url: `/pages/case/service-record-detail?archiveId=${encodeURIComponent(props.archiveId)}&mode=add` });
}

function edit(record) {
  uni.navigateTo({ url: `/pages/case/service-record-detail?archiveId=${encodeURIComponent(props.archiveId)}&mode=edit&id=${encodeURIComponent(record._id)}` });
}

const filePopupRef = ref(null);
const fileTitle = ref('');
const fileDesc = ref('');
const fileAction = ref('');
const fileCopyText = ref('');

function viewFile(record) {
  if (!record.hasFile) return;
  if (record.fileType === 'article') {
    fileTitle.value = '查看文章';
    fileDesc.value = record.pannedEventSendFile?.url || '';
    fileAction.value = '复制链接';
    fileCopyText.value = record.pannedEventSendFile?.url || '';
  } else {
    fileTitle.value = '查看问卷';
    fileDesc.value = `问卷ID: ${record.pannedEventSendFile?.surveryId || '--'}`;
    fileAction.value = '复制问卷ID';
    fileCopyText.value = record.pannedEventSendFile?.surveryId || '';
  }
  filePopupRef.value?.open?.();
}
function closeFilePopup() {
  filePopupRef.value?.close?.();
}
function copyFile() {
  if (!fileCopyText.value) return;
  uni.setClipboardData({
    data: fileCopyText.value,
    success: () => uni.showToast({ title: '已复制', icon: 'success' }),
  });
  closeFilePopup();
}

onMounted(() => {
  ensureSeed(props.archiveId, props.data);
  reset();
  uni.$on('archive-detail:service-record-changed', reset);
});

onUnmounted(() => {
  uni.$off('archive-detail:service-record-changed', reset);
});

watch(
  () => props.reachBottomTime,
  () => getMore()
);
</script>

<style scoped>
.wrap {
  padding: 12px 0 96px;
}

.filters {
  padding: 10px 14px;
  background: #f5f6f8;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-pill {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 110px;
}
.filter-pill.wide {
  min-width: 160px;
}
.pill-text {
  font-size: 13px;
  color: #333;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill-text.muted {
  color: #999;
}
.pill-icon {
  padding-left: 8px;
}

.timeline {
  background: #fff;
  margin-top: 10px;
  padding: 12px 0 70px;
}
.cell {
  padding: 0 14px;
  position: relative;
}
.head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding-left: 18px;
}
.dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f6ef7;
}
.time {
  font-size: 14px;
  font-weight: 600;
  color: #1f1f1f;
}
.file-link {
  font-size: 13px;
  color: #4f6ef7;
}
.meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 18px;
  margin-bottom: 6px;
}
.tag {
  font-size: 12px;
  color: #4f6ef7;
  border: 1px solid #4f6ef7;
  border-radius: 999px;
  padding: 4px 8px;
}
.meta-text {
  font-size: 13px;
  color: #333;
}
.truncate {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 18px;
  padding-bottom: 12px;
}
.content {
  flex: 1;
  font-size: 13px;
  color: #666;
  line-height: 18px;
  margin-right: 10px;
}
.content.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.pen {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.line {
  position: absolute;
  left: 18px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: #4f6ef7;
  opacity: 0.6;
}
.empty {
  padding: 120px 0;
  text-align: center;
  color: #9aa0a6;
  font-size: 13px;
}

.fab {
  position: fixed;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: #4f6ef7;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 18px rgba(79, 110, 247, 0.35);
  z-index: 20;
}

.popup {
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.popup-title {
  position: relative;
  padding: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.popup-title-text {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.popup-close {
  position: absolute;
  right: 12px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.popup-body2 {
  padding: 14px;
}
.desc {
  font-size: 14px;
  color: #333;
  line-height: 20px;
  word-break: break-all;
  margin-bottom: 14px;
}
.btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  font-size: 15px;
}
.btn::after {
  border: none;
}
.btn.primary {
  background: #4f6ef7;
  color: #fff;
}
</style>
