<template>
  <view class="container">
    <MessageNotification />
    <!-- 1. 顶部搜索栏 -->
    <view class="header-section">
      <view class="search-box">
        <u-search
            v-model="searchKeyword"
            placeholder="搜索药品/症状"
            :show-action="true"
            action-text="搜索"
            bg-color="#F5F7FA"
            placeholder-color="#9CA3AF"
            shape="round"
            height="64"
            :input-style="{fontSize: '26rpx'}"
            @custom="handleSearch"
            @search="handleSearch"
            @clear="clearSearch"
        ></u-search>
      </view>
    </view>

    <!-- 2. 顶部专区Tab -->
    <view class="zone-tabs-wrapper">
      <scroll-view scroll-x class="zone-tabs-scroll">
        <view class="zone-tabs">
          <view
              v-for="(zone, index) in homeZones"
              :key="index"
              class="zone-tab-item"
              :class="{ active: selectedZoneIndex === index }"
              @click="onZoneChange(index)"
          >
            <text>{{ zone.title }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 3. 主体内容区：左侧分类 + 右侧商品 -->
    <view class="main-content">
      <!-- 左侧分类栏 -->
      <view class="category-sidebar">
        <scroll-view scroll-y class="category-scroll">
          <view
              class="category-item"
              :class="{ active: selectedCategoryId === 0 }"
              @click="selectCategory(0)"
          >
            <text>全部</text>
          </view>
          <view
              v-for="cat in categoryList"
              :key="cat.id"
              class="category-item"
              :class="{ active: selectedCategoryId === cat.id }"
              @click="selectCategory(cat.id)"
          >
            <text class="u-line-1">{{ cat.category_name }}</text>
          </view>
        </scroll-view>
      </view>

      <!-- 右侧商品列表区 -->
      <view class="product-area">
        <scroll-view scroll-y class="product-scroll" @scrolltolower="loadMore">
          <!-- 商品列表 - 两列布局 -->
          <view class="product-grid" v-if="products.length > 0">
            <view
                v-for="(item, index) in products"
                :key="item.id"
                class="product-card"
                @click="handClickProduct(item)"
            >
              <!-- 商品图片 -->
              <view class="product-img-box">
                <image
                    class="product-img"
                    :class="{ 'prescription-blur': item.drug && item.drug.is_otc === 0 && item.drug.type == 2 }"
                    :src="(item.drug && item.drug.image) ? item.drug.image : '/static/mine/avatar_1.png'"
                    mode="aspectFill"
                    lazy-load
                />
              </view>

              <!-- 商品信息 -->
              <view class="product-info">
                <view class="product-title u-line-2">{{ item.drug ? item.drug.drug_name : '' }}</view>
                <view class="product-tags" v-if="item.drug.type == 2">
                  <text
                      class="tag-label"
                      :class="getProductTag(item.drug).className"
                  >
                    {{ getProductTag(item.drug).label }}
                  </text>
                  <text class="tag-spec u-line-1">{{ (item.drug && item.drug.specification) ? item.drug.specification : '标准规格' }}</text>
                </view>
                <view class="product-bottom">
                  <view class="price-box">
                    <text class="price-symbol">¥</text>
                    <text class="price-val">{{ item.price }}</text>
                  </view>
                  <view class="cart-btn" @click.stop="showCartPopup(item)">
                    <u-icon name="plus" color="#ffffff" size="26"></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 空状态 -->
          <view v-if="products.length === 0" class="empty-state">
            <u-empty text="暂无相关药品" mode="search" margin-top="100"></u-empty>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 购物车悬浮球 -->
    <view
        class="cart-float"
        :style="{ left: cartPosition.x + 'px', top: cartPosition.y + 'px' }"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @click="goToCart"
    >
      <view class="cart-icon-inner">
        <u-icon name="shopping-cart" color="#ffffff" size="44"></u-icon>
        <view class="badge" v-if="cartCount > 0">{{ cartCount > 99 ? '99+' : cartCount }}</view>
      </view>
    </view>

    <!-- 购物车弹窗 -->
    <u-popup
        v-model="showPopup"
        mode="bottom"
        border-radius="24"
        :closeable="true"
        @close="closePopup"
    >
      <view class="popup-content safe-area-inset-bottom">
        <view class="product-header-row">
          <image class="popup-img" :src="getProductImage" mode="aspectFill"></image>
          <view class="popup-info">
            <view class="price-row">¥<text class="big">{{ currentProduct.price || '' }}</text></view>
            <view class="stock-row">库存充足</view>
            <view class="selected-spec">已选: {{ getProductSpec }}</view>
          </view>
        </view>

        <view class="quantity-section">
          <text class="label">购买数量</text>
          <u-number-box
              v-model="quantity"
              :min="1"
              :max="999"
              integer
              @change="quantityChange"
          ></u-number-box>
        </view>

        <view class="popup-footer">
          <button class="action-btn add-cart" @click="confirmAddToCart">加入购物车</button>
        </view>
      </view>
    </u-popup>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getStoreDrugListBySalespersonApi, getHomeZonesApi, getDrugCategoriesApi } from "@/request/api/product";
import { getCartCountsApi, saveCartApi } from "@/request/api/cart";

export default {
  data() {
    return {
      products: [],
      searchKeyword: "",

      // 专区相关
      homeZones: [],
      selectedZoneIndex: 0,
      selectedZoneType: 'otc',

      // 分类相关
      categoryList: [],
      selectedCategoryId: 0,

      doctorId: 0,
      r_type: 0,
      delegateStoreId: '',
      cartCount: 0,
      cartPosition: { x: 0, y: 0 },
      cartMove: { startX: 0, startY: 0, moving: false },
      showPopup: false,
      currentProduct: {},
      quantity: 1
    };
  },
  computed: {
    getProductImage() {
      return (this.currentProduct.drug && this.currentProduct.drug.image) ? this.currentProduct.drug.image : '/static/mine/avatar_1.png';
    },
    getProductName() {
      return (this.currentProduct.drug && this.currentProduct.drug.drug_name) ? this.currentProduct.drug.drug_name : '';
    },
    getProductSpec() {
      return (this.currentProduct.drug && this.currentProduct.drug.specification) ? this.currentProduct.drug.specification : '标准规格';
    }
  },
  onLoad(e) {
    this.doctorId = e.doctor_id;
    this.r_type = e.register_type;
    this.delegateStoreId = e.delegate_store_id || '';
    
    // 根据首页传入的专区类型初始化
    if (e.zone_type) {
      this.selectedZoneType = e.zone_type;
    } else {
      this.selectedZoneType = 'otc';
    }
    
    // 获取专区列表
    this.getHomeZones();
  },
  methods: {
    // 获取专区列表
    getHomeZones() {
      getHomeZonesApi({
        store_id: uni.getStorageSync('store_id') || '11001',
      }).then((res) => {
        if (res.data.code == 0) {
          this.homeZones = res.data.result || res.data.data || [];
          
          // 根据传入的zone_type找到对应的索引
          if (this.homeZones.length > 0) {
            const index = this.homeZones.findIndex(z => z.type === this.selectedZoneType);
            this.selectedZoneIndex = index >= 0 ? index : 0;
            this.selectedZoneType = this.homeZones[this.selectedZoneIndex]?.type || 'otc';
          }
          
          // 获取分类列表
          this.getCategoryList();
        }
      }).catch(() => {
        // 使用默认专区
        this.homeZones = [
          { id: 1, title: 'OTC', type: 'otc' },
          { id: 2, title: '保健食品', type: 'health_food' }
        ];
        this.getCategoryList();
      });
    },

    // 获取分类列表
    getCategoryList() {
      getDrugCategoriesApi({
        zone_type: this.selectedZoneType
      }).then((res) => {
        if (res.data.code == 0) {
          // 将树形结构扁平化为一级分类列表
          const categories = res.data.result || [];
          this.categoryList = this.flattenCategories(categories);
        }
      }).catch(() => {
        this.categoryList = [];
      }).finally(() => {
        // 重置分类选择并获取商品列表
        this.selectedCategoryId = 0;
        this.getList();
      });
    },

    // 扁平化分类树（只取一级分类，或展开所有层级）
    flattenCategories(categories, result = []) {
      for (const cat of categories) {
        result.push({
          id: cat.id,
          category_name: cat.category_name,
          level: cat.level,
          parent_id: cat.parent_id
        });
        if (cat.children && cat.children.length > 0) {
          this.flattenCategories(cat.children, result);
        }
      }
      return result;
    },

    // 专区切换
    onZoneChange(index) {
      this.selectedZoneIndex = index;
      this.selectedZoneType = this.homeZones[index]?.type || 'otc';
      this.selectedCategoryId = 0;
      // 重新获取分类和商品
      this.getCategoryList();
    },

    // 分类选择
    selectCategory(categoryId) {
      this.selectedCategoryId = categoryId;
      this.getList();
    },

    // 核心标签判断逻辑
    getProductTag(drug) {
      if (!drug) return { label: 'OTC', className: 'tag-green' };
      if (drug.type === 3) {
        return { label: '保健食品', className: 'tag-orange' };
      }
      if (drug.type == 2) {
        if (drug.is_otc) {
          return { label: 'OTC', className: 'tag-green' };
        } else {
          return { label: 'Rx', className: 'tag-red' };
        }
      }
    },

    getList() {
      const params = {
        store_id: uni.getStorageSync('store_id') || '11001',
        page: 1,
        limit: 100,
        category: this.selectedZoneType
      };
      
      if (this.selectedCategoryId > 0) {
        params.category_id = this.selectedCategoryId;
      }
      
      if (this.searchKeyword) {
        params.keyword = this.searchKeyword;
      }
      
      getStoreDrugListBySalespersonApi(params).then((res) => {
        if (res.data.code == 0) {
          this.products = res.data.result.records || [];
          this.cartCount = res.data.result.cart_count || 0;
        }
      });
    },

    handleSearch() {
      this.getList();
    },
    
    clearSearch() {
      this.searchKeyword = "";
      this.getList();
    },

    handClickProduct(item) {
      let url = `/subPackages/product/symptoms?id=${item.drug.id}&drug_name=${item.drug.drug_name}&is_otc=${item.drug.is_otc}&image=${item.drug.image}&price=${item.price}`;
      if (this.delegateStoreId) {
        url += `&delegate_store_id=${this.delegateStoreId}`;
      }
      uni.navigateTo({ url });
    },

    // 悬浮球逻辑
    initCartPosition() {
      const systemInfo = uni.getSystemInfoSync();
      this.cartPosition = {
        x: systemInfo.windowWidth - 80,
        y: systemInfo.windowHeight - 200
      };
    },
    onTouchStart(e) {
      this.cartMove.startX = e.touches[0].clientX;
      this.cartMove.startY = e.touches[0].clientY;
      this.cartMove.moving = false;
    },
    onTouchMove(e) {
      this.cartMove.moving = true;
      const moveX = e.touches[0].clientX - this.cartMove.startX;
      const moveY = e.touches[0].clientY - this.cartMove.startY;
      this.cartPosition.x += moveX;
      this.cartPosition.y += moveY;
      this.cartMove.startX = e.touches[0].clientX;
      this.cartMove.startY = e.touches[0].clientY;
    },
    onTouchEnd() {
      if (!this.cartMove.moving) return;
      const systemInfo = uni.getSystemInfoSync();
      const screenWidth = systemInfo.windowWidth;
      const screenHeight = systemInfo.windowHeight;
      let finalX = this.cartPosition.x;
      let finalY = this.cartPosition.y;
      finalX = Math.max(10, Math.min(finalX, screenWidth - 70));
      finalY = Math.max(10, Math.min(finalY, screenHeight - 70));
      if (finalX < screenWidth / 2) {
        finalX = 20;
      } else {
        finalX = screenWidth - 70;
      }
      this.cartPosition = { x: finalX, y: finalY };
    },
    goToCart() {
      uni.navigateTo({ url: '/subPackages/shop/shop-cate' });
    },
    showCartPopup(item) {
      this.currentProduct = item;
      this.quantity = 1;
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
    quantityChange(value) {},
    confirmAddToCart() {
      // 检查是否为处方药：is_otc === 0 && type == 2
      if (this.currentProduct.drug && this.currentProduct.drug.is_otc === 0 && this.currentProduct.drug.type == 2) {
        uni.showToast({
          title: '处方药不能加入购物车，请通过提交预定购买',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      saveCartApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        drug_id: this.currentProduct.drug.id,
        quantity: this.quantity
      }).then(() => {
        this.updateCartCount();
        this.closePopup();
        this.$refs.uToast.show({ title: '已加入购物车', type: 'success' });
      });
    },
    updateCartCount() {
      getCartCountsApi({
        store_id: uni.getStorageSync('store_id') || '11001',
        page: 1,
        limit: 100
      }).then((res) => {
        if (res.data.code == 0) {
          this.cartCount = res.data.result.cart_count;
        }
      });
    },
    loadMore() {
      // 可扩展加载更多功能
    }
  },
  onShow() {
    if (this.homeZones.length === 0) {
      this.getHomeZones();
    } else {
      this.getList();
    }
    this.initCartPosition();
    this.updateCartCount();
  },
  onReady() {
    uni.onWindowResize(() => {
      this.initCartPosition();
    });
  },
  mounted() {
    this.updateCartCount();
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #F5F7FA;
  overflow: hidden;
}

/* 1. 顶部搜索栏 */
.header-section {
  background: #fff;
  padding: 16rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  
  .search-box {
    width: 100%;
  }
}

/* 2. 顶部专区Tab */
.zone-tabs-wrapper {
  background: #fff;
  border-bottom: 2rpx solid #f0f0f0;
  
  .zone-tabs-scroll {
    white-space: nowrap;
  }
  
  .zone-tabs {
    display: inline-flex;
    padding: 0 24rpx;
    
    .zone-tab-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 24rpx 32rpx;
      font-size: 28rpx;
      color: #666;
      position: relative;
      transition: all 0.2s;
      
      &.active {
        color: #2B85E4;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 48rpx;
          height: 6rpx;
          background: linear-gradient(90deg, #5CADFF, #2B85E4);
          border-radius: 3rpx;
        }
      }
    }
  }
}

/* 3. 主体内容区 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧分类栏 */
.category-sidebar {
  width: 180rpx;
  background: #fff;
  flex-shrink: 0;
  
  .category-scroll {
    height: 100%;
  }
  
  .category-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #666;
    position: relative;
    padding: 0 12rpx;
    
    text {
      text-align: center;
      max-width: 100%;
    }
    
    &.active {
      background: #F5F7FA;
      color: #2B85E4;
      font-weight: bold;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 48rpx;
        background: #2B85E4;
        border-radius: 0 3rpx 3rpx 0;
      }
    }
  }
}

/* 右侧商品区域 */
.product-area {
  flex: 1;
  overflow: hidden;
  
  .product-scroll {
    height: 100%;
    padding: 16rpx;
    box-sizing: border-box;
  }
}

/* 商品网格 - 两列布局 */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.product-card {
  width: calc((100% - 16rpx) / 2);
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
  
  &:active {
    transform: scale(0.98);
  }
  
  .product-img-box {
    width: 100%;
    height: 240rpx;
    background: #f8f8f8;
    
    .product-img {
      width: 100%;
      height: 100%;
      
      &.prescription-blur {
        /* 暂时禁用模糊
        filter: blur(8px);
        -webkit-filter: blur(8px);
        */
      }
    }
  }
  
  .product-info {
    padding: 16rpx;
    
    .product-title {
      font-size: 26rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      height: 72rpx;
      margin-bottom: 12rpx;
    }
    
    .product-tags {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      gap: 8rpx;
      
      .tag-label {
        font-size: 18rpx;
        padding: 2rpx 8rpx;
        border-radius: 4rpx;
        font-weight: 500;
        border: 1px solid;
        flex-shrink: 0;
        
        &.tag-green { color: #10B981; border-color: #10B981; background: #ECFDF5; }
        &.tag-red { color: #EF4444; border-color: #EF4444; background: #FEF2F2; }
        &.tag-orange { color: #F59E0B; border-color: #F59E0B; background: #FFFBEB; }
      }
      
      .tag-spec {
        font-size: 20rpx;
        color: #999;
        flex: 1;
        min-width: 0;
      }
    }
    
    .product-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .price-box {
        color: #EF4444;
        font-weight: bold;
        
        .price-symbol { font-size: 22rpx; }
        .price-val { font-size: 32rpx; font-family: 'DIN Alternate', sans-serif; }
      }
      
      .cart-btn {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #4A90E2, #5B8FF9);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 8rpx rgba(74, 144, 226, 0.3);
      }
    }
  }
}

/* 购物车悬浮球 */
.cart-float {
  position: fixed;
  z-index: 999;
  
  .cart-icon-inner {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #4A90E2, #5B8FF9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 20rpx rgba(74, 144, 226, 0.4);
    position: relative;
    
    .badge {
      position: absolute;
      top: -6rpx;
      right: -6rpx;
      background: #EF4444;
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 10rpx;
      border-radius: 20rpx;
      border: 2rpx solid #fff;
    }
  }
}

/* 弹窗内容 */
.popup-content {
  padding: 30rpx 30rpx 40rpx;
  background: #fff;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

  .product-header-row {
    display: flex;
    margin-bottom: 40rpx;
    
    .popup-img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 12rpx;
      margin-right: 24rpx;
      background: #f8f8f8;
    }
    
    .popup-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      
      .price-row {
        color: #EF4444;
        font-size: 28rpx;
        font-weight: bold;
        .big { font-size: 44rpx; margin-left: 4rpx; }
      }
      .stock-row { font-size: 22rpx; color: #6B7280; margin: 8rpx 0; }
      .selected-spec { font-size: 24rpx; color: #374151; }
    }
  }

  .quantity-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;
    .label { font-size: 30rpx; color: #1F2937; font-weight: 500; }
  }

  .popup-footer {
    .action-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 600;
      
      &.add-cart {
        background: linear-gradient(90deg, #4A90E2, #5B8FF9);
        color: #fff;
      }
      &:active { opacity: 0.9; }
    }
  }
}

.empty-state { 
  margin-top: 100rpx; 
}

.u-line-1 { 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
}

.u-line-2 { 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
