<template>
  <div class="banner h-[60px]" v-if="form">
    <el-image :src="form.photo"></el-image>
  </div>
  <div v-if="form" class="container flex flex-col m-auto my-3">
    <el-breadcrumb class="py-2" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ form.categoryParent }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ form.goodsName }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="goods-box bg-white p-4 m-auto mt-3 flex gap-xl">
      <div class="goods-image flex gap-xl">
        <div class="gap-xs flex flex-col">
          <el-avatar v-for="item in form.files" :src="item.url" size="large" shape="square" />
        </div>
        <el-image :src="form.image" fit="contain" class="w-2xl h-2xl bg-gray-100 border-radius:30px"></el-image>
      </div>
      <div class="goods-info flex flex-col gap-xs">
        <div class="goods-name text-2xl">{{ form.goodsName }}</div>
        <div class="goods-price text-2xl red">￥{{ form.salePrice * form.num }}</div>
        <div class="text-green-7">购买得积分</div>
        <div class="text-gray-4">配送：无需配送</div>
        <div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
        <div class="text-gray-4">销量： {{ form.sales }}</div>
        <template v-for="spec in form.goodsSpecValue">
          <div class="flex items-center">
            <div class="text-gray-4">{{ spec.value }}：</div>
            <el-radio-group v-model="form.radio">
              <el-radio v-for="(specValue,specIndex) in spec.detail" :label="specIndex" border>{{ specValue }}</el-radio>
            </el-radio-group>
          </div>
        </template>
        <div class="text-gray-4">
          已选中：{{ form.radio }}
        </div>
        <div class="text-gray-4">
          数量：
          <el-input-number v-model="form.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </div>
        <div class="py-5">
          <el-button-group size="large">
            <el-button type="primary">立即购买</el-button>
            <el-button type="primary">加入购物车</el-button>
          </el-button-group>
          <el-button size="large" class="ml-3">收藏</el-button>
        </div>
      </div>
    </div>
    <div class="content w-7xl m-auto p-4 bg-white">
      <el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick">
        <el-tab-pane label="参数信息" name="parameter">
          <el-descriptions class="margin-top" title="参数信息" :column="3" border>
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="图文详情" name="content">
          <div class="files flex flex-col">
            <el-image v-for="item in form.files" :src="item.url" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户评价" name="reviews">用户评价</el-tab-pane>
      </el-tabs>
    </div>

  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
  <div title="调试数据" class="p-8 text-center">
    页面ID： {{ productName }}
    页面数据：{{ form }}
  </div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useRequest} from "~/composables/useRequest";
import type {Goods} from "~/api/shop/goods/model";

const route = useRoute();
const { query, params } = route;
const { name: productName } = params;
const activeName = ref('parameter');
console.log(productName,'productName..')


// 页面信息
const form = ref<Goods | any>();

// 请求数据
// const { data: info } = await useRequest<ApiResult<Goods>>('/shop/goods/' + productName)
// form.value = info.value?.data;
// form.value.files = JSON.parse(form.value.files);
// form.value.num = 1;
// form.value.radio = '0'



const handleClick = (tab, event) => {
  console.log(tab, event);
}
</script>

<style scoped lang="scss">

</style>
