<template>
  <!-- el-dialog组件用于创建一个对话框，用于展示订单相关信息 -->
  <el-dialog
    v-model="visible"
    :title="!dataForm.orderNumber? '新增' : '查看'"
    :close-on-click-modal="false"
    width="80%"
  >
    <!-- el-form组件用于创建表单，这里用于承载订单信息的展示和相关操作表单 -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="80px"
      @keyup.enter="onSubmit()"
    >
      <div class="main">
        <div class="content">
          <div class="order-number">
            <div class="num-cont">
              <!-- el-form-item用于在表单中定义一个表单项，这里展示订单编号 -->
              <el-form-item label="订单编号:">
                <span class="text">{{ dataForm.orderNumber }}</span>
              </el-form-item>
              <el-form-item>
                <!-- el-steps组件用于展示步骤条，展示订单的不同流程状态 -->
                <el-steps
                  :active="stepsStatus"
                  align-center
                  :process-status="dataForm.status == 6? 'error':'wait'"
                >
                  <!-- el-step定义步骤条中的每一个步骤，这里展示“提交订单”步骤及其时间描述 -->
                  <el-step
                    title="提交订单"
                    :description="dataForm.orderTime"
                  />
                  <!-- 展示“买家已付款”步骤及其时间描述 -->
                  <el-step
                    title="买家已付款"
                    :description="dataForm.payTime"
                  />
                  <!-- 根据订单类型判断是否展示“卖家已发货”步骤及其时间描述 -->
                  <el-step
                    v-if="dataForm.orderType!== 1"
                    title="卖家已发货"
                    :description="dataForm.dvyTime"
                  />
                  <!-- 根据订单类型判断是否展示“买家已收货”步骤及其时间描述 -->
                  <el-step
                    v-if="dataForm.orderType!== 1"
                    title="买家已收货"
                    :description="dataForm.finallyTime"
                  />
                </el-steps>
              </el-form-item>
            </div>
          </div>
          <div class="order-state">
            <div class="state-cont">
              <div class="state-title">
                <!-- 展示订单状态的el-form-item，通过不同条件判断显示不同状态的标签 -->
                <el-form-item label="订单状态:">
                  <template #default>
                    <el-tag
                      v-if="dataForm.status === 1"
                      type="warning"
                    >
                      待付款
                    </el-tag>
                    <el-tag
                      v-if="dataForm.status === 2 && dataForm.orderType!== 1"
                      type="warning"
                    >
                      待发货
                    </el-tag>
                    <el-tag
                      v-if="dataForm.status === 3 && dataForm.orderType!== 1"
                      type="warning"
                    >
                      待收货
                    </el-tag>
                    <el-tag
                      v-if="dataForm.status === 4 && dataForm.orderType!== 1"
                      type="warning"
                    >
                      待评价
                    </el-tag>
                    <el-tag
                      v-if="dataForm.status === 5"
                      type="success"
                    >
                      成功
                    </el-tag>
                    <el-tag
                      v-if="dataForm.status === 6"
                      type="danger"
                    >
                      失败
                    </el-tag>
                  </template>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <!-- 根据订单状态和类型判断是否显示“发货”按钮，点击可触发changeOrder方法 -->
                    <el-button
                      v-if="dataForm.status === 2 && dataForm.orderType!== 1"
                      type="primary"
                      plain
                      @click="changeOrder(dataForm.orderNumber)"
                    >
                      发货
                    </el-button>
                  </el-row>
                </el-form-item>
              </div>
              <div class="order-info">
                <div class="order-details">
                  <div class="detail-title">
                    <img
                      src="~@/assets/img/car.png"
                      alt=""
                    >
                    <span class="prompt">买家付款后才可以发货</span>
                  </div>
                  <div class="detail-cont">
                    <div class="detail01">
                      <img
                        src="~@/assets/img/address.png"
                        alt=""
                      >
                      <div class="text-width">
                        <!-- 展示收货人相关信息的el-form-item -->
                        <el-form-item label="收货人:">
                          <span>{{ dataForm.userAddrOrder.receiver }}</span>
                        </el-form-item>
                        <el-form-item label="手机:">
                          <span>{{ dataForm.userAddrOrder.mobile }}</span>
                        </el-form-item>
                        <el-form-item label="收货地址">
                          <span>{{ dataForm.userAddrOrder.province }}{{ dataForm.userAddrOrder.city }}{{ dataForm.userAddrOrder.area }}{{ dataForm.userAddrOrder.addr }}</span>
                        </el-form-item>
                      </div>
                    </div>
                    <div class="detail01">
                      <img
                        src="~@/assets/img/invoice.png"
                        alt=""
                      >
                      <span>不开发票</span>
                    </div>
                  </div>
                </div>
                <div class="buyers">
                  <div class="detail-title">
                    <img
                      src="~@/assets/img/buyer.png"
                      alt=""
                      style="margin-right:15px"
                    >
                    <el-form-item
                      label="买家:"
                      style="margin-top:22px"
                      label-width="44px"
                    >
                      <span>{{ dataForm.nickName }}</span>
                    </el-form-item>
                  </div>
                  <div class="buyers-info">
                    <div class="detail02">
                      <img
                        src="~@/assets/img/message.png"
                        alt=""
                      >
                      <div class="text-width">
                        <span>买家备注:</span>
                        <br>
                        <span>{{ dataForm.remarks }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-list">
                <!-- el-table组件用于展示商品列表相关信息，如商品名称、价格、数量、总价等 -->
                <el-table
                  :data="dataForm.orderItems"
                  border
                >
                  <el-table-column
                    prop=""
                    label="商品"
                  >
                    <template #default="scope">
                      <div class="prod-con">
                        <img
                          :src="resourcesUrl + scope.row.pic"
                          class="prod-img"
                        >
                        <span>{{ scope.row.prodName }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="price"
                    label="单价"
                    width="180"
                    align="center"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.price }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="数量"
                    width="180"
                    align="center"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.prodCount }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="totalPrice"
                    label="总价"
                    width="180"
                    align="center"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.productTotalAmount }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="item-info">
                <!-- 展示商品总价的el-form-item -->
                <el-form-item label="商品总价:">
                  <span class="text">￥{{ dataForm.total }}</span>
                </el-form-item>
                <el-form-item
                  v-if="dataForm.freightAmount"
                  label="配送费用:"
                >
                  <span class="text">￥{{ dataForm.freightAmount }}</span>
                </el-form-item>
                <el-form-item label="应付金额:">
                  <span class="text">￥{{ dataForm.actualTotal }}</span>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="order-log">
            <div class="log-title">
              <span>订单日志</span>
            </div>
            <div class="log-cont">
              <!-- 根据不同的订单时间相关属性，展示对应的订单日志信息 -->
              <el-form-item
                v-if="dataForm.orderTime"
                label-width="10px"
              >
                <span>{{ dataForm.orderTime }} {{ dataForm.nickName }} 创建订单（成功）</span>
              </el-form-item>
              <el-form-item
                v-if="dataForm.updateTime"
                label-width="10px"
              >
                <span>{{ dataForm.updateTime }} {{ dataForm.nickName }} 订单更新（成功）</span>
              </el-form-item>
              <el-form-item
                v-if="dataForm.payTime"
                label-width="10px"
              >
                <span>{{ dataForm.payTime }} {{ dataForm.nickName }} 订单付款（成功）</span>
              </el-form-item>
              <el-form-item
                v-if="dataForm.dvyTime"
                label-width="10px"
              >
                <span>{{ dataForm.dvyTime }} {{ dataForm.nickName }} 订单发货（成功）</span>
              </el-form-item>
              <el-form-item
                v-if="dataForm.finallyTime"
                label-width="10px"
              >
                <span>{{ dataForm.finallyTime }} {{ dataForm.nickName }} 完成订单（成功）</span>
              </el-form-item>
              <el-form-item
                v-if="dataForm.cancelTime"
                label-width="10px"
              >
                <span>{{ dataForm.cancelTime }} {{ dataForm.nickName }} 取消订单（成功）</span>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>

    <!-- 弹窗组件，用于新增或修改相关操作，当devyVisible为真时显示，可通过@refresh-data-list监听事件刷新数据列表 -->
    <devy-add
      v-if="devyVisible"
      ref="devyAddRef"
      @refresh-data-list="getDataList"
    />
  </el-dialog>
</template>

<script setup>
import DevyAdd from './order-devy.vue'
import { ref, computed, watch, nextTick } from 'vue'
import http from '@/api/http' // 假设这是你的HTTP请求库
import { ElMessage } from 'element-plus'

// 获取环境变量中的资源URL
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL

// 定义表单数据对象，存储订单信息
const dataForm = ref({
  orderId: 0, // 订单ID
  orderNumber: '', // 订单编号
  remarks: '', // 备注
  total: 0, // 总金额
  actualTotal: 0, // 实际支付金额
  dvyType: '', // 发货类型
  status: 1, // 订单状态
  addrOrderId: 0, // 地址关联的订单ID
  nickName: '', // 用户昵称
  orderItems: [], // 订单项列表
  orderTime: '', // 下单时间
  updateTime: '', // 更新时间
  payTime: '', // 支付时间
  dvyTime: '', // 发货时间
  finallyTime: '', // 最终完成时间
  cancelTime: '', // 取消时间
  userAddrOrder: {} // 用户地址信息
})

// 计算属性，根据订单时间字段动态计算步骤条的状态
const stepsStatus = computed(() => {
  if (dataForm.value.finallyTime) {
    return 4 // 订单已完成
  }
  if (dataForm.value.dvyTime) {
    return 3 // 已发货
  }
  if (dataForm.value.payTime) {
    return 2 // 已支付
  }
  if (dataForm.value.orderTime) {
    return 1 // 已下单
  }
  return '' // 默认状态
})

// 控制对话框可见性的布尔值
const visible = ref(false)

// 控制发货对话框可见性的布尔值
const devyVisible = ref(false)

// 监听 `visible` 的变化，当关闭主对话框时也关闭发货对话框
watch(
  () => visible.value,
  (newValue) => {
    if (!newValue) {
      devyVisible.value = false
    }
  }
)

// 表单引用，用于调用表单方法（如重置）
const dataFormRef = ref(null)

/**
 * 初始化方法，打开对话框并加载订单信息
 * @param {String|Number} orderNumber - 订单编号
 */
const init = (orderNumber) => {
  dataForm.value.orderNumber = orderNumber || 0
  visible.value = true
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
  if (dataForm.value.orderNumber) {
    // 如果有订单编号，则获取订单详情
    http({
      url: http.adornUrl(`/order/order/orderInfo/${dataForm.value.orderNumber}`),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = data
    })
  }
}
defineExpose({ init }) // 将init方法暴露给父组件调用

/**
 * 获取订单信息的方法
 */
const getDataList = () => {
  http({
    url: http.adornUrl(`/order/order/orderInfo/${dataForm.value.orderNumber}`),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    dataForm.value = data
  })
}

// 发货组件引用
const devyAddRef = ref(null)

/**
 * 发货操作，打开发货对话框并初始化数据
 * @param {String|Number} orderNumber - 订单编号
 */
const changeOrder = (orderNumber) => {
  devyVisible.value = true
  nextTick(() => {
    devyAddRef.value?.init(orderNumber, dataForm.value.dvyId, dataFormRef.value?.dvyFlowId)
  })
}
</script>

<style scoped lang="scss">
// 定义主容器样式
.main {
  height: 100%; // 设置高度为100%，确保占满父容器
  width: 100%; // 设置宽度为100%，确保占满父容器
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; // 设置字体及备选字体
  color: #495060; // 设置文本颜色
}

// 定义内容区域样式
.content {
  margin: 0 20px; // 设置左右内边距为20px

  // 订单状态部分样式
  .order-state {
    position: relative; // 设置相对定位，允许内部元素绝对定位
    margin-top: 50px; // 设置顶部外边距为50px
    border-bottom: 1px solid #e9eaec; // 设置底部边框
  }
}

// 订单编号部分样式
.order-number {
  .text {
    font-size: 14px; // 设置字体大小
    color: #8a8a8a; // 设置文本颜色
  }
}

// 订单状态部分样式（重复定义，应合并）
.order-state {
  // 状态标题样式
  .state-title {
    width: 100%; // 设置宽度为100%
    display: flex; // 使用弹性布局
    justify-content: space-between; // 子元素两端对齐
    align-items: center; // 垂直居中对齐
  }

  // 订单信息样式
  .order-info {
    width: 100%; // 设置宽度为100%
    border-top: 1px solid #e9eaec; // 设置顶部边框
    margin: 50px 0; // 设置上下外边距为50px
    display: flex; // 使用弹性布局
  }

  // 单个商品信息样式
  .item-info {
    padding-left: 80%; // 设置左边内边距为80%（可能需要调整以适应布局需求）
    margin: 25px 0; // 设置上下外边距为25px
  }
}

// 订单信息部分样式
.order-info {
  img {
    width: 18px !important; // 设置图片宽度为18px并强制应用
    height: 18px !important; // 设置图片高度为18px并强制应用
    margin-right: 15px; // 设置右边外边距为15px
  }

  // 订单详情标题样式
  .detail-title {
    height: 50px; // 设置高度为50px
    line-height: 50px; // 设置行高为50px
    display: flex; // 使用弹性布局
    align-items: center; // 垂直居中对齐
  }

  // 订单详情部分样式
  .order-details {
    width: 50%; // 设置宽度为50%
    border-right: 1px solid #e9eaec; // 设置右侧边框
  }

  // 详情内容样式
  .detail-cont {
    position: relative; // 设置相对定位，允许内部元素绝对定位
    border-top: 1px dashed #e9eaec; // 设置顶部虚线边框
    margin: 15px 20px 0 0; // 设置上右外边距
  }

  // 购买者信息部分样式
  .buyers {
    width: 50%; // 设置宽度为50%
    margin-left: 20px; // 设置左侧外边距为20px
  }
}

// 详情内容样式（细节）
.detail-cont {
  .detail01 {
    display: flex; // 使用弹性布局
    height: 100%; // 设置高度为100%
    line-height: 25px; // 设置行高为25px
    margin-top: 15px; // 设置顶部外边距为15px
  }
}

// 文本宽度设置（重复定义，应合并）
.detail01,
.detail02 {
  .text-width {
    width: 100%; // 设置宽度为100%
  }
}

// 购买者信息部分样式（细节）
.buyers {
  .buyers-info {
    border-top: 1px dashed #e9eaec; // 设置顶部虚线边框
    margin-top: 15px; // 设置顶部外边距为15px
    position: relative; // 设置相对定位，允许内部元素绝对定位
  }

  .detail02 {
    display: flex; // 使用弹性布局
    height: 100%; // 设置高度为100%
    line-height: 25px; // 设置行高为25px
    margin-top: 15px; // 设置顶部外边距为15px
  }
}

// 单个商品信息样式（细节）
.item-info {
  span {
    margin-bottom: 15px; // 设置底部外边距为15px
    line-height: 30px; // 设置行高为30px
  }

  .text {
    position: absolute; // 设置绝对定位
    right: 0; // 设置靠右对齐
  }
}

// 订单日志部分样式
.order-log {
  .log-title {
    height: 50px; // 设置高度为50px
    width: 100%; // 设置宽度为100%
    line-height: 50px; // 设置行高为50px
    font-weight: bold; // 设置字体加粗
  }

  .log-cont {
    color: #4395ff; // 设置文本颜色为蓝色
  }
}

// 商品列表部分样式
.item-list {
  .prod-con {
    display: flex; // 使用弹性布局

    // 商品图片样式
    .prod-img {
      width: 100px; // 设置宽度为100px
      height: 100px; // 设置高度为100px
      margin-right: 8px; // 设置右边外边距为8px
    }
  }
}

// 深度选择器，用于覆盖第三方组件样式
:deep(.el-steps--horizontal) {
  flex: 25% 1 1; // 设置flex属性，控制步骤条的宽度
}
</style>
