<template>
  <clinic-page-layout title="对账单" :show-back="true">
    <view class="reconciliation-container">
      <!-- 顶部吸顶区：Tabs 与 时间快筛 -->
      <page-sticky-header>
        <view class="header-section">
          <view class="tabs-wrap">
            <u-tabs
                :list="tabList"
                :is-scroll="false"
                :current="tabIndex"
                active-color="#6ACDBB"
                inactive-color="#86909C"
                bg-color="transparent"
                :bold="true"
                @change="onTabChange"
            />
          </view>

          <view class="quick-filter">
            <view class="date-range-picker">
              <picker mode="date" :value="dateStart" @change="onStart">
                <text class="date-text" :class="{'placeholder': !dateStart}">{{ dateStart || '开始日期' }}</text>
              </picker>
              <text class="sep">至</text>
              <picker mode="date" :value="dateEnd" @change="onEnd">
                <text class="date-text" :class="{'placeholder': !dateEnd}">{{ dateEnd || '结束日期' }}</text>
              </picker>
            </view>
            <view class="filter-actions">
              <text class="btn-clear" @click="resetFilter">清空</text>
              <text class="btn-search" @click="reload">查询</text>
            </view>
          </view>
        </view>

        <!-- 药品折叠筛选面板 (保持逻辑不变，美化表单) -->
        <collapsible-filter-panel v-if="tab === 'drug'" title="药品高级筛选" @clear="resetFilter">
          <view class="filter-row switch-row">
            <view class="filter-label-group">
              <text class="filter-label">按订单维度拆分</text>
              <text class="filter-hint">未勾选时按药品+供货价合并</text>
            </view>
            <switch :checked="byOrder" color="#6acdbb" style="transform:scale(0.85)" @change="onByOrderChange" />
          </view>

          <view class="filter-field">
            <text class="filter-label">药品</text>
            <view class="search-input-group">
              <input
                  class="filter-input"
                  v-model="drugSearchQ"
                  placeholder="输入名称或拼音搜索"
                  placeholder-style="color:#BDBDBD"
                  confirm-type="search"
                  @confirm="searchDrugOptions"
              />
              <text class="filter-link" @click="searchDrugOptions">搜索</text>
            </view>
          </view>
          <view class="picker-wrap" v-if="drugOptionLabels.length">
            <picker :range="drugOptionLabels" @change="onDrugPick">
              <view class="filter-picker">{{ selectedDrugLabel || '点击选择匹配的药品' }}</view>
            </picker>
            <text v-if="drugId" class="filter-clear" @click="clearDrug">清除选择</text>
          </view>

          <view class="filter-field">
            <text class="filter-label">订单</text>
            <view class="search-input-group">
              <input
                  class="filter-input"
                  v-model="orderSearchQ"
                  placeholder="输入订单号搜索"
                  placeholder-style="color:#BDBDBD"
                  confirm-type="search"
                  @confirm="searchOrderOptions"
              />
              <text class="filter-link" @click="searchOrderOptions">搜索</text>
            </view>
          </view>
          <view class="picker-wrap" v-if="orderOptionLabels.length">
            <picker :range="orderOptionLabels" @change="onOrderPick">
              <view class="filter-picker">{{ selectedOrderLabel || '点击选择匹配的订单' }}</view>
            </picker>
            <text v-if="orderId" class="filter-clear" @click="clearOrder">清除选择</text>
          </view>

          <view class="filter-query-btn" @click="reload">确认筛选</view>
        </collapsible-filter-panel>
      </page-sticky-header>

      <!-- 统计卡片区：取消横向滑动，改为直观的网格平铺 -->
      <view v-if="statItems.length" class="stats-grid-wrap">
        <view class="stats-grid">
          <view v-for="s in statItems" :key="s.key" class="stat-card">
            <text class="stat-label">{{ s.label }}</text>
            <text class="stat-value">{{ s.value }}</text>
          </view>
        </view>
      </view>

      <!-- 数据列表区 -->
      <view class="list-wrap">
        <view v-for="item in list" :key="item._wxKey" class="premium-card">

          <!-- ================= 诊所对账模式 ================= -->
          <template v-if="tab === 'store'">
            <view class="card-head">
              <text class="card-title">{{ rowStore(item).name }}</text>
              <text v-if="rowStore(item).registrationPrice !== '¥0.00'" class="mini-tag">挂号费 {{ rowStore(item).registrationPrice }}</text>
            </view>

            <!-- 核心摘要 -->
            <view class="hero-data">
              <view class="data-box">
                <text class="data-label">总销售额</text>
                <text class="data-val text-primary">{{ rowStore(item).totalSales }}</text>
              </view>
              <view class="data-divider"></view>
              <view class="data-box">
                <text class="data-label">总供货额</text>
                <text class="data-val">{{ rowStore(item).totalSupply }}</text>
              </view>
            </view>

            <!-- 2x2 仪表盘网格：完美重构四大类费用 -->
            <view class="dashboard-grid">
              <!-- 草药 -->
              <view class="dashboard-island">
                <view class="island-head">
                  <text class="island-title">🌿 草药</text>
                  <text class="island-sales">销量 {{ rowStore(item).herbal.sales }}</text>
                </view>
                <view class="island-line"><text>销售</text><text>{{ rowStore(item).herbal.salesPrice }}</text></view>
                <view class="island-line"><text>供货</text><text>{{ rowStore(item).herbal.supplyPrice }}</text></view>
              </view>
              <!-- 西药 -->
              <view class="dashboard-island">
                <view class="island-head">
                  <text class="island-title">💊 西药</text>
                  <text class="island-sales">销量 {{ rowStore(item).medicine.sales }}</text>
                </view>
                <view class="island-line"><text>销售</text><text>{{ rowStore(item).medicine.salesPrice }}</text></view>
                <view class="island-line"><text>供货</text><text>{{ rowStore(item).medicine.supplyPrice }}</text></view>
              </view>
              <!-- 服务包 -->
              <view class="dashboard-island">
                <view class="island-head">
                  <text class="island-title">📦 服务包</text>
                  <text class="island-sales">销量 {{ rowStore(item).servicePackage.sales }}</text>
                </view>
                <view class="island-line"><text>销售</text><text>{{ rowStore(item).servicePackage.salesPrice }}</text></view>
                <view class="island-line"><text>供货</text><text>{{ rowStore(item).servicePackage.supplyPrice }}</text></view>
              </view>
              <!-- 其他费用 -->
              <view class="dashboard-island">
                <view class="island-head">
                  <text class="island-title">🔖 其他费用</text>
                </view>
                <view class="island-line"><text>诊疗费</text><text>{{ rowStore(item).otherFees.treatment }}</text></view>
                <view class="island-line"><text>加工费</text><text>{{ rowStore(item).otherFees.process }}</text></view>
                <view class="island-line"><text>快递费</text><text>{{ rowStore(item).otherFees.express }}</text></view>
              </view>
            </view>
          </template>

          <!-- ================= 药品对账模式 ================= -->
          <template v-else>
            <view class="card-head">
              <text class="card-title">{{ rowDrug(item).drugName }}</text>
              <view class="drug-meta" v-if="rowDrug(item).drugNumber">
                <text class="mini-tag">编号 {{ rowDrug(item).drugNumber }}</text>
                <text class="mini-tag gray">{{ rowDrug(item).typeText }}</text>
              </view>
            </view>

            <view class="info-island">
              <view class="island-row">
                <text class="island-label">销量</text>
                <text class="island-value text-primary font-bold">{{ rowDrug(item).number }}</text>
              </view>
              <view class="island-row">
                <text class="island-label">供货单价</text>
                <text class="island-value">{{ rowDrug(item).marketPrice }}</text>
              </view>
              <view class="island-row">
                <text class="island-label">总销售额</text>
                <text class="island-value">{{ rowDrug(item).totalSales }}</text>
              </view>
              <view class="island-row">
                <text class="island-label">总供货额</text>
                <text class="island-value">{{ rowDrug(item).totalSupply }}</text>
              </view>
              <view class="island-row" v-if="rowDrug(item).orderNo">
                <text class="island-label">订单号</text>
                <text class="island-value font-mono">{{ rowDrug(item).orderNo }}</text>
              </view>
            </view>
          </template>

        </view>
      </view>

      <view v-if="!loading && !list.length" class="empty-state">
        <text>暂无对账数据</text>
      </view>
    </view>
  </clinic-page-layout>
</template>

<script>
import ClinicPageLayout from '@/subPackages/sub_clinic_admin/components/clinic-page-layout.vue'
import PageStickyHeader from '@/subPackages/sub_clinic_admin/components/PageStickyHeader.vue'
import CollapsibleFilterPanel from '@/subPackages/sub_clinic_admin/components/CollapsibleFilterPanel.vue'
import {
  getReconciliationList,
  getReconciliationDrugList,
  getReconciliationDrugOptions,
  getReconciliationOrderOptions,
} from '@/api/clinicAdmin.js'
import { withWxKey } from '@/utils/wxListKey.js'
import {
  mapReconciliationStoreRow,
  mapReconciliationDrugRow,
  mapReconciliationStoreCount,
  mapReconciliationDrugCount,
} from '@/subPackages/sub_clinic_admin/common/display.js'
import {
  buildStoreListParams,
  buildDrugListParams,
  buildSearchTimeQueryParams,
  normalizeReconciliationResponse,
} from '@/subPackages/sub_clinic_admin/common/reconciliationParams.js'
import {
  loadReconciliationFilter,
  saveReconciliationFilter,
  clearReconciliationFilter,
  defaultReconciliationFilter,
} from '@/subPackages/sub_clinic_admin/common/filterCache.js'

export default {
  components: { ClinicPageLayout, PageStickyHeader, CollapsibleFilterPanel },
  data() {
    return {
      tab: 'store',
      tabIndex: 0,
      tabList: [{ name: '诊所对账' }, { name: '药品对账' }],
      dateStart: '',
      dateEnd: '',
      list: [],
      loading: false,
      statItems: [],
      byOrder: false,
      drugSearchQ: '',
      orderSearchQ: '',
      drugOptions: [],
      orderOptions: [],
      drugId: null,
      orderId: null,
      selectedDrugLabel: '',
      selectedOrderLabel: '',
    }
  },
  computed: {
    drugOptionLabels() {
      return this.drugOptions.map(o => o.label)
    },
    orderOptionLabels() {
      return this.orderOptions.map(o => o.label)
    },
  },
  onLoad() {
    this.applyReconciliationFilter(loadReconciliationFilter())
    this.reload()
  },
  methods: {
    applyReconciliationFilter(f) {
      this.tabIndex = f.tabIndex
      this.tab = f.tabIndex === 1 ? 'drug' : 'store'
      this.dateStart = f.dateStart
      this.dateEnd = f.dateEnd
      this.byOrder = f.byOrder
      this.drugSearchQ = f.drugSearchQ
      this.orderSearchQ = f.orderSearchQ
      this.drugId = f.drugId
      this.orderId = f.orderId
      this.selectedDrugLabel = f.selectedDrugLabel
      this.selectedOrderLabel = f.selectedOrderLabel
      this.drugOptions = []
      this.orderOptions = []
    },
    persistReconciliationFilter() {
      saveReconciliationFilter({
        tabIndex: this.tabIndex,
        dateStart: this.dateStart,
        dateEnd: this.dateEnd,
        byOrder: this.byOrder,
        drugSearchQ: this.drugSearchQ,
        orderSearchQ: this.orderSearchQ,
        drugId: this.drugId,
        orderId: this.orderId,
        selectedDrugLabel: this.selectedDrugLabel,
        selectedOrderLabel: this.selectedOrderLabel,
      })
    },
    resetFilter() {
      this.applyReconciliationFilter(defaultReconciliationFilter())
      clearReconciliationFilter()
      this.reload()
    },
    rowStore(item) {
      return mapReconciliationStoreRow(item)
    },
    rowDrug(item) {
      return mapReconciliationDrugRow(item)
    },
    onTabChange(index) {
      this.tabIndex = index
      this.tab = index === 0 ? 'store' : 'drug'
      this.reload()
    },
    reload() {
      this.persistReconciliationFilter()
      this.load()
    },
    load() {
      this.loading = true
      const isDrug = this.tab === 'drug'
      const api = isDrug ? getReconciliationDrugList : getReconciliationList
      const params = isDrug
          ? buildDrugListParams({
            dateStart: this.dateStart,
            dateEnd: this.dateEnd,
            drugId: this.drugId,
            orderId: this.orderId,
            byOrder: this.byOrder,
          })
          : buildStoreListParams({
            dateStart: this.dateStart,
            dateEnd: this.dateEnd,
            excludeZeroSales: 0,
          })
      api(params).then(w => {
        const { count, items } = normalizeReconciliationResponse(w.data)
        this.statItems = isDrug
            ? mapReconciliationDrugCount(count)
            : mapReconciliationStoreCount(count)
        const keyField = isDrug ? 'drug_id' : 'id'
        this.list = withWxKey(items, keyField, 'rec')
      }).finally(() => { this.loading = false })
    },
    onStart(e) { this.dateStart = e.detail.value },
    onEnd(e) { this.dateEnd = e.detail.value },
    onByOrderChange(e) {
      this.byOrder = !!e.detail.value
    },
    timeParams() {
      return buildSearchTimeQueryParams(this.dateStart, this.dateEnd)
    },
    searchDrugOptions() {
      if (!this.dateStart || !this.dateEnd) {
        uni.showToast({ title: '请选择时间范围', icon: 'none' })
        return
      }
      getReconciliationDrugOptions({
        q: this.drugSearchQ,
        limit: 20,
        ...this.timeParams(),
      }).then(w => {
        const items = (w.data && w.data.items) || []
        this.drugOptions = items
        if (!items.length) uni.showToast({ title: '无匹配药品', icon: 'none' })
      })
    },
    searchOrderOptions() {
      if (!this.dateStart || !this.dateEnd) {
        uni.showToast({ title: '请选择时间范围', icon: 'none' })
        return
      }
      getReconciliationOrderOptions({
        q: this.orderSearchQ,
        limit: 20,
        ...this.timeParams(),
      }).then(w => {
        const items = (w.data && w.data.items) || []
        this.orderOptions = items
        if (!items.length) uni.showToast({ title: '无匹配订单', icon: 'none' })
      })
    },
    onDrugPick(e) {
      const idx = Number(e.detail.value)
      const opt = this.drugOptions[idx]
      if (opt) {
        this.drugId = opt.value
        this.selectedDrugLabel = opt.label
      }
    },
    onOrderPick(e) {
      const idx = Number(e.detail.value)
      const opt = this.orderOptions[idx]
      if (opt) {
        this.orderId = opt.value
        this.selectedOrderLabel = opt.label
      }
    },
    clearDrug() {
      this.drugId = null
      this.selectedDrugLabel = ''
      this.drugOptions = []
    },
    clearOrder() {
      this.orderId = null
      this.selectedOrderLabel = ''
      this.orderOptions = []
    },
  },
}
</script>

<style lang="scss" scoped>
$theme-primary: #6acdbb;
$color-bg-base: #F5F7F8;
$color-text-main: #1D2129;
$color-text-body: #4E5969;
$color-text-muted: #86909C;
$color-border: #E5E6EB;

.reconciliation-container {
  background-color: $color-bg-base;
  min-height: 100vh;
  padding-bottom: 60rpx;
}

/* 顶部吸顶区 */
.header-section {
  background: #ffffff;
  padding-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
}

.tabs-wrap {
  border-bottom: 1rpx solid $color-border;
}

.quick-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx 0;
}

.date-range-picker {
  display: flex;
  align-items: center;
  background: #F7F8FA;
  border-radius: 12rpx;
  padding: 12rpx 24rpx;
  flex: 1;
  margin-right: 24rpx;
}

.date-text {
  font-size: 26rpx;
  color: $color-text-main;
  font-weight: 500;

  &.placeholder {
    color: #BDBDBD;
    font-weight: 400;
  }
}

.sep {
  color: $color-text-muted;
  font-size: 24rpx;
  margin: 0 16rpx;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex-shrink: 0;
}

.btn-clear {
  font-size: 26rpx;
  color: $color-text-muted;
}

.btn-search {
  font-size: 26rpx;
  color: #fff;
  background: $theme-primary;
  padding: 10rpx 24rpx;
  border-radius: 30rpx;
  font-weight: 500;
}

/* 药品筛选展开面板优化 */
.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.filter-label-group {
  display: flex;
  flex-direction: column;
}

.filter-label {
  font-size: 28rpx;
  color: $color-text-main;
  font-weight: 500;
  margin-bottom: 4rpx;
}

.filter-hint {
  font-size: 22rpx;
  color: $color-text-muted;
}

.filter-field {
  margin-bottom: 16rpx;
}

.search-input-group {
  display: flex;
  align-items: center;
  background: #F7F8FA;
  border-radius: 12rpx;
  padding: 8rpx 8rpx 8rpx 24rpx;
  margin-top: 12rpx;
}

.filter-input {
  flex: 1;
  font-size: 26rpx;
  color: $color-text-main;
  height: 60rpx;
}

.filter-link {
  font-size: 26rpx;
  color: $theme-primary;
  padding: 12rpx 24rpx;
  font-weight: 500;
}

.picker-wrap {
  margin-bottom: 24rpx;
}

.filter-picker {
  font-size: 26rpx;
  color: $color-text-main;
  padding: 20rpx 24rpx;
  background: #F7F8FA;
  border-radius: 12rpx;
  margin-bottom: 12rpx;
}

.filter-clear {
  font-size: 24rpx;
  color: #F53F3F;
  display: block;
  text-align: right;
}

.filter-query-btn {
  text-align: center;
  padding: 24rpx;
  background: $theme-primary;
  color: #fff;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
  margin-top: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(106, 205, 187, 0.2);
}

/* ================= 统计卡片平铺网格区 ================= */
.stats-grid-wrap {
  padding: 24rpx 24rpx 8rpx; /* 控制和卡片之间的呼吸感 */
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 取消了scroll-x滚动，改成直接平铺两列 */
  gap: 20rpx;
}
.stat-card {
  background: #fff;
  padding: 32rpx 24rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-label {
  font-size: 24rpx;
  color: $color-text-muted;
}
.stat-value {
  font-size: 36rpx;
  color: $color-text-main;
  font-weight: 700;
  margin-top: 12rpx;
  font-family: DIN Alternate, monospace, sans-serif;
  /* 添加截断处理防止极端数字导致错位 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= 核心高级卡片 ================= */
.list-wrap {
  padding: 0 24rpx;
}

.premium-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #E5E6EB;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.015);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 32rpx;
  color: $color-text-main;
  font-weight: 600;
  flex: 1;
  line-height: 1.4;
  margin-right: 16rpx;
}

.mini-tag {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  background: rgba(106, 205, 187, 0.1);
  color: $theme-primary;
  border-radius: 8rpx;
  font-weight: 500;
  white-space: nowrap;

  &.gray {
    background: #F2F3F5;
    color: $color-text-body;
    margin-left: 12rpx;
  }
}

/* 诊所对账：核心摘要 */
.hero-data {
  display: flex;
  align-items: center;
  background: #F8FBFB;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;
  margin-bottom: 24rpx;
}

.data-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.data-divider {
  width: 2rpx;
  height: 60rpx;
  background: #EAEFEF;
  margin: 0 32rpx;
}

.data-label {
  font-size: 24rpx;
  color: $color-text-muted;
  margin-bottom: 8rpx;
}

.data-val {
  font-size: 32rpx;
  font-weight: 700;
  color: $color-text-main;
  font-family: DIN Alternate, monospace, sans-serif;

  &.text-primary {
    color: $theme-primary;
  }
}

/* 诊所对账：2x2 仪表盘网格 */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.dashboard-island {
  background: #F7F8FA;
  border-radius: 16rpx;
  padding: 20rpx;
}

.island-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx dashed #E5E6EB;
}

.island-title {
  font-size: 26rpx;
  font-weight: 600;
  color: $color-text-main;
}

.island-sales {
  font-size: 22rpx;
  color: $theme-primary;
  font-weight: 500;
}

.island-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: $color-text-body;
  margin-bottom: 8rpx;

  &:last-child {
    margin-bottom: 0;
  }

  text:last-child {
    font-family: monospace, sans-serif;
    color: $color-text-main;
  }
}

/* 药品对账：通用信息岛 */
.drug-meta {
  display: flex;
  align-items: center;
}

.info-island {
  background: #F7F8FA;
  border-radius: 16rpx;
  padding: 24rpx;
}

.island-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }

  .island-label {
    color: $color-text-muted;
  }

  .island-value {
    color: $color-text-main;

    &.text-primary { color: $theme-primary; }
    &.font-bold { font-weight: 600; font-size: 28rpx; }
    &.font-mono { font-family: SF Pro Text, monospace, sans-serif; font-size: 24rpx; color: $color-text-muted; }
  }
}

.empty-state {
  text-align: center;
  color: $color-text-muted;
  padding: 120rpx 0;
  font-size: 28rpx;
}
</style>