<template>
  <view>
    <view class="card">
      <image
        class="image"
        @tap="scanCode"
        src="https://p1.meituan.net/csc/696924dda634f05689dabdfbb18e88cc13551.png" />
      <view class="mt-2 text-[#7A7A7A]">扫描二维码核销</view>
    </view>
    <view class="bg-white p-2">
      <view class="mt-2 text-center text-[#7A7A7A]">最近核销记录</view>
      <view v-if="list.length > 0">
        <view
          class="order-card"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetailPage(item)">
          <view class="top">
            <view class="text-[#9C9C9C] text-[25px]"
              >订单号：{{ item.oid }}</view
            >
            <view
              :style="{
                color:
                  item.status === 0
                    ? '#FF850A'
                    : item.status === 1
                      ? '#F83D3D'
                      : item.status === 2
                        ? '#333333'
                        : '#9C9C9C',
              }"
              >{{
                item.status === 0
                  ? '待付款'
                  : item.status === 1
                    ? '待使用'
                    : item.status === 2
                      ? '已使用'
                      : '已失效'
              }}
            </view>
          </view>
          <view class="line"></view>
          <view class="center" v-for="(itm, idx) in item.OrderGoods" :key="idx">
            <view class="top">
              <image class="mr-10" :src="itm.Goods.cover" />
              <view class="flex-1">
                <view class="title">{{ itm.Goods?.name }}</view>
                <view class="text-[#F83D3D] mt-5">
                  <view
                    >{{ itm.pay_price }}元
                    <text v-if="itm.pay_integral > 0"
                      >+{{ itm.pay_integral }}积分</text
                    >
                  </view>
                </view>
              </view>
              <view class="right">
                <view>x{{ itm.number }}</view>
              </view>
            </view>
          </view>
          <view
            class="flex justify-between items-center mt-2 mb-2 text-[25px]"
            v-if="item.status !== 0">
            <text class="text-[#9C9C9C]">共{{ item.count }}件商品</text>
            <text class="text-[26px] flex-1 text-right"
              >{{ item.status !== 0 ? '实' : '应' }}付款:
              {{ item.discount_price }} (元)
              <text v-if="item.exchange > 0"
                >积分抵扣: {{ item.exchange }}</text
              >
            </text>
          </view>
        </view>
      </view>
      <nut-empty v-else description="暂无数据"></nut-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import { getActiveOrderList } from '@/api/admin';
import { ref } from 'vue';

// url参数转对象
// const urlParse = (url: string) => {
//     const obj: any = {};
//     const reg = /[?&][^?&]+=[^?&]+/g;
//     const arr = url.match(reg);
//     if (arr) {
//         arr.forEach((item) => {
//             const tempArr = item.substring(1).split("=");
//             const key = decodeURIComponent(tempArr[0]);
//             const val = decodeURIComponent(tempArr[1]);
//             obj[key] = val;
//         });
//     }
//     return obj;
// };

const scanCode = () => {
  Taro.scanCode({
    onlyFromCamera: true,
    scanType: ['qrCode'],
    success: async res => {
      try {
        Taro.navigateTo({
          url: `/pages/admin/verify/verify_list/index?oid=${res.result}`,
        });
      } catch (error) {
        Taro.showToast({
          title: error.msg,
          icon: 'none',
        });
      }
    },
  });
};

Taro.useLoad(() => {
  getListOne();
});

const list = ref<any[]>([]);

const getListOne = async () => {
  try {
    const { data } = Taro.getStorageSync('userInfo');
    const res = await getActiveOrderList({
      PageNum: 1,
      PageSize: 1,
      bid: data.bid,
      status: 0,
    });
    list.value = [res.data.data[0]];

    console.log(list.value);
  } catch (error) {
    console.log(error);
  }
};

const toDetailPage = (item: any) => {
  Taro.setStorageSync('ver_order_info', item);
  Taro.navigateTo({
    url: '/pages/admin/order_manage/detail/index',
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  background-image: url('https://p0.meituan.net/csc/e6ff5582788af2023f49241afe22fc89391851.png');
  background-repeat: no-repeat;
  background-size: 100% 25%;
}

.card {
  width: 690px;
  height: 300px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 300px auto 50px auto;
  border-radius: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 100px;

  .image {
    width: 150px;
    height: 150px;
  }
}

.order-card {
  box-sizing: border-box;
  margin: 15px auto;
  background-color: #fff;
  padding: 20px;

  .line {
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    margin: 10px;
  }

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

  .btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .center {
    // margin-bottom: 10px;
    .top {
      display: flex;
      // justify-content: space-between;
      align-items: flex-start;

      image {
        width: 150px;
        height: 150px;
        border-radius: 15px;
        margin-right: 10px;
      }

      .title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        width: 350px;
      }

      .right {
        margin-left: 10px;
        font-size: 28px;
        text-align: right;
        color: #9c9c9c;
      }
    }
  }
}
</style>
