<template>
  <business-page-layout :title="pageTitle" :show-back="true">
    <!-- 搜索栏优化：胶囊式设计，增加视觉呼吸感 -->
    <view class="search-wrapper">
      <view class="search-bar">
        <input class="search-input" v-model="keyword" placeholder="搜索药品名称" placeholder-class="search-placeholder" @confirm="reload" />
        <view class="search-btn" hover-class="btn-hover" @click="reload">搜索</view>
      </view>
    </view>

    <view class="list-container">
      <view
          v-for="item in list"
          :key="item._wxKey"
          class="item-card"
          hover-class="card-hover"
          @click="goDetail(item)"
      >
        <!-- 左侧缩略图 -->
        <image class="thumb" :src="rowDisplay(item).imageUrl || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk_upload_20250510/cd470ebf97e31c4048ba502ba71b66a3.jpg'" mode="aspectFill" />

        <!-- 右侧内容区 -->
        <view class="content">
          <!-- 顶部：标题与状态标签对齐 -->
          <view class="header-row">
            <text class="title">{{ rowDisplay(item).drugName }}</text>
            <view class="status-tag" :class="rowDisplay(item).isOnShelf ? 'tag-on' : 'tag-off'">
              {{ rowDisplay(item).statusText }}
            </view>
          </view>

          <!-- 中部：详细信息 -->
          <view class="info-group">
            <text class="info-text">供货 {{ rowDisplay(item).buyPrice }} · 售价 {{ rowDisplay(item).price }}</text>
            <text class="info-text">库存 {{ rowDisplay(item).stock }}</text>
          </view>

          <!-- 底部：操作按钮横向排列，增加点击区域与反馈 -->
          <view class="action-row" @click.stop>
            <view class="action-btn outline" hover-class="btn-hover-opacity" @click.stop="openPriceEdit(item)">
              改价
            </view>
            <view class="action-btn" :class="rowDisplay(item).isOnShelf ? 'btn-danger' : 'btn-primary'" hover-class="btn-hover-opacity" @click.stop="toggleStatus(item)">
              {{ rowDisplay(item).isOnShelf ? '下架' : '上架' }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态优化 -->
    <view v-if="!loading && !list.length" class="empty-state">
      <view class="empty-icon"></view>
      <text class="empty-text">暂无药品数据</text>
    </view>

    <price-edit-modal
        :visible="priceModalVisible"
        :item="priceEditItem"
        @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 { withWxKey } from '@/utils/wxListKey.js'
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 {
      pageTitle: '仓库管理',
      warehouseType: '',
      keyword: '',
      list: [],
      page: 1,
      loading: false,
      priceModalVisible: false,
      priceEditItem: null,
      priceSubmitting: false,
    }
  },
  onLoad(q) {
    if (q.label) {
      this.pageTitle = decodeURIComponent(q.label)
    }
    if (q.type != null && q.type !== '') {
      this.warehouseType = q.type
    }
    this.reload()
  },
  onReachBottom() {
    this.load(this.page + 1, true)
  },
  methods: {
    rowDisplay(item) {
      return mapWarehouseRow(item, this.bizCap.warehouseType || 'store')
    },
    reload() {
      this.page = 1
      this.load(1, false)
    },
    load(page, append) {
      this.loading = true
      const params = { page, pageSize: 20 }
      if (this.keyword) params.name = this.keyword
      if (this.warehouseType !== '' && this.warehouseType != null) {
        params.type = this.warehouseType
      }
      this.bizApi.getWarehouseList(params).then(w => {
        const items = withWxKey((w.data && w.data.items) || [], 'id', 'wh')
        this.list = append ? this.list.concat(items) : items
        this.page = page
      }).finally(() => { this.loading = false })
    },
    goDetail(item) {
      uni.navigateTo({ url: `${this.bizRoot}/warehouse/detail?id=${item.id}` })
    },
    openPriceEdit(item) {
      this.priceEditItem = item
      this.priceModalVisible = true
    },
    closePriceEdit() {
      this.priceModalVisible = false
      this.priceEditItem = null
    },
    onPriceConfirm(payload) {
      if (!this.priceEditItem || this.priceSubmitting) return
      this.priceSubmitting = true
      const data = typeof payload === 'object' && payload !== null
        ? { id: this.priceEditItem.id, ...payload }
        : { id: this.priceEditItem.id, price: payload }
      this.bizApi.updateWarehousePrice(data).then(w => {
        if (w.ok) {
          uni.showToast({ title: '修改成功' })
          this.closePriceEdit()
          this.reload()
        }
      }).finally(() => { this.priceSubmitting = false })
    },
    toggleStatus(item) {
      const action = item.status === 2 ? '下架' : '上架'
      uni.showModal({
        title: '提示',
        content: '确定' + action + '「' + ((item.drug && item.drug.drug_name) || '') + '」？',
        success: (res) => {
          if (!res.confirm) return
          this.bizApi.updateWarehouseStatus(item.id).then(w => {
            if (w.ok) {
              uni.showToast({ title: '操作成功' })
              item.status = item.status === 2 ? 1 : 2
            }
          })
        },
      })
    },
  },
}
</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);

.search-wrapper {
  padding: 16rpx 24rpx;
  background-color: transparent;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 12rpx 16rpx 12rpx 32rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: $text-primary;
  height: 60rpx;
}

.search-placeholder {
  color: $text-light;
}

.search-btn {
  background: $theme-color;
  color: #ffffff;
  font-size: 26rpx;
  font-weight: 500;
  padding: 12rpx 36rpx;
  border-radius: 30rpx;
  margin-left: 16rpx;
  transition: all 0.2s;
}

.list-container {
  padding: 0 24rpx 24rpx;
}

.item-card {
  display: flex;
  background: #ffffff;
  padding: 24rpx;
  border-radius: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover {
  transform: scale(0.99);
  background-color: #fafafa;
}

.thumb {
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: $bg-color;
  border: 1rpx solid $border-color;
}

.content {
  flex: 1;
  margin-left: 24rpx;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8rpx;
}

.title {
  font-size: 30rpx;
  color: $text-primary;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
  margin-right: 16rpx;
  /* 单行截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-tag {
  font-size: 20rpx;
  font-weight: 500;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
  line-height: 1.5;
}

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

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

.info-group {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  margin-bottom: 16rpx;
}

.info-text {
  font-size: 24rpx;
  color: $text-secondary;
}

.action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16rpx;
  margin-top: auto;
}

.action-btn {
  font-size: 24rpx;
  padding: 10rpx 28rpx;
  border-radius: 12rpx;
  font-weight: 500;
  line-height: 1.5;
  transition: opacity 0.2s;
}

.action-btn.outline {
  color: $text-primary;
  background: #ffffff;
  border: 1rpx solid $border-color;
}

.action-btn.btn-primary {
  color: #ffffff;
  background: $theme-color;
  border: 1rpx solid $theme-color;
}

.action-btn.btn-danger {
  color: $danger-color;
  background: $danger-color-light;
  border: 1rpx solid transparent;
}

.btn-hover {
  opacity: 0.8;
}

.btn-hover-opacity {
  opacity: 0.6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  background-color: $bg-color;
  border-radius: 50%;
  margin-bottom: 30rpx;
  position: relative;
}

/* 用伪元素做一个简单的空状态图形占位，有条件可替换为真实的Image/SVG */
.empty-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80rpx;
  height: 80rpx;
  border: 8rpx solid $border-color;
  border-radius: 16rpx;
}

.empty-text {
  color: $text-light;
  font-size: 28rpx;
}
</style>