<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getGoodsInfo, GoodsDTO } from "@/api/shop/goods";
import { ElMessage } from "element-plus";
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;

defineOptions({
  name: "GoodsDetail"
});

const router = useRouter();
const route = useRoute();
const goodsInfo = ref<GoodsDTO>({
  goodsName: "",
  categoryId: 0,
  price: 0,
  stock: 0,
  status: 0,
  autoApproval: 0,
  coverImg: "",
  goodsDetail: ""
});
const loading = ref(false);
const activeTab = ref('basic');
const goodsId = ref<number>(0);

async function fetchGoodsDetail() {
  try {
    loading.value = true;
    const { data } = await getGoodsInfo(goodsId.value);
    goodsInfo.value = data;
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  goodsId.value = Number(route.query.id);
  fetchGoodsDetail();
});
</script>

<template>
  <div class="detail-container">
    <div class="flex-container">
      <el-card class="goods-info-card">
        <div class="goods-header">
          <img :src="goodsInfo.coverImg" class="goods-image" />
          <div class="goods-name">{{ goodsInfo.goodsName }}</div>
        </div>

        <el-divider />

        <el-descriptions class="goods-details" :column="1" border>
          <el-descriptions-item label="名称">{{ goodsInfo.goodsName }}</el-descriptions-item>
          <el-descriptions-item label="价格">{{ goodsInfo.price }}</el-descriptions-item>
          <el-descriptions-item label="库存">{{ goodsInfo.stock }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ goodsInfo.status === 1 ? '已上架' : '已下架' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="info-card">
        <div class="tab-header">
          <el-tabs type="card" v-model="activeTab">
            <el-tab-pane label="基本信息" name="basic"></el-tab-pane>
            <el-tab-pane label="库存记录" name="stock"></el-tab-pane>
            <el-tab-pane label="销售记录" name="sales"></el-tab-pane>
          </el-tabs>
        </div>

        <div class="info-details" v-if="activeTab === 'basic'">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="名称">{{ goodsInfo.goodsName }}</el-descriptions-item>
            <el-descriptions-item label="价格">{{ goodsInfo.price }}</el-descriptions-item>
            <el-descriptions-item label="库存">{{ goodsInfo.stock }}</el-descriptions-item>
            <el-descriptions-item label="已分配库存">{{ goodsInfo.totalStock }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ goodsInfo.status === 1 ? '已上架' : '已下架' }}</el-descriptions-item>
            <el-descriptions-item label="自动审批">{{ goodsInfo.autoApproval === 1 ? '开启' : '关闭' }}</el-descriptions-item>
            <el-descriptions-item label="商品描述" :span="2">
              <div v-html="goodsInfo.goodsDetail"></div>
            </el-descriptions-item>
            <el-descriptions-item label="使用说明" :span="2">
              {{ goodsInfo.usageInstruction || '暂无说明' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="stock-details" v-if="activeTab === 'stock'">
          <!-- 库存记录表格 -->
        </div>

        <div class="sales-details" v-if="activeTab === 'sales'">
          <!-- 销售记录表格 -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .flex-container {
    display: flex;
    flex: 1;
    gap: 12px;
    min-height: 0;

    .goods-info-card {
      width: 20%;
      height: 88vh;
    }

    .info-card {
      width: 80%;
      height: 88vh;
      overflow-y: auto;
    }
  }

  .goods-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .goods-image {
      width: 100%;
      height: 320px;
      object-fit: contain;
      margin-bottom: 15px;
    }

    .goods-name {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .tab-header {
    margin-bottom: 0px;
  }
}
</style>