YY_MP_REFACTOR/src/pages-task/task-visit/components/visit-template/index.vue

<template>
  <wd-popup
    v-model="visible"
    position="bottom"
    root-portal
    lock-scroll
    :close-on-click-modal="false"
    custom-style="border-radius: 32rpx 32rpx 0 0; overflow: hidden;"
    @close="resetTemplate"
  >
    <view class="visit-template">
      <view class="visit-template__header">
        <view class="visit-template__heading">
          <view class="visit-template__title">拜访明细</view>
          <view class="visit-template__subtitle">{{ target?.name }}</view>
        </view>
        <view class="visit-template__close" @click="visible = false">
          <wd-icon name="close" size="32rpx" color="#8b98a8" />
        </view>
      </view>

      <view v-if="loading" class="visit-template__loading">
        <wd-loading color="#2f8cf7" />
        <text class="visit-template__loading-text">正在加载拜访模板</text>
      </view>

      <scroll-view v-else class="visit-template__scroll" scroll-y>
        <view class="visit-template__content">
          <wd-cell :title="targetNameLabel" :value="target?.name" />
          <wd-cell title="拜访时间" :value="signDate" />

          <TemplateContent
            v-if="templateRouteKey"
            ref="templateFormRef"
            :route-key="templateRouteKey"
            :drug-options="drugOptions"
            :purpose-options="purposeOptions"
            :result-options="resultOptions"
            :visitor-options="visitorOptions"
            :scene-photo-min-count="scenePhotoMinCount"
          />
          <view v-else class="visit-template__unsupported">暂不支持当前拜访模板</view>
        </view>
      </scroll-view>

      <view class="visit-template__actions">
        <view
          class="visit-template__button visit-template__button--cancel"
          @click="visible = false"
        >
          取消
        </view>
        <view
          class="visit-template__button visit-template__button--confirm"
          :class="{ 'visit-template__button--disabled': submitting || loading }"
          @click="handleConfirm"
        >
          {{ submitting ? '确定中' : '确定' }}
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

import { getDictTypeApi } from '@/services/modules/common'
import type { DictItem } from '@/services/modules/common/type'
import type { SharePackageItem } from '@/services/modules/information/type'
import { getListDrugTableApi } from '@/services/modules/task/taskFrom'
import { getTemplateApi } from '@/services/modules/task/taskVisit'
import type { VisitSignDetail, VisitTemplateType } from '@/services/modules/task/taskVisit/type'

import type { VisitTarget, VisitTargetType } from '../../types'
import TemplateContent from './TemplateContent.vue'
import type { PickerOption, TemplateRouteKey, VisitTemplateFormExpose } from './types'

const props = withDefaults(
  defineProps<{
    target?: VisitTarget
    packageItem?: SharePackageItem
    deptId: string
    taskTypeId: string
    hasTaskTypeTemplate: boolean
    signDate: string
    submitting?: boolean
  }>(),
  {
    target: undefined,
    packageItem: undefined,
    submitting: false,
  }
)

const emit = defineEmits<{
  (event: 'confirm', detail: VisitSignDetail): void
}>()

const visible = defineModel<boolean>('visible', { default: false })

const supportedTemplateRoutes: TemplateRouteKey[] = [
  'hospital:default',
  'hospital:TEMPLATE1',
  'hospital:TEMPLATE2',
  'company:TEMPLATE1',
  'company:TEMPLATE2',
  'pharmacy:TEMPLATE1',
  'pharmacy:TEMPLATE2',
  'pharmacy:TEMPLATE3',
]

const purposeDictTypeMap: Record<VisitTargetType, string> = {
  hospital: 'user_sign_detail_purpose',
  company: 'user_sign_detail_distribution_purpose',
  pharmacy: 'user_sign_detail_pharmacy_purpose',
}

const targetNameMap: Record<VisitTargetType, string> = {
  hospital: '医院名称',
  company: '商业公司名称',
  pharmacy: '药店名称',
}

const loading = ref(false)
const templateType = ref<VisitTemplateType>('')
const scenePhotoMinCount = ref(1)
const drugOptions = ref<PickerOption[]>([])
const purposeOptions = ref<PickerOption[]>([])
const resultOptions = ref<PickerOption[]>([])
const visitorOptions = ref<PickerOption[]>([])
const templateFormRef = ref<VisitTemplateFormExpose>()

const targetNameLabel = computed(() => {
  return props.target ? targetNameMap[props.target.type] : '拜访对象'
})

const templateRouteKey = computed<TemplateRouteKey | ''>(() => {
  const targetType = props.target?.type
  if (!targetType) return ''
  if (targetType === 'hospital' && !templateType.value) return 'hospital:default'

  const routeKey = `${targetType}:${templateType.value}` as TemplateRouteKey
  return supportedTemplateRoutes.includes(routeKey) ? routeKey : ''
})

watch(visible, (isVisible) => {
  if (isVisible) void loadTemplate()
})

const loadTemplate = async () => {
  if (
    !props.target ||
    !props.packageItem ||
    !props.taskTypeId ||
    (props.hasTaskTypeTemplate && !props.deptId)
  ) {
    visible.value = false
    return
  }

  resetTemplateState()
  if (!props.hasTaskTypeTemplate) return

  loading.value = true

  try {
    const templateRes = await getTemplateApi({
      deptId: props.deptId,
      taskTypeId: props.taskTypeId,
    })

    if (!visible.value) return

    templateType.value = templateRes.data?.template || ''
    scenePhotoMinCount.value = Math.max(Number(templateRes.data?.detail?.numberLimit) || 1, 1)

    if (templateRouteKey.value === 'hospital:default') return

    const purposeDictType =
      templateRouteKey.value === 'hospital:TEMPLATE2'
        ? 'user_sign_detail_template2_purpose'
        : purposeDictTypeMap[props.target.type]

    const [drugRes, purposeRes, resultRes, visitorRes] = await Promise.all([
      getListDrugTableApi(String(props.packageItem.value)),
      getDictTypeApi(purposeDictType),
      getDictTypeApi('user_sign_detail_result'),
      needsVisitorOptions(templateRouteKey.value)
        ? getDictTypeApi('user_sign_detail_pharmacy_person')
        : Promise.resolve(null),
    ])

    if (!visible.value) return

    drugOptions.value = (Array.isArray(drugRes.data) ? drugRes.data : []).map((item) => ({
      label: String(item),
      value: String(item),
    }))
    purposeOptions.value = toDictOptions(purposeRes.data)
    resultOptions.value = toDictOptions(resultRes.data)
    visitorOptions.value = toDictOptions(visitorRes?.data)
  } catch {
    visible.value = false
  } finally {
    loading.value = false
  }
}

const needsVisitorOptions = (routeKey: TemplateRouteKey | '') => {
  return routeKey === 'pharmacy:TEMPLATE2' || routeKey === 'pharmacy:TEMPLATE3'
}

const toDictOptions = (list: DictItem[] | null | undefined): PickerOption[] => {
  return (Array.isArray(list) ? list : []).map((item) => ({
    label: item.label,
    value: item.value,
  }))
}

const handleConfirm = () => {
  if (props.submitting || loading.value) return

  const detail = templateFormRef.value?.submit()
  if (detail) emit('confirm', detail)
}

const resetTemplate = () => {
  resetTemplateState()
  loading.value = false
}

const resetTemplateState = () => {
  templateType.value = ''
  scenePhotoMinCount.value = 1
  drugOptions.value = []
  purposeOptions.value = []
  resultOptions.value = []
  visitorOptions.value = []
  templateFormRef.value = undefined
}
</script>

<style lang="scss" scoped>
.visit-template {
  display: flex;
  flex-direction: column;
  height: 94vh;
  max-height: 94vh;
  background: #f5f7fa;
}

.visit-template__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 30rpx;
  background: #ffffff;
  border-bottom: 2rpx solid #edf1f5;
}

.visit-template__heading {
  min-width: 0;
}

.visit-template__title {
  color: #172033;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 44rpx;
}

.visit-template__subtitle {
  max-width: 560rpx;
  margin-top: 4rpx;
  overflow: hidden;
  color: #8491a2;
  font-size: 22rpx;
  line-height: 32rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visit-template__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  background: #f4f7fa;
  border-radius: 50%;
}

.visit-template__loading {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.visit-template__loading-text {
  margin-left: 16rpx;
  color: #8491a2;
  font-size: 26rpx;
}

.visit-template__scroll {
  flex: 1;
  min-height: 0;
}

.visit-template__content {
  padding: 18rpx 0 28rpx;
}

.visit-template__unsupported {
  padding: 120rpx 30rpx;
  color: #8491a2;
  font-size: 26rpx;
  text-align: center;
}

.visit-template__actions {
  display: flex;
  flex-shrink: 0;
  gap: 18rpx;
  padding: 20rpx 28rpx calc(20rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  box-shadow: 0 -8rpx 24rpx rgba(31, 51, 73, 0.08);
  box-sizing: border-box;
}

.visit-template__button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  border-radius: 18rpx;
  font-size: 28rpx;
  font-weight: 600;
  box-sizing: border-box;
}

.visit-template__button--cancel {
  color: #53657a;
  background: #eef2f6;
}

.visit-template__button--confirm {
  color: #ffffff;
  background: linear-gradient(135deg, #50b5ff 0%, #2f8cf7 100%);
  box-shadow: 0 10rpx 22rpx rgba(47, 140, 247, 0.22);
}

.visit-template__button--disabled {
  opacity: 0.55;
  pointer-events: none;
}
</style>