<template>
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <view class="container" style="padding: 20rpx">
    <view style="padding-bottom: 100rpx">
      <view class="bg-white">
        <view class="section">
          <!-- store info begin -->
          <list-cell :hover="false">
            <view class="w-100 d-flex align-items-center">
              <view class="d-flex flex-column w-60">
                <view
                  class="w-100 font-size-lg text-color-base text-truncate"
                  >{{ order.shop.name }}</view
                >
              </view>
              <view class="d-flex justify-content-end align-items-center w-40">
                <view
                  class="iconfont-yshop icon-mobile"
                  @click="makePhoneCall(order.shop)"
                  style="font-size: 45rpx; margin-right: 40rpx"
                ></view>
                <view
                  class="iconfont-yshop icon-location"
                  @click="openLocation(order.shop)"
                  style="font-size: 45rpx"
                ></view>
              </view>
            </view>
          </list-cell>
          <!-- store info end -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view
                v-if="order.paid == 0"
                class="d-flex align-items-center just-content-center mb-40"
              >
                <view class="font-size-lg text-color-error">订单未支付</view>
              </view>
              <view
                v-if="order.paid == 1 && order.refundStatus == 2"
                class="d-flex align-items-center just-content-center mb-40"
              >
                <view class="font-size-lg text-color-error">订单已退款</view>
              </view>
              <view
                v-if="order.paid > 0 && order.refundStatus == 0"
                class="d-flex align-items-center just-content-center"
              >
                <view class="sort-num">{{ order.numberId }}</view>
              </view>
              <!-- steps begin -->
              <view v-if="order.paid > 0 && order.refundStatus == 0" class="d-flex just-content-center">
                <view class="steps d-flex flex-column w-80">
                  <view class="steps__img-column">
                    <view class="steps__img-column-item">
                      <view class="iconfont-yshop icon-lamp"></view>
                    </view>
                    <view class="steps__img-column-item">
                      <view
                        class="iconfont-yshop icon-daojishi"
                        v-if="{ active: order.paid == 1 && order.status == 0 }"
                      ></view>
                      <view
                        class="iconfont-yshop icon-daojishi unactive"
                        v-else
                      ></view>
                    </view>
                    <view
                      class="steps__img-column-item"
                      v-if="order.orderType == 'takeout'"
                    >
                      <view
                        class="iconfont-yshop icon-takeout"
                        v-if="order.status == 1"
                      ></view>
                      <view
                        class="iconfont-yshop icon-takeout unactive"
                        v-else
                      ></view>
                    </view>
                    <view class="steps__img-column-item">
                      <view
                        class="iconfont-yshop icon-doorbell"
                        v-if="order.status >= 2"
                      ></view>
                      <view
                        class="iconfont-yshop icon-doorbell unactive"
                        v-else
                      ></view>
                    </view>
                  </view>
                  <view class="steps__text-column">
                    <view class="steps__text-column-item active">
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                      <view class="steps__text-column-item-text">已下单</view>
                      <view class="steps__column-item-line"></view>
                    </view>
                    <view
                      class="steps__text-column-item activ"
                      :class="{ active: order.paid == 1 }"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text">制作中</view>
                      <view class="steps__column-item-line"></view>
                    </view>
                    <view
                      class="steps__text-column-item"
                      :class="{ active: order.status == 1 }"
                      v-if="order.orderType == 'takeout'"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text">配送中</view>
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                    </view>
                    <view
                      class="steps__text-column-item"
                      :class="{ active: order.status >= 2 }"
                    >
                      <view class="steps__column-item-line"></view>
                      <view class="steps__text-column-item-text">
                        {{ order.orderType == "takeout" ? "已送达" : "请取餐" }}
                      </view>
                      <view
                        class="steps__column-item-line bg-transparent"
                      ></view>
                    </view>
                  </view>
                </view>
              </view>
              <!-- steps end -->
              <view
                v-if="order.status == 0 && order.paid > 0"
                class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-40"
              >
                您前面还有
                <text
                  class="text-color-primary mr-10 ml-10"
                  style="color: #52ac41"
                  >{{ order.preNum }}</text
                >
                单待制作
              </view>
              <!-- goods begin -->
              <view
                class="w-100 d-flex flex-column position-relative mt-30"
                style="margin-bottom: -40rpx"
              >
                <view
                  class="w-100 d-flex align-items-center mb-40"
                  v-for="(good, index) in order.products"
                  :key="index"
                >
                  <view class="d-flex flex-column w-60 overflow-hidden">
                    <view
                      class="font-size-lg text-color-base mb-10 text-truncate"
                      >{{ good.title }}</view
                    >
                    <view
                      class="font-size-sm text-color-assist text-truncate"
                      >{{ good.spec }}</view
                    >
                  </view>
                  <view
                    class="d-flex w-40 align-items-center justify-content-between pl-30"
                  >
                    <view class="font-size-base text-color-base"
                      >x{{ good.number }}</view
                    >
                    <view
                      class="font-size-base text-color-base font-weight-bold"
                      >￥{{ good.price }}</view
                    >
                  </view>
                </view>
              </view>
              <!-- goods end -->
            </view>
          </list-cell>
        </view>
        <view class="section">
          <!-- goods begin -->
          <list-cell :hover="false" padding="30rpx 30rpx">
            <view class="w-100 d-flex flex-column position-relative">
              <view
                class="w-100 d-flex align-items-center mb-40"
                v-for="(good, index) in order.cartInfo"
                :key="index"
              >
                <image
                  :src="good.image"
                  mode="aspectFill"
                  class="image"
                ></image>
                <view class="d-flex flex-column w-60 overflow-hidden">
                  <view
                    class="font-size-lg text-color-base mb-10 text-truncate"
                    >{{ good.title }}</view
                  >
                  <view class="font-size-sm text-color-assist text-truncate">{{
                    good.spec
                  }}</view>
                </view>
                <view
                  class="d-flex w-40 align-items-center justify-content-between pl-30"
                >
                  <view class="font-size-base text-color-base"
                    >x{{ good.number }}</view
                  >
                  <view class="font-size-base text-color-base font-weight-bold"
                    >￥{{ good.price }}</view
                  >
                </view>
              </view>
            </view>
          </list-cell>
          <!-- goods end -->
          <!-- payment and amount begin -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>支付方式</view>
                <view class="font-weight-bold">{{
                  order.statusDto.payType
                }}</view>
              </view>
              <view class="pay-cell">
                <view>订单金额</view>
                <view class="font-weight-bold">￥{{ order.totalPrice }}</view>
              </view>
              <view class="pay-cell">
                <view>打包费</view>
                <view class="font-weight-bold">￥{{ order.payBox }}</view>
              </view>
              <view class="pay-cell" v-if="order.orderType == 'takeout'">
                <view>配送费</view>
                <view class="font-weight-bold">￥{{ order.payPostage }}</view>
              </view>
              <view class="pay-cell">
                <view>优惠金额</view>
                <view class="font-weight-bold">￥{{ order.couponPrice }}</view>
              </view>
              <view class="pay-cell">
                <view>实付金额</view>
                <view class="font-weight-bold">￥{{ order.payPrice }}</view>
              </view>
            </view>
          </list-cell>
          <!-- payment and amount end -->
        </view>
        <view class="section">
          <!-- order info begin -->
          <list-cell :hover="false" padding="50rpx 30rpx">
            <view class="w-100 d-flex flex-column">
              <view class="pay-cell">
                <view>下单时间</view>
                <view class="font-weight-bold">{{
                  formatDateTime(order.createTime)
                }}</view>
              </view>
              <view class="pay-cell">
                <view>下单门店</view>
                <view class="font-weight-bold">{{ order.shop.name }}</view>
              </view>
              <view class="pay-cell">
                <view>订单号</view>
                <view class="font-weight-bold">{{ order.id }}</view>
              </view>
            </view>
          </list-cell>
          <!-- order info end -->
        </view>
        <!-- order other info begin -->
        <list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
          <view class="w-100 d-flex flex-column">
            <view class="pay-cell">
              <view>享用方式</view>
              <view class="font-weight-bold">{{
                order.orderType == "takein" ? "自取" : "外卖"
              }}</view>
            </view>
            <view class="pay-cell">
              <view>取餐时间</view>
              <view class="font-weight-bold">{{
                order.getTime ? formatDateTime(order.getTime) : "无"
              }}</view>
            </view>
            <view class="pay-cell">
              <view>制作完成时间</view>
              <view class="font-weight-bold">{{
                order.deliveryTime ? formatDateTime(order.deliveryTime) : "无"
              }}</view>
            </view>
            <view class="pay-cell">
              <view>备注</view>
              <view class="font-weight-bold">{{
                order.mark ? order.mark : "无"
              }}</view>
            </view>
          </view>
        </list-cell>
        <!-- order other info end -->
      </view>
      <view
        class="fixed-bottom flex justify-end bg-white p-2"
        v-if="order.paid > 0 && order.refundStatus == 0"
      >
        <view class="mr-1"
          ><uv-button
            type="success"
            v-if="order.status < 2"
            :plain="true"
            size="small"
            text="确认收到餐"
            @click="receive(order)"
          ></uv-button
        ></view>
        <!-- <view><uv-button type="warning" :plain="true" size="small" text="申请退款" @click="refund(order)"></uv-button></view> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { formatDateTime } from "@/utils/util";
import { orderDetail, orderReceive } from "@/api/order";
const title = ref("订单详情");
const order = ref({
  shop: { name: "" },
  statusDto: { payType: "" },
});
const numForMading = ref(5);

onLoad((option) => {
  detail(option.id);
});

const detail = async (id) => {
  let data = await orderDetail(id);
  if (data) {
    order.value = data;
  }
};
const openLocation = () => {
  let shop = order.value.shop;
  uni.openLocation({
    address: shop.addressMap + shop.address + " " + shop.name,
    latitude: parseFloat(shop.lat),
    longitude: parseFloat(shop.lng),
    fail(res) {
      console.log(res);
    },
  });
};
const makePhoneCall = () => {
  let shop = order.value.shop;
  uni.makePhoneCall({
    phoneNumber: shop.mobile,
    fail(res) {
      console.log(res);
    },
  });
};

// 确认收到货
const receive = async (order) => {
  let data = await orderReceive({ uni: order.orderId });
  if (data) {
    // await getOrders(true)
    uni.redirectTo({
      url: "/pages/components/pages/orders/detail?id=" + order.orderId,
    });
  }
};
//提交退款
const refund = (order) => {
  uni.navigateTo({
    url:
      "/pages/components/pages/orders/refund?orderId=" +
      order.orderId +
      "&payPrice=" +
      order.payPrice +
      "&totalPrice=" +
      order.totalPrice,
  });
};
</script>

<style lang="scss" scoped>
.image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
  border-radius: 8rpx;
}

.pay-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-base;
  color: $text-color-base;
  margin-bottom: 40rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

/* #ifdef H5 */
page {
  min-height: 100%;
  background-color: $bg-color;
}
/* #endif */
.order-box {
  padding: 20rpx;
  /* #ifdef H5 */
  margin-bottom: 100rpx;
  /* #endif */
}

.drinks-img {
  width: 260rpx;
  height: 260rpx;
}

.tips {
  margin: 60rpx 0 80rpx;
  line-height: 48rpx;
}

@mixin arch {
  content: "";
  position: absolute;
  background-color: $bg-color;
  width: 30rpx;
  height: 30rpx;
  bottom: -15rpx;
  z-index: 10;
  border-radius: 100%;
}

.section {
  position: relative;

  &::before {
    @include arch;
    left: -15rpx;
  }

  &::after {
    @include arch;
    right: -15rpx;
  }
}

.pay-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: $font-size-base;
  color: $text-color-base;
  margin-bottom: 40rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.sort-num {
  font-size: 64rpx;
  font-weight: bold;
  color: $text-color-base;
  line-height: 2;
}

.steps__img-column {
  display: flex;
  margin: 30rpx 0;

  .steps__img-column-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 80rpx;
      height: 80rpx;
    }
    .unactive {
      color: #919293;
    }
  }
}

.steps__text-column {
  display: flex;
  margin-bottom: 40rpx;

  .steps__text-column-item {
    flex: 1;
    display: inline-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-base;
    color: $text-color-assist;

    &.active {
      color: $text-color-base;
      font-weight: bold;

      .steps__column-item-line {
        background-color: $text-color-base;
      }
    }

    .steps__column-item-line {
      flex: 1;
      height: 2rpx;
      background-color: #919293;
      transform: scaleY(0.5);
    }

    .steps__text-column-item-text {
      margin: 0 8px;
    }
  }
}
.icon-lamp,
.icon-daojishi,
.icon-takeout,
.icon-doorbell {
  font-size: 60rpx;
}
.iconfont-yshop {
  color: #52ac41;
}
</style>
