<script setup lang="ts">
let pageTitle: any = ref("HOTKING-个人中心-订单管理-详情");
useHead(() => ({
  title: pageTitle.value,
}));
import { OrderDim } from "~/dim/order";
const user = useUserStore();
const route: any = useRoute();
const router: any = useRouter();
user.value.adminTitle =
  route.query.type == 1
    ? "待发货"
    : route.query.type == 2
    ? "已发货"
    : route.query.type == 3
    ? "已完成"
    : route.query.type == 4
    ? "已取消"
    : route.query.type == -1
    ? "待审核"
    : route.query.type == 0
    ? "待付款"
    : route.query.type == -2
    ? "审核不通过"
    : "";
import { DefaultQuery, pageSizes } from "~/domain/query";
import { useOrder } from "~/api/order/orderService";
import type OrderQuery from "~/api/order/orderQuery";
import { useAll } from "~/api/pubAll/service";
const { getOrderDetail, getWarehouseMapList, getOrderInvoice, cancelOrder } =
  useAll();
const { listOrders, getDetail } = useOrder();
const defaultSort = { column: "orderTime", isAsc: "descending" };
const defaultQuery = () => {
  const q = new DefaultQuery({
    orderByColumn: defaultSort.column,
    isAsc: defaultSort.isAsc,
  }) as OrderQuery;
  q.orderStatus = (route.query.type as string) || "";
  q.orderCode = (route.query.code as string) || "";
  return q;
};
let loading = ref(true);
const total = ref(0);
const pageData: any = ref({});
let pageGoods: any = ref([]);
let info: any = ref({});
let md: any = ref({});
let invoice: any = ref({});
const query: Ref<OrderQuery> = ref(defaultQuery());
const userInfo: any = useCookie("userInfo");
onMounted(async () => {
  if (!user.value?.userInfo?.id) {
    user.value.userInfo = userInfo.value;
  }
  if (!route.query.id) {
    ElMessage.error("网址异常，请刷新页面重新进入");
    router.go(-1);
  } else {
    // await getDetailFun();
    getDetailFun();
  }
});
async function getWarehouseMapListFun(id: any) {
  const res: any = await getWarehouseMapList(id);
  if (res.httpCode == 200) {
    md.value = res.data;
  }
}
async function getOrderInvoiceFun(id: any) {
  let res: any = await getOrderInvoice(id);
  if (res.httpCode == 200) {
    invoice.value = res.data;
  }
}
function linkToPay() {
  navigateTo({
    path: "/order/pay",
  });
}
function cancelConfirm(id: any) {
  ElMessageBox.confirm("确认取消订单吗？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then(() => {
      cancelOrderFun(id);
    })
    .catch(() => {
      // catch error
    });
}
async function cancelOrderFun(id: any) {
  let res: any = await cancelOrder(id);
  if (res.httpCode == 200) {
    ElMessage.success("取消成功");
    getDetailFun();
  }
}

function returnPrice(price: any) {
  return price.replace("00000.", "0.");
}
async function getDetailFun() {
  loading.value = true;
  const res: any = await getOrderDetail(route.query.id as any);
  if (res.httpCode == 200) {
    info.value = res.data;
    user.value.adminTitle =
      info.value.orderStatus == "1"
        ? "待发货"
        : info.value.orderStatus == "2"
        ? "已发货"
        : info.value.orderStatus == "3"
        ? "已完成"
        : info.value.orderStatus == "4"
        ? "已取消"
        : info.value.orderStatus == "-1"
        ? "待审核"
        : info.value.orderStatus == "0"
        ? "待付款"
        : info.value.orderStatus == "-2"
        ? "审核不通过"
        : "";
    getOrderInvoiceFun(res.data.id);
    getWarehouseMapListFun(res.data.warehouseId);
  }
  loading.value = false;
}
function linkTo(i:any) {
  navigateTo({
    path: "/product",
    query: {code:i.goodsId},
  });
}
function calcPriceFun(val: any) {
  return parseFloat(val).toFixed(2);
}
</script>
<template>
  <div class="admin-boxs-bg">
    <div class="admin-wrap">
      <div class="detail-wrap" v-loading="loading" :class="{cancel:info.orderStatus!=4&&info.orderStatus!=5&&info.orderStatus<1}">
        <div class="tips-wrap">
          <!-- 异常 -->
          <div class="tips-item tips-exception" v-if="info.orderStatus==-2">
            <h3><img src="@/assets/img/ico/state_exception.png">审核不通过</h3>
            <p>请联系客服</p>
          </div>
          <div class="tips-item tips-cancel" v-if="info.orderStatus==-1">
            <h3><img src="@/assets/img/ico/state_apply.png">审核中，请耐心等待</h3>
          </div>
          <div class="tips-item tips-cancel" v-else-if="info.orderStatus==0">
            <h3><img src="@/assets/img/ico/state_apply.png">待付款</h3>
          </div>
          <div class="tips-item tips-cancel" v-else-if="info.orderStatus==1">
            <h3><img src="@/assets/img/ico/state_apply.png">待发货</h3>
          </div>
          <div class="tips-item tips-cancel" v-else-if="info.orderStatus==2">
            <h3><img src="@/assets/img/ico/state_apply.png">已发货</h3>
          </div>
          <div class="tips-item tips-cancel" v-else-if="info.orderStatus==3">
            <h3><img src="@/assets/img/ico/state_apply.png">已完成</h3>
          </div>
          <div class="tips-item tips-cancel" v-else-if="info.orderStatus==4">
            <h3><img src="@/assets/img/ico/state_apply.png">已取消</h3>
          </div>
        </div>
        <div class="goods-wrap mb12">
          <div class="goods-item" v-for="(i,idx) in info.hktOrderGoods" :key="i.id" @click="linkTo(i)">
            <div class="sku-wrap">
              <div class="sku-img-item">
                <NuxtImg :src="i.goodsImg" loading="lazy" placeholder="/img/loading.png"></NuxtImg>
              </div>
              <div class="sku-img-info">
                <p class="text-overflow">{{i.goodsName}}</p>
                <p class="text-overflow">制造商料号：{{i.materialSn}}</p>
                <p class="text-overflow">我的料号：{{i.customerSn}}</p>
              </div>
            </div>
            <div class="sku-price">
              <h3 class="price">¥{{returnPrice(i.goodsPrice)}}</h3>
              <p>×{{i.goodsNum}} pcs</p>
            </div>
          </div>
        </div>

        <div class="price-wrap line-wrap  mb12">
          <div class="line-item line-total2"><span class="label">基本信息</span></div>
          <div class="line-item">
            <span class="label">订单号</span>
            <span class="val">{{info.orderSn}}
            </span>
          </div>
          <div class="line-item">
            <span class="label">用户名</span>
            <span class="val">{{user.userInfo.nickname}}</span>
          </div>
          <div class="line-item">
            <span class="label">支付状态</span>
            <span class="val">{{info.payStatus==0?'未支付':info.payStatus==1?'已付款':info.payStatus==2?'已付款':'付款失败'}}</span>
          </div>
          <div class="line-item">
            <span class="label">支付方式</span>
            <span class="val">{{info.payName!=0?info.payName:'-'}}</span>
          </div>
          <div class="line-item" v-if="info?.createTime">
            <span class="label">下单时间</span>
            <span class="val">{{info?.createTime.substring(0,19)}}</span>
          </div>
          <div class="line-item">
            <span class="label">付款时间</span>
            <span class="val">{{info.payTime!=0?info.payTime:'-'}}</span>
          </div>
          <div class="line-item">
            <span class="label">订单状态</span>
            <span class="val"><template v-if="info.orderStatus==-2">
                审核不通过
              </template>
              <template v-if="info.orderStatus==-1">
                待审核
              </template>
              <template v-if="info.orderStatus==0">
                待付款
              </template>
              <template v-if="info.orderStatus==1">
                待发货
              </template>
              <template v-if="info.orderStatus==2">
                已发货
              </template>
              <template v-if="info.orderStatus==3">
                已完成
              </template>
              <template v-if="info.orderStatus==4">
                <i>已取消</i>
              </template></span>
          </div>
          <div class="line-item">
            <span class="label">配送方式</span>
            <span class="val"><template v-if="info.isSample==1">
                邮寄到付
              </template>
              <template v-else-if="info.giveType==1">
                {{info.shippingName}}
              </template>
              <template v-else>
                -
              </template></span>
          </div>
          <div class="line-item">
            <span class="label">运费</span>
            <span class="val">¥{{info.shippingPrice}}</span>
          </div>
          <div class="line-item">
            <span class="label">提货码or发货单号</span>
            <span class="val">{{info.invoiceNo || '-'}}</span>
          </div>
          <div class="line-item line-total"><span class="label">实付金额</span><span class="val">¥{{calcPriceFun(info.totalAmount)}}</span></div>
        </div>

        <div class="price-wrap line-wrap  mb12" v-if="info.giveType==1">
          <div class="line-item line-total2"><span class="label">收货人信息</span></div>
          <div class="line-item">
            <span class="label">收货人</span>
            <span class="val">{{info.contacts}}</span>
          </div>
          <div class="line-item">
            <span class="label">手机号码</span>
            <span class="val">{{info.contactsMobile}}</span>
          </div>
          <div class="line-item">
            <span class="label">收货地址</span>
            <span class="val">{{info.province}}{{info.city}}{{info.district}}{{info.address}}</span>
          </div>
        </div>
        <div class="price-wrap line-wrap  mb12" v-if="info.giveType==2&&md">
          <div class="line-item line-total2"><span class="label">门店信息</span></div>
          <div class="line-item">
            <span class="label">门店名称</span>
            <span class="val">{{md.name}}</span>
          </div>
          <div class="line-item">
            <span class="label">门店号码</span>
            <span class="val">{{md.mobile}}</span>
          </div>
          <div class="line-item">
            <span class="label">提货地址</span>
            <span class="val">{{md.province}}{{md.city}}{{md.district}}{{md.addr}}</span>
          </div>
        </div>

        <div class="price-wrap line-wrap  mb12" v-if="invoice&&invoice.category!=0">
          <div class="line-item line-total2"><span class="label">发票信息</span></div>
          <div class="line-item">
            <span class="label">发票类型</span>
            <span class="val">{{invoice.category==1?'普通发票':'增值税专用发票'}}（{{invoice.type==1&&invoice.category!=2?'电子发票':'纸质发票'}}）</span>
          </div>
          <div class="line-item">
            <span class="label">发票抬头</span>
            <span class="val">{{invoice.title}}</span>
          </div>
          <div class="line-item">
            <span class="label">收票人电话</span>
            <span class="val">{{invoice.collectMobile}}</span>
          </div>
          <div class="line-item">
            <span class="label">发票内容</span>
            <span class="val">电子元器件</span>
          </div>
          <div class="line-item">
            <span class="label">开票状态</span>
            <span class="val">{{invoice.status==1?'已开票':'未开票'}}</span>
          </div>
          <div class="line-item">
            <span class="label">纳税人识别号</span>
            <span class="val">{{invoice.openTaxpayer}}</span>
          </div>
          <div class="line-item" v-if="invoice.type==2&&invoice.category!=2">
            <span class="label">收票人邮箱</span>
            <span class="val"><template v-if="invoice.collectEmail">
                {{invoice.collectEmail}}
              </template>
              <template else>&nbsp;</template></span>
          </div>

          <div class="line-item" v-if="invoice.type==2||invoice.category==2">
            <span class="label">收票地址</span>
            <span class="val">{{invoice.collectAddress}}</span>
          </div>
        </div>
        <div class="price-wrap line-wrap  mb12" v-if="info.userNote">
          <div class="line-item line-total2"><span class="label">备注信息</span></div>
          <div class="line-item">
            {{info.userNote}}
          </div>
        </div>

        <div class="buy-btn-wrap" v-if="info.orderStatus==0 ||(info.orderStatus!=4&&info.orderStatus!=5&&info.orderStatus<1)">
          <el-button class="btn_main cancel_btn" @click="cancelConfirm(info.id)" v-if="info.orderStatus!=4&&info.orderStatus!=5&&info.orderStatus<1">
            取消订单
          </el-button>
          <el-button class="btn_main" @click="linkToPay()" v-if="info.orderStatus==0">
            去付款
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.buy-btn-wrap {
  display: flex;
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  left: 0;
  padding: 0 30px;
  z-index: 1;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
  .btn_main {
    border-radius: 25px !important;
    flex: 1;
    height: 42px !important;
    &.cancel_btn{
      background: #e9e9e9 !important;
      color: #666 !important;
      border-color: #e8e8e8;
    }
    &.is-disabled {
      background: #e9e9e9;
      color: #fff;
    }
  }
}
.admin-wrap {
  background: unset;
}
.detail-wrap {
  padding: 12px;
  min-height: 200px;
  &.cancel {
    padding-bottom: 60px;
  }
}
.goods-wrap,
.line-wrap {
  padding: 12px;
  background: #fff;
  border-radius: 4px;
}
.tips-item {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  color: #fff;
  h3 {
    display: flex;
    align-items: center;
  }
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  p {
    padding-left: 21px;
    font-size: 12px;
  }
  &.tips-cancel {
    background: $mainColor;
  }
  &.tips-exception {
    background: rgb(250, 189, 6);
  }
  &.refundStatusYes {
    background: $mainColor;
    padding-top: 8px;
  }
  .refund-wrap {
    background: $mainColor;
    padding: 0;
    &.line-wrap .label {
      color: #fff;
    }
    &.line-wrap .line-item.line-total {
      .label,
      .val {
        color: #fff;
      }
    }
  }
}
.goods-item {
  display: flex;
  justify-content: space-between;
  & + .goods-item {
    margin-top: 12px;
  }
  .sku-wrap {
    display: flex;
    align-items: center;
  }
  .sku-price {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: right;
    h3 {
      font-size: 16px;
    }
    p {
      color: #999;
      text-align: right;
    }
  }
  .sku-img-item {
    width: 60px;
    min-width: 60px;
    height: 60px;
    position: relative;
    border-radius: 4px;
    img {
      flex-shrink: 1;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
      border-radius: 4px;
    }
  }
  .sku-img-info {
    margin-left: 8px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    max-width: 170px;
    p {
      span {
        margin-right: 5px;
        color: #666;
      }
    }
  }
}
.line-wrap {
  font-size: 14px;
  .line-item {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    &.line-total2 {
      line-height: 30px;
      margin-bottom: 5px;
      .label {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
    }
    &.line-total {
      line-height: 50px;
      margin-bottom: -12px;
      margin-top: 10px;
      border-top: 1px solid #e8e8e8;
      .label {
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .val {
        font-size: 20px;
        font-weight: bold;
        color: $mainColor;
      }
    }
  }
  .label {
    color: #999;
    min-width: 60px;
  }
  .val {
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: none;
    line-height: 20px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
.info-wrap {
  &.line-wrap {
    .val {
      background: #fff;
    }
  }
}
</style> 
