<template>
  <!-- <v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs> -->
  <v-container>
    <v-row class="mb-16 ma-0">
      <v-col cols="5">
        <v-carousel class="tw-float-left" height="450" v-model="slide" hide-delimiter-background>
          <v-carousel-item
            cover
            v-for="(slide, i) in info.productimageliststore"
            :src="slide.url"
            :key="i"
          >
          </v-carousel-item>
        </v-carousel>
      </v-col>
      <v-col cols="7">
        <div class="mb-10 text-h4 font-weight-medium">{{ info.name }}</div>
        <div class="tw-flex tw-flex-wrap">
          <div class="tw-w-1/2">
            <span class="tw-leading-[10px] tw-m-[16px]">Brand：{{ info.brandName }}</span>
          </div>
          <!-- <v-col>
            <span class="tw-leading-[10px]">Category：{{ info.brandName }}</span>
          </v-col> -->

          <div class="tw-w-1/2 tw-mb-[12px]">
            <span class="tw-leading-[10px] tw-m-[16px]">Product Model：{{ info.model }}</span>
          </div>
          <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename1">
            <span class="tw-leading-[10px] tw-m-[16px]"
              >{{ info.basename1 }}：{{ info.basecore1 }}</span
            >
          </div>
          <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename2">
            <span class="tw-leading-[10px] tw-m-[16px]"
              >{{ info.basename2 }}：{{ info.basecore2 }}</span
            >
          </div>
          <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename3">
            <span class="tw-leading-[10px] tw-m-[16px]"
              >{{ info.basename3 }}：{{ info.basecore3 }}</span
            >
          </div>
        </div>
        <v-table density="comfortable" class="table1 tw-mt-[32px]" v-if="info.ticketTypes?.length">
          <thead>
            <tr class="bg-grey-lighten-3">
              <th class="text-left headerBorder text-grey-darken-1">Product Name / Code</th>
              <th class="text-left headerBorder text-grey-darken-1">Specification and model</th>
              <th class="text-left headerBorder text-grey-darken-1">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
              <td class="td text-grey-darken-4 font-weight-medium">{{ item.rank }}</td>
              <td class="td text-grey-darken-4 font-weight-medium">{{ item.typeName }}</td>
              <!-- <td class="td">{{ item.price }}</td> -->
              <td class="td">
                <v-btn size="small" color="blue-darken-1" @click="dialogStore.updateDialog(true)">
                  Quotation Inquiry
                </v-btn>
              </td>
            </tr>
          </tbody>
        </v-table>
        <!-- <v-dialog v-model="dialog" activator="parent" width="auto">
          <v-card> Contact us Email: contact@canrd.com QQ: 3003597584 / 2902385824 </v-card>
        </v-dialog> -->
        <ContactDialog dialog />
      </v-col>
    </v-row>
    <div class="tw-pb-[64px]">
      <v-tabs
        class="tabs"
        v-model="tab"
        color="white"
        bg-color="#eeeeee"
        slider-color="blue-lighten-1"
        selected-class="active"
      >
        <v-tab :value="1">Product Description</v-tab>
        <v-tab :value="2">Specification and model</v-tab>
        <!-- <v-tab :value="3">商品百科</v-tab> -->
      </v-tabs>
      <v-window v-model="tab" class="tw-p-[24px]">
        <v-window-item key="1" :value="1">
          <div v-html="info.physicalproperty"></div>
          <div v-html="info.storage"></div>
        </v-window-item>
        <v-window-item key="2" :value="2">
          <v-table density="compact" class="table2">
            <tbody>
              <tr class="tr" v-for="item in info.productAttributeList || []" :key="item.name">
                <td class="td tw-w-[400px]">{{ item.name }}</td>
                <td class="td">{{ item.value }}</td>
              </tr>
            </tbody>
          </v-table>
        </v-window-item>
        <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
      </v-window>
    </div>
  </v-container>
</template>

<script setup lang="ts">
import ContactDialog from '@/components/ContactDialog.vue'
import { getDetail } from '@/service'
import type { Product } from '@/type'
import type { ProductImage } from '@/type'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()

const route = useRoute()
const info = ref<Partial<Product>>({
  productimageliststore: []
})

onMounted(() => {
  getDetail({ id: route.params.id as string }).then((res) => {
    const data = res.data.data || {}
    data.productimageliststore = (JSON.parse(data.productimageliststore) || []) as ProductImage[]
    data.productimageliststore = data.productimageliststore.map((item: ProductImage) => ({
      ...item,
      url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`
    }))
    info.value = data
  })
})

const tab = ref(0)
const slide = ref(0)
</script>

<style lang="scss" scoped>
.headerBorder {
  border-top: 3px solid #1f88e5 !important;
}
.tabs {
  border-bottom: 2px solid #1f88e5;
}
.active {
  background-color: #1086e8;
}
.td,
th {
  border: 1px solid #dcdcdc;
  border-right: 0px;
  border-bottom: 0px !important;
  height: 50px !important;

  &:last-child {
    border: 1px solid #dcdcdc;
  }
}

.tr:last-child {
  .td {
    border-bottom: 1px solid #dcdcdc !important;
  }
}
</style>