<template>
  <view class="text-center">
    <van-sticky>
      <view class="sh mg-b-40">
        <view class="top-bar justify-center bg-white">
          <van-icon class="top-left" name="arrow-left" @tap="goBack" />
          <view class="top-center">{{ state.title }}</view>
        </view>
        <van-tabs class="top_tab" v-model:active="state.tab.active" @change="onTab" scrollspy>
          <van-tab v-for="(item, index) in state.tab.list" :name="item.name">
          <template #title>
            <view :style="index==1?'width:78px':''">{{item.title}}</view>
          </template>
          </van-tab>
        </van-tabs>
      </view>
    </van-sticky>
    <view style="height: 140vw">
      <template v-for="(item, index) in state.tab.list">
        <van-image v-if="state.tab.active == item.name && item.url" lazy-load
          loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default.png" icon-size="81vw" height="126vw"
          width="81vw" :src="item.url" />
      </template>
    </view>
    <view class="text-gray pd-20">{{ '>>长按上方图片保存<<' }}</view>
    </view>
</template>

<script setup lang="ts">
import api from '@/api'
import { computed, onBeforeMount, reactive } from 'vue';
import { PageUtils } from '@/utils/utils';
const state = reactive({
  title: PageUtils.getTitle(),
  tab: {
    active: 'detail',
    list: [
      { title: '详情', name: 'detail', url: "" },
      { title: '图+二维码', name: 'pictureAndQrCode', url: "" },
      { title: '二维码', name: 'qrCode', url: "" },
      { title: '无底高清', name: 'skuImage', url: "" },
      { title: '吊牌', name: 'handTag', url: "" }
    ]
  },
  skuId: '',
  data: {} as any,
  brand: {} as any,
  otherInfo: {
    color: '',
    material: ''
  }
})
const skuData = computed(() => {
  if (!state.data?.skuJson) return ''
  const item = state.data.skuJson.find((item: any) => item.skuId == state.skuId)
  return item
})

onBeforeMount(() => {
  const query: any = PageUtils.getCurQuery()
  state.skuId = query.skuId
  if (!state.skuId) {
    uni.navigateTo({
      url: '/pages/index'
    })
    return
  }
  getProduct()
})
function getProduct() {
  api.getProduct(state.skuId, { domain: uni.getStorageSync('subdomain') }).then((data: any) => {
    state.data = data
    const colorItem = state.data.labelJson.find((item: any) => item.labelNum == '10011')
    const materialItem = state.data.labelJson.find((item: any) => item.labelNum == '10010')
    if (colorItem) state.otherInfo.color = colorItem.labelParams.map((item: any) => item.name).join(',')
    if (materialItem) state.otherInfo.material = materialItem.labelParams.map((item: any) => item.name).join(',')
    brandInfo()
  })
}
function brandInfo() {
  api.brandInfo({ brandId: state.data.brandId }).then((data: any) => {
    state.brand = data
    const item = state.tab.list.find((item: any) => item.name == state.tab.active)
    onTab(item ? item.name : state.tab.list[0].name)
  })
}
function getBase64(data: any) {
  const blob = new Blob([data], { type: "image/jpg" })
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  });
}
function imageDetail() {
    console.log(state.otherInfo,'state.otherInfo');
    const item = state.tab.list.find((item: any) => item.name == 'detail')
  if (!item || item.url) return
  api.imageDetail({
    brandLogo: state.brand.brandLogo,
    skuImage: skuData.value.mainImg,
    model: skuData.value.model,
    productPrice: skuData.value.productPrice,
    salePrice: skuData.value.salePrice,
    skuId: state.skuId,
    domain: uni.getStorageSync("subdomain"),
    specify: `W${skuData.value.specWidth}*H${skuData.value.specHeight}*D${skuData.value.specLength}`,
    color: state.otherInfo.color,
    lights: skuData.value.lightSourceCount || '',
    material: state.otherInfo.material,
    isSJS: skuData.value.salePrice !== null ? 1 : 0,
  }).then((data: any) => {
    getBase64(data).then((base64: any) => {
      item.url = base64
    })
  })
}
function pictureAndQrCode() {
  const item = state.tab.list.find((item: any) => item.name == 'pictureAndQrCode')
  if (!item || item.url) return
  api.pictureAndQrCode({
    brandLogo: state.brand.brandLogo,
    skuImage: skuData.value.mainImg,
    model: skuData.value.model,
    skuId: state.skuId,
    domain: uni.getStorageSync("subdomain")
  }).then((data: any) => {
    getBase64(data).then((base64: any) => {
      item.url = base64
    })
  })
}
function qrCode() {
  const item = state.tab.list.find((item: any) => item.name == 'qrCode')
  if (!item || item.url) return
  api.imageQrCode({
    brandLogo: state.brand.brandLogo,
    model: skuData.value.model,
    skuId: state.skuId,
    domain: uni.getStorageSync("subdomain"),
  }).then((data: any) => {
    getBase64(data).then((base64: any) => {
      item.url = base64
    })
  })
}
function skuImage() {
  const item = state.tab.list.find((item: any) => item.name == 'skuImage')
  if (!item || item.url) return
  api.skuImage({
    brandLogo: state.brand.brandLogo,
    skuImage: skuData.value.mainImg,
    model: skuData.value.model,
    productPrice: skuData.value.productPrice,
    salePrice: skuData.value.salePrice,
    skuId: state.skuId,
    domain: uni.getStorageSync("subdomain"),
    specify: `W${skuData.value.specWidth}*H${skuData.value.specHeight}*D${skuData.value.specLength}`,
    color: state.otherInfo.color,
    lights: skuData.value.lightSourceCount || '',
    material: state.otherInfo.material,
    isSJS: skuData.value.salePrice !== null ? 1 : 0,
  }).then((data: any) => {
    getBase64(data).then((base64: any) => {
      item.url = base64
    })
  })
}
function handTag() {
  const item = state.tab.list.find((item: any) => item.name == 'handTag')
  if (!item || item.url) return
  api.handTag({
    brandLogo: state.brand.brandLogo,
    skuImage: skuData.value.mainImg,
    model: skuData.value.model,
    productPrice: skuData.value.productPrice,
    skuId: state.skuId,
    domain: uni.getStorageSync("subdomain"),
    specify: `W${skuData.value.specWidth}*H${skuData.value.specHeight}*D${skuData.value.specLength}`,
    classify: state.data.classify,
    brandName: state.brand.brandName,
    material: state.otherInfo.material
  }).then((data: any) => {
    getBase64(data).then((base64: any) => {
      item.url = base64
    })
  })
}
function onTab(name: string) {
  if (!skuData.value) return
  if (name == 'detail') {
    imageDetail()
  } else if (name == 'pictureAndQrCode') {
    pictureAndQrCode()
  } else if (name == 'qrCode') {
    qrCode()
  } else if (name == 'skuImage') {
    skuImage()
  } else if (name == 'handTag') {
    handTag()
  }
}
function goBack() {
  PageUtils.goBack()
}
</script>

<style lang="scss" scoped>
.top_tab {
  width: 100vw;
}
</style>
