<template>
  <business-page-layout title="药品详情" :show-back="true">
    <view v-if="info.id" class="page-container">
      <!-- 头部信息卡片 -->
      <view class="card hero-card">
        <view class="image-wrapper">
          <image class="hero" :src="display.imageUrl || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk_upload_20250510/cd470ebf97e31c4048ba502ba71b66a3.jpg'" mode="aspectFill" />
        </view>
        <view class="main-info">
          <text class="drug-name">{{ display.drugName }}</text>
          <text class="pinyin">拼音: {{ display.pinyin_simple || '--' }}</text>
        </view>
      </view>

      <!-- 核心数据卡片 -->
      <view class="card data-card">
        <view class="row">
          <text class="label">状态</text>
          <view class="status-tag" :class="display.isOnShelf ? 'tag-on' : 'tag-off'">
            {{ display.statusText }}
          </view>
        </view>
        <view class="row">
          <text class="label">库存</text>
          <text class="value stock-value">{{ display.stock }}</text>
        </view>

        <view class="divider"></view>

        <view class="row">
          <text class="label">供货价</text>
          <text class="value">{{ display.buyPrice }}</text>
        </view>
        <view class="row">
          <text class="label">建议售价</text>
          <text class="value">{{ display.suggestPrice }}</text>
        </view>
        <view class="row highlight-row">
          <text class="label">当前售价</text>
          <text class="value price-large">{{ display.price }}</text>
        </view>
      </view>

      <!-- 底部操作按钮组 -->
      <view v-if="info.id" class="action-group">
        <view class="btn-large btn-outline" hover-class="btn-hover-opacity" @click="openPriceEdit">
          {{ isPlatformWarehouse ? '修改价格' : '修改售价' }}
        </view>
        <view
            class="btn-large"
            :class="display.isOnShelf ? 'btn-danger' : 'btn-primary'"
            hover-class="btn-hover-opacity"
            @click="toggleStatus"
        >
          {{ display.isOnShelf ? '下架该药品' : '上架该药品' }}
        </view>
      </view>
    </view>

    <price-edit-modal
        :visible="priceModalVisible"
        :item="info.id ? info : null"
        @close="closePriceEdit"
        @confirm="onPriceConfirm"
    />
  </business-page-layout>
</template>

<script>
import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue'
import PriceEditModal from './components/PriceEditModal.vue'
import { mapWarehouseRow } from '@/subPackages/sub_business_shared/common/display.js'

import businessMixin from '@/subPackages/sub_business_shared/common/businessMixin.js'

export default {
  mixins: [businessMixin],
  components: { BusinessPageLayout, PriceEditModal },
  data() {
    return {
      id: 0,
      info: {},
      priceModalVisible: false,
      priceSubmitting: false,
    }
  },
  computed: {
    display() {
      return mapWarehouseRow(this.info, this.bizCap.warehouseType || 'store')
    },
    isPlatformWarehouse() {
      return this.bizCap.warehouseType === 'platform'
    },
  },
  onLoad(q) {
    this.id = Number(q.id || 0)
    this.load()
  },
  methods: {
    load() {
      this.bizApi.getWarehouseDetail(this.id).then(w => {
        if (w.ok) this.info = w.data || {}
      })
    },
    openPriceEdit() {
      this.priceModalVisible = true
    },
    closePriceEdit() {
      this.priceModalVisible = false
    },
    onPriceConfirm(payload) {
      if (this.priceSubmitting) return
      this.priceSubmitting = true
      const data = typeof payload === 'object' && payload !== null
        ? { id: this.id, ...payload }
        : { id: this.id, price: payload }
      this.bizApi.updateWarehousePrice(data).then(w => {
        if (w.ok) {
          uni.showToast({ title: '修改成功' })
          this.closePriceEdit()
          this.load()
        }
      }).finally(() => { this.priceSubmitting = false })
    },
    toggleStatus() {
      this.bizApi.updateWarehouseStatus(this.id).then(w => {
        if (w.ok) {
          uni.showToast({ title: '操作成功' })
          this.load()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
/* 同步了列表页的核心色板 */
$theme-color: #6acdbb;
$theme-color-light: rgba(106, 205, 187, 0.12);
$text-primary: #2c3e50;
$text-secondary: #8a97a3;
$text-light: #b0b8c1;
$bg-color: #f7f9fa;
$border-color: #ebedf0;
$danger-color: #ff6b6b;
$danger-color-light: rgba(255, 107, 107, 0.1);

.page-container {
  padding: 24rpx;
  padding-bottom: 60rpx;
}

.card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

/* 头部卡片特异样式 */
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
}

.image-wrapper {
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  background: $bg-color;
  border: 1rpx solid $border-color;
  margin-bottom: 32rpx;
}

.hero {
  width: 100%;
  height: 400rpx;
  display: block;
}

.main-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.drug-name {
  font-size: 36rpx;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.pinyin {
  font-size: 26rpx;
  color: $text-secondary;
}

/* 核心数据卡片样式 */
.data-card {
  padding: 16rpx 32rpx;
}

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

.divider {
  height: 1rpx;
  background-color: $border-color;
  margin: 8rpx 0;
}

.label {
  font-size: 28rpx;
  color: $text-secondary;
}

.value {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 500;
}

.stock-value {
  font-family: monospace; /* 数字更清晰 */
  font-size: 30rpx;
}

.highlight-row {
  margin-top: 8rpx;
  background: #fafbfa; /* 极浅的背景强调 */
  margin: 0 -32rpx;
  padding: 32rpx;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
}

.highlight-row .label {
  color: $text-primary;
  font-weight: 500;
}

.price-large {
  font-size: 40rpx;
  color: $theme-color;
  font-weight: 600;
}

/* 标签样式 */
.status-tag {
  font-size: 24rpx;
  font-weight: 500;
  padding: 6rpx 20rpx;
  border-radius: 12rpx;
}

.tag-on {
  color: $theme-color;
  background: $theme-color-light;
}

.tag-off {
  color: $text-secondary;
  background: $bg-color;
}

/* 底部操作按钮组 */
.action-group {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-top: 16rpx;
}

.btn-large {
  width: 100%;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  transition: opacity 0.2s;
  box-sizing: border-box;
}

.btn-primary {
  background: $theme-color;
  color: #ffffff;
  box-shadow: 0 8rpx 24rpx $theme-color-light;
}

.btn-danger {
  background: $danger-color;
  color: #ffffff;
  box-shadow: 0 8rpx 24rpx $danger-color-light;
}

.btn-outline {
  background: #ffffff;
  color: $theme-color;
  border: 2rpx solid $theme-color;
}

.btn-hover-opacity {
  opacity: 0.7;
}
</style>