<template>
  <business-page-layout :title="pageTitle" :show-back="true">
    <view v-if="loading" class="loading-wrap">加载中...</view>
    <view v-else-if="!info.id" class="loading-wrap">暂无数据</view>
    <view v-else class="detail-page">
      <scroll-view scroll-y class="detail-scroll">
        <view class="detail-wrap">
          <view v-for="section in sections" :key="section.title" class="section-block">
            <view class="section-title">{{ section.title }}</view>
            <template v-for="field in section.fields">
              <view
                v-if="shouldShowField(field)"
                :key="field.key"
                class="row"
                :class="{ multiline: field.multiline }"
              >
                <text class="k">{{ field.label }}</text>
                <view class="v">
                  <view v-if="field.type === 'image' && getImages(field).length" class="img-list">
                    <image
                      v-for="(url, idx) in getImages(field)"
                      :key="idx"
                      :src="url"
                      class="thumb"
                      mode="aspectFill"
                      @click="previewImages(getImages(field), idx)"
                    />
                  </view>
                  <view v-else-if="field.type === 'images' && getImages(field).length" class="img-list">
                    <image
                      v-for="(url, idx) in getImages(field)"
                      :key="idx"
                      :src="url"
                      class="thumb"
                      mode="aspectFill"
                      @click="previewImages(getImages(field), idx)"
                    />
                  </view>
                  <view v-else-if="field.type === 'files' && getFiles(field).length" class="file-list">
                    <text
                      v-for="(file, idx) in getFiles(field)"
                      :key="idx"
                      class="file-link"
                      @click="openFile(file.url)"
                    >{{ file.name }}</text>
                  </view>
                  <view v-else-if="field.type === 'promoter'" class="v-promoter">
                    <promoter-info-card :admin="promoterAdmin" />
                  </view>
                  <text v-else class="v-text">{{ fieldValue(field) }}</text>
                </view>
              </view>
            </template>
          </view>
          <view v-if="showLinkedDoctors" class="section-block linked-doctors-block">
            <view class="section-title">关联医生</view>
            <view v-if="!linkedDoctors.length" class="linked-empty">暂无关联医生预填</view>
            <view
              v-for="doc in linkedDoctors"
              :key="doc.id"
              class="doctor-card"
              @click="goDoctorDetail(doc.id)"
            >
              <image
                v-if="doc.avatar"
                :src="doc.avatar"
                class="doctor-avatar"
                mode="aspectFill"
              />
              <view v-else class="doctor-avatar doctor-avatar-placeholder">
                <text>{{ (doc.name || '?').charAt(0) }}</text>
              </view>
              <view class="doctor-card-body">
                <text class="doctor-name">{{ doc.name || '-' }}</text>
                <text class="doctor-meta">{{ doctorMetaText(doc) }}</text>
                <text class="doctor-status">{{ doctorStatusText(doc.status) }}</text>
              </view>
              <u-icon name="arrow-right" color="#c9cdd4" size="28" />
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="footer-actions">
        <u-button v-if="canEdit" class="action-btn" type="primary" :custom-style="primaryStyle" @click="goEdit">继续编辑</u-button>
        <u-button v-if="showDoctorEntry" class="action-btn" type="primary" :custom-style="primaryStyle" @click="goDoctorInput">录入医生</u-button>
        <u-button v-if="showBankCardReport" class="action-btn" type="primary" plain @click="goBankCardReport">
          {{ bankCardReportButtonText }}
        </u-button>
        <template v-if="canAudit">
          <u-button class="action-btn reject" @click="audit(2)">审核拒绝</u-button>
          <u-button class="action-btn" type="primary" :custom-style="primaryStyle" @click="audit(1)">审核通过</u-button>
        </template>
      </view>
    </view>
  </business-page-layout>
</template>

<script>
import BusinessPageLayout from '@/subPackages/sub_salesperson/components/business-page-layout.vue'
import PromoterInfoCard from '@/subPackages/sub_salesperson/components/PromoterInfoCard.vue'
import businessMixin from '@/subPackages/sub_salesperson/common/businessMixin.js'
import {
  getStoreDetailSections,
  getDoctorDetailSections,
  formatDetailFieldValue,
  getDetailImageUrls,
  getDetailFileLinks,
  getLinkedDoctorInputs,
  getPromoterAdmin,
  inputStatusText,
} from '@/subPackages/sub_salesperson/common/inputDetailFields.js'
import { goDoctorInputFromStore } from '@/subPackages/sub_salesperson/common/inputNavigation.js'

export default {
  mixins: [businessMixin],
  components: { BusinessPageLayout, PromoterInfoCard },
  props: {
    recordId: { type: Number, default: 0 },
    inputType: { type: String, default: 'store' },
    editPath: { type: String, default: '' },
    doctorFormPath: { type: String, default: '' },
    doctorDetailPath: {
      type: String,
      default: '/subPackages/sub_salesperson/doctor-input/detail',
    },
  },
  data() {
    return {
      info: {},
      loading: false,
      primaryStyle: {
        backgroundColor: '#6acdbb',
        color: '#ffffff',
        borderColor: '#6acdbb',
      },
    }
  },
  computed: {
    pageTitle() {
      return this.inputType === 'doctor' ? '医生预填详情' : '门店录入详情'
    },
    sections() {
      return this.inputType === 'doctor' ? getDoctorDetailSections() : getStoreDetailSections()
    },
    canEdit() {
      return !this.canAudit && Number(this.info.status) === 0 && !!this.editPath
    },
    canAudit() {
      if (Number(this.info.status) !== 0) return false
      if (this.inputType === 'doctor') return !!this.bizCap.canDoctorInputAudit
      return !!this.bizCap.canStoreInputAudit
    },
    showDoctorEntry() {
      return this.inputType === 'store' && !this.canAudit && !!this.info.id
    },
    showLinkedDoctors() {
      return this.inputType === 'store' && !!this.info.id
    },
    linkedDoctors() {
      return getLinkedDoctorInputs(this.info)
    },
    promoterAdmin() {
      return getPromoterAdmin(this.info)
    },
    showBankCardReport() {
      return this.inputType === 'store'
        && Number(this.info.status) === 1
        && Number(this.info.synced_store_id) > 0
    },
    bankCardReportButtonText() {
      const text = this.info.bank_card_report_status_text
      if (text && text !== '未报备') return `银行卡报备（${text}）`
      return '银行卡报备'
    },
  },
  watch: {
    recordId: {
      immediate: true,
      handler(id) {
        if (Number(id) > 0) this.load()
        else {
          this.info = {}
          this.loading = false
        }
      },
    },
  },
  methods: {
    detailApi() {
      return this.inputType === 'doctor'
        ? this.bizApi.getDoctorInputDetail(this.recordId)
        : this.bizApi.getStoreInputDetail(this.recordId)
    },
    auditApi(data) {
      return this.inputType === 'doctor'
        ? this.bizApi.auditDoctorInput(data)
        : this.bizApi.auditStoreInput(data)
    },
    load() {
      if (!this.recordId) return
      this.loading = true
      this.info = {}
      this.detailApi()
        .then((w) => {
          if (w.ok) this.info = w.data || {}
          else uni.showToast({ title: (w.res && w.res.msg) || '加载失败', icon: 'none' })
        })
        .catch(() => {
          uni.showToast({ title: '加载失败', icon: 'none' })
        })
        .finally(() => {
          this.loading = false
        })
    },
    shouldShowField(field) {
      if (field.show && !field.show(this.info)) return false
      if (field.type === 'promoter') {
        return !!getPromoterAdmin(this.info)
      }
      if (field.type === 'image' || field.type === 'images') {
        return getDetailImageUrls(field, this.info).length > 0
      }
      if (field.type === 'files') {
        return getDetailFileLinks(field, this.info).length > 0
      }
      const val = formatDetailFieldValue(field, this.info)
      return val != null && val !== ''
    },
    fieldValue(field) {
      return formatDetailFieldValue(field, this.info) ?? '-'
    },
    getImages(field) {
      return getDetailImageUrls(field, this.info)
    },
    getFiles(field) {
      return getDetailFileLinks(field, this.info)
    },
    previewImages(urls, index) {
      uni.previewImage({ urls, current: urls[index] })
    },
    openFile(url) {
      if (!url) return
      uni.setClipboardData({
        data: url,
        success: () => uni.showToast({ title: '链接已复制', icon: 'none' }),
      })
    },
    goEdit() {
      if (this.editPath) uni.navigateTo({ url: `${this.editPath}?id=${this.recordId}` })
    },
    goDoctorInput() {
      goDoctorInputFromStore(this.info.id, this.bizCtx)
    },
    goBankCardReport() {
      const storeId = Number(this.info.synced_store_id || 0)
      if (!storeId) return
      uni.navigateTo({
        url: `/subPackages/sub_salesperson/store-bank-card/report?store_id=${storeId}&store_input_id=${this.info.id}`,
      })
    },
    goDoctorDetail(doctorId) {
      if (!doctorId || !this.doctorDetailPath) return
      uni.navigateTo({ url: `${this.doctorDetailPath}?id=${doctorId}` })
    },
    doctorMetaText(doc) {
      const depart = doc.depart?.name || ''
      const title = doc.titleInfo?.name || doc.title_info?.name || ''
      return [depart, title].filter(Boolean).join(' · ') || '-'
    },
    doctorStatusText(status) {
      return inputStatusText(status)
    },
    audit(status) {
      this.auditApi({ id: this.recordId, status, audit_remark: '' })
        .then((w) => {
          if (w.ok) {
            uni.showToast({ title: '操作成功' })
            setTimeout(() => uni.navigateBack(), 500)
          } else {
            uni.showToast({ title: w.msg || '操作失败', icon: 'none' })
          }
        })
        .catch(() => uni.showToast({ title: '操作失败', icon: 'none' }))
    },
  },
}
</script>

<style scoped>
.loading-wrap { text-align: center; color: #86909c; padding: 120rpx 0; font-size: 28rpx; }
.detail-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200rpx);
  min-height: 400rpx;
}
.detail-scroll {
  flex: 1;
  height: 0;
  box-sizing: border-box;
}
.detail-wrap { padding: 24rpx; padding-bottom: 32rpx; }
.section-block {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 0 28rpx 8rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1d2129;
  padding: 28rpx 0 16rpx;
  border-bottom: 1rpx solid #f2f3f5;
}
.row {
  display: flex;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f2f3f5;
  align-items: flex-start;
}
.row:last-child { border-bottom: none; }
.row.multiline .v { line-height: 1.6; }
.k { width: 200rpx; color: #86909c; font-size: 28rpx; flex-shrink: 0; }
.v { flex: 1; min-width: 0; }
.v-text { font-size: 28rpx; color: #1d2129; word-break: break-all; }
.img-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
.thumb { width: 160rpx; height: 160rpx; border-radius: 12rpx; }
.file-list { display: flex; flex-direction: column; gap: 12rpx; }
.file-link { font-size: 28rpx; color: #6acdbb; word-break: break-all; }
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 24rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background: #f5f7f8;
  flex-shrink: 0;
}
.action-btn { flex: 1; min-width: 200rpx; }
.action-btn.reject { color: #f53f3f; border-color: #f53f3f; }
.linked-empty {
  padding: 32rpx 0 40rpx;
  font-size: 28rpx;
  color: #86909c;
  text-align: center;
}
.doctor-card {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f2f3f5;
}
.doctor-card:last-child { border-bottom: none; }
.doctor-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 20rpx;
  background: #f2f3f5;
}
.doctor-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #86909c;
}
.doctor-card-body { flex: 1; min-width: 0; }
.doctor-name {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 8rpx;
}
.doctor-meta {
  display: block;
  font-size: 26rpx;
  color: #86909c;
  margin-bottom: 6rpx;
}
.doctor-status { font-size: 24rpx; color: #6acdbb; }
</style>
