<script setup>
import { ref } from "vue";
import {
  orderListApi,
  orderStatusApi,
  orderLadingApi,
  cartListApi,
} from "@/api/store.js";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import mitt from "@/utils/mitt.js";
import pay from "@/components/pay.vue";

const userStore = useUserStore();
const router = useRouter();

const formData = ref({});
mitt.on("set-order-detail", (res) => {
  formData.value = res;
});

const list = ref([]);

const payRef = ref(null);

const loading = ref(false);
const total = ref(0);
const activeStore = ref(0);
const activeStoreList = ref(["商品信息", "订单详情"]);

const orderLadingSn = ref("");
const dialogVisible = ref(false);
const orderLadingComfirm = (order_sn) => {
  orderLadingSn.value = order_sn;
  dialogVisible.value = true;
};
const orderLading = () => {
  dialogVisible.value = false;
  orderLadingApi({
    order_sn: orderLadingSn.value,
    staff_id: userStore.userInfo.service.service_id
  }).then((res) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
    router.push({
      name: "home",
    });
  });
};

const rePay = (row) => {
  payRef.value.setRePay({
    price: row.pay_price,
    order_id: row.group_order_id,
  });
  payRef.value.drawer = true;
};

const getOrderStatus = (id) => {
  orderStatusApi({
    order_sn: id,
  })
    .then((res) => {
      if (res.data.paid == 1 || res.message == "支付成功") {
        ElMessage({
          message: res.message,
          type: "success",
        });
        mitt.emit("update-order-detail", {});
        formData.value.paid = 1;
      } else {
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    })
    .catch((err) => {});
};
</script>

<template>
  <div class="my-order">
    <div class="header-nav">
      <div
        v-for="(item, index) in activeStoreList"
        :key="index"
        class="nav-item"
        :class="{
          'nav-item-active': activeStore == index,
          'nav-item-radius1': activeStore == index + 1,
          'nav-item-radius2': activeStore == index - 1,
        }"
        @click="activeStore = index"
      >
        {{ item }}
      </div>
      <div
        class="nav-item"
        :class="{
          'nav-item-radius2': activeStore == activeStoreList.length - 1,
        }"
        style="flex: 1"
      ></div>
    </div>
    <div class="detail" v-loading="loading">
      <div class="table" v-if="formData.orderProduct && activeStore == 0">
        <div style="font-size: 0.9rem">
          共计
          <span style="color: #ff4a00">{{ formData.total_num }}</span> 件商品
        </div>
        <el-table
          style="height: calc(100vh - 100px - 14rem)"
          :data="formData.orderProduct"
        >
          <el-table-column prop="cart_info.product.store_name" label="商品信息">
            <template #default="{ row }">
              <div style="display: flex; align-items: center">
                <el-image
                  style="height: 3rem; width: 3rem"
                  :src="
                    row.cart_info.productAttr.image ||
                    row.cart_info.product.image
                  "
                ></el-image>
                <span style="margin-left: 0.5rem">{{
                  row.cart_info.product.store_name
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="cart_info.productAttr.price"
            label="单价"
            width="150"
          />
          <el-table-column prop="product_num" label="数量" width="150" />
          <el-table-column prop="total_price" label="总价" width="150" />
        </el-table>
      </div>
      <div class="table" v-if="formData.orderProduct && activeStore == 1">
        <div class="table-title">订单信息</div>
        <div class="table-info">
          <div class="info-item">
            <div class="info-item-title">创建时间:</div>
            <div class="info-item-info">{{ formData.create_time }}</div>
          </div>
          <div class="info-item">
            <div class="info-item-title">商品总数:</div>
            <div class="info-item-info">{{ formData.total_num }}</div>
          </div>
          <div class="info-item">
            <div class="info-item-title">商品总价:</div>
            <div class="info-item-info">¥{{ formData.total_price }}</div>
          </div>
          <div class="info-item">
            <div class="info-item-title">支付时间:</div>
            <div class="info-item-info">{{ formData.pay_time }}</div>
          </div>
          <div class="info-item">
            <div class="info-item-title">优惠抵扣:</div>
            <div class="info-item-info">¥{{ formData.deduction_price }}</div>
          </div>
          <div class="info-item">
            <div class="info-item-title">实际支付:</div>
            <div class="info-item-info">¥{{ formData.pay_price }}</div>
          </div>
          <div class="info-item">
            <div class="info-item-title">支付方式:</div>
            <div class="info-item-info">
              <span v-if="formData.pay_type == 11">微信收款</span>
              <span v-if="formData.pay_type == 12">现金支付</span>
              <span v-if="formData.pay_type == 13">支付宝收款</span>
              <span v-if="formData.pay_type == 0">余额支付</span>
              <span v-if="formData.pay_type == 1">微信支付</span>
              <span v-if="formData.pay_type == 9">商户余额支付</span>
              <span v-if="formData.pay_type == 10">对公转账</span>
            </div>
          </div>
        </div>
        <div class="table-title" v-if="formData.service_info">收银员信息</div>
        <div
          class="table-info"
          v-if="formData.service_info"
          style="flex-direction: column"
        >
          <div class="info-item">
            <div class="info-item-title">头像:</div>
            <div class="info-item-info">
              <el-image
                style="height: 4rem; width: 4rem; border-radius: 50%"
                :src="formData.service_info.avatar"
              ></el-image>
            </div>
          </div>
          <div class="info-item">
            <div class="info-item-title">昵称:</div>
            <div class="info-item-info">
              {{ formData.service_info.nickname }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-item-title">账号:</div>
            <div class="info-item-info">
              {{ formData.service_info.account }}
            </div>
          </div>
        </div>
      </div>
      <div class="footer" v-if="formData.service_info">
        <div class="info">
          <div class="ser">收银员: {{ formData.service_info.nickname }}</div>
          <div class="price">
            实付: <span>¥{{ formData.pay_price }}</span>
          </div>
        </div>
        <div class="handle" v-if="!formData.paid">
          <el-button class="btn" type="primary" @click="rePay(formData)"
            >重新支付</el-button
          >
          <el-button
            class="btn"
            type="primary"
            @click="getOrderStatus(formData.order_sn)"
            >检测状态</el-button
          >
          <el-button
            class="btn"
            type="success"
            @click="orderLadingComfirm(formData.order_sn)"
            >提单</el-button
          >
        </div>
        <div class="handle" v-else>已支付</div>
      </div>
    </div>
    <pay ref="payRef" />
    <el-dialog v-model="dialogVisible" title="提示" width="500">
      <span
        >提单前请清空购物车, 避免提单的商品与购物车商品混合,
        请确保购物车内无数据后再进行提单</span
      >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="cartCount > 0" @click="goHome">
            前去清空购物车
          </el-button>
          <el-button v-else type="primary" @click="orderLading">
            确认提单
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.my-order {
  border-radius: 1.2rem;
  height: 100%;
  flex: 1;
  background-color: #fff;
  position: relative;
  overflow: hidden;

  .header-nav {
    display: flex;
    background: linear-gradient(
      to bottom,
      #f5f5f5 50%,
      #fff 50%
    ); /* 创建渐变背景 */
    .nav-item {
      height: 4rem;
      width: 8rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      background-color: #f5f5f5;
      border-radius: 1rem 1rem 0 0;
    }
    .nav-item-active {
      background-color: #fff;
      position: relative;
      transition: 300ms;
    }
    .nav-item-radius1 {
      border-radius: 0 0 1rem 0;
    }
    .nav-item-radius2 {
      border-radius: 0 0 0 1rem;
    }
  }
  .detail {
    height: calc(100vh - 100px - 4rem);
    box-sizing: border-box;
    position: relative;

    .table {
      padding: 1rem;
      padding-bottom: 6rem;

      .table-title {
        font-weight: bold;
        padding-top: 1rem;
      }
      .table-info {
        display: flex;
        flex-wrap: wrap;
        color: #777;
        font-size: 0.9rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-bottom: none;
        }

        .info-item {
          width: 33%;
          display: flex;
          padding-top: 1rem;
          .info-item-title {
            flex-shrink: 0;
            padding-right: 1rem;
          }
        }
      }
    }

    .footer {
      height: 6rem;
      box-sizing: border-box;
      padding: 0 1.5rem;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-shadow: 0 -1px 0.625rem #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      .info {
        display: flex;
        align-items: flex-end;
        .ser {
          font-weight: bold;
          margin-right: 1rem;
        }
        .price {
          margin-right: 1rem;
          span {
            color: #ff4a00;
            font-size: 1.2rem;
            font-weight: bold;
          }
        }
      }
      .handle {
        .btn {
          border-radius: 4rem;
          padding: 1.2rem;
        }
      }
    }
  }
}
</style>
