<template>
  <div class="my-order">
    <div class="header" @click="goBack">
      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 订单详情</span>
    </div>
    <div class="order-status">
      <div class="avatar-wrapper">
        <!-- <img v-if="shapeImage" class="avatar-back-img" :src="shapeImage" alt=""> -->
        <div class="avatar-front-box">
          <img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
        </div>
      </div>
    </div>
    <div class="status-info">
      <div class="status-title">{{ getStatus(order.status) }}</div>
      <div class="status-desc">
        下单后预计需要10天完成生产发货。如对产品有疑问，可以联系客服咨询。
      </div>
    </div>
    <div style="padding: 0 16px;">
      <van-divider />
    </div>
    <div class="product-info" v-if="order.use_type == 2">
      <div class="product-title">收货信息</div>
      <div class="product-details">
        <div class="product-row">
          <span class="product-label">收货人信息</span>
          <span class="product-value">{{order.contact_name}} {{order.contact_mobile}}</span>
        </div>
        <div class="product-row">
          <span class="product-label">收货地址</span>
          <span class="product-value">{{order.province_name}} {{order.city_name}} {{order.county_name}} {{order.address}}</span>
        </div>
      </div>
    </div>
    <div style="padding: 0 16px;" v-if="order.use_type == 2">
      <van-divider />
    </div>
    <div class="product-info">
      <div class="product-title">产品信息</div>
      <div class="product-details">
        <div class="product-row">
          <span class="product-label">产品名称</span>
          <span class="product-value" v-if="order.type_id == 1">{{ order.prod_id == 7 ? '人物立体徽章' : '宠物立体徽章' }}</span>
          <span class="product-value" v-if="order.type_id == 2">{{ order.prod_id == 7 ? '人物浮雕相框' : '宠物浮雕相框' }}</span>
          <span class="product-value" v-if="order.type_id == 3">{{ order.prod_id == 7 ? '人物冰箱贴' : '宠物冰箱贴' }}</span>
        </div>
        <div class="product-row">
          <span class="product-label">尺寸</span>
          <span class="product-value">{{order.model_size}}</span>
        </div>
        <div class="product-row" v-if="shape_name">
          <span class="product-label">形状</span>
          <span class="product-value">{{shape_name}}</span>
        </div>
        <div class="product-row">
          <span class="product-label">购买数量</span>
          <span class="product-value">{{order.count}}</span>
        </div>
      </div>
    </div>
    <!-- <div style="padding: 0 16px;">
      <van-divider />
    </div> -->
    <!-- <div class="address-info" style="padding: 0 16px;">
      <div class="address-title">收货信息</div>
      <div class="address-row">
        <img class="address-img" src="@/assets/badge/location.png" alt="" >
        <span class="address-name">张先生</span>
        <span class="address-phone">136****0731</span>
      </div>
      <div class="address-detail">
        详细地址详细地址详细地址详细地址详细地址详细地址
      </div>
    </div> -->
    <div style="padding: 0 16px;">
      <van-divider />
    </div>
    <div class="product-info">
      <div class="product-title">订单信息</div>
      <div class="product-details">
        <div class="product-row">
          <span class="product-label">购买订单id</span>
          <span class="product-value">{{order.sw_oid}}</span>
        </div>
        <div class="product-row">
          <span class="product-label">购买时间</span>
          <span class="product-value">{{order.pay_at}}</span>
        </div>
      </div>
    </div>
    <div style="height: 30px;"></div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import * as badgeApi from '@/api/badge';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const order = ref({})
const id = ref(0)
onMounted(() => {
  id.value = route.query.id
  getOrderDetail()
})

const shapeImage = ref('')
const imageUrl = ref('')
const getStyle = ref('')
const shape_name = ref('')

function getOrderDetail() {
  badgeApi.getOrderDetail({
    id: id.value,
  }).then(res => {
    order.value = res
    imageUrl.value = res.path
    shapeImage.value = res.shape_details.frame_path
    shape_name.value = res.shape_details.name
    // if (res.shape_details) {
    //   ImageShow(res.shape_details)
    // }
  })
}

const ImageShow = (item: any) => {
  const scale = 0.6
  const img = new Image()
  img.src = item.frame_path
  img.onload = () => {
    console.log('img', img)
    const ratioWidth = 320 / img.width;
    const ratioHeight = 320 / img.height;
    const x = item.axisx * ratioWidth * scale;
    const y = item.axisy * ratioHeight * scale;
    const path_width = item.width * ratioWidth * scale;
    const path_height = item.height * ratioHeight * scale;
    getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;transform: rotate3D(1, 1, 0, 0deg)`
  }
}

const router = useRouter();
function goBack() {
  router.back()
}
function getStatus(status: number) {
  if(status == 1) {
    return '待支付'
  } else if(status == 2) {
    return '已取消'
  } else if(status == 100) {
    return '生产中'
  } else if(status == 200) {
    return '待收货'
  } else if(status == 300) {
    return '已完成'
  }
}
</script>
<style scoped>
  .header {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 14px;
    color: #999;
    padding: 16px 16px 0 16px;
  }
  .back-icon {
    margin-right: 8px;
    color: #222;
    font-size: 16px;
    cursor: pointer;
  }
  .order-status {
    margin: 0 auto;
    width: 100vw;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .avatar-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
  }
  .avatar-back-img {
    position: absolute;
    width: 320px;
    height: 320px;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .avatar-front-box {
    width: 320px;
    height: 320px;
    position: absolute;
    z-index: 1;
  }
  .avatar-font-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .progress-image-item-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: inset 2px 2px 4px  rgba(255, 255, 255, 0.5),inset -2px -2px 4px  rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }
  .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  .status-info {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
  }
  .status-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin-bottom: 8px;
  }
  .status-desc {
    font-size: 10px;
    color: #888;
  }
  .product-info {
    width: 100%;
    padding: 0 16px;
  }

  .product-title {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
  }

  .product-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .product-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-label {
    color: #bdbdbd;
    font-size: 14px;
  }

  .product-value {
    color: #222;
    font-size: 14px;
  }
  
  .address-info {
    margin-top: 16px;
  }
  .address-title {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
  }
  .address-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #222;
    margin-bottom: 4px;
  }
  .address-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
  .address-name {
    margin-right: 12px;
    font-weight: bold;
  }
  .address-phone {
    color: #888;
    font-size: 13px;
    margin-left: 4px;
  }
  .address-detail {
    font-size: 12px;
    color: #bdbdbd;
    margin-left: 24px;
  }
</style>