<template>
 <el-drawer v-model="drawer" :title="dialogTitle" size="30%">
    <div>
      <el-descriptions title="收货信息1" :column="2" v-if="DetailData.orderType == 'takeout'">
        <el-descriptions-item label="用户昵称">{{ nickname }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ DetailData.realName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ DetailData.userPhone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{ DetailData.userAddress }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :column="1" v-if="DetailData.orderType != 'due'">
          <el-descriptions-item>
            <template #label>
              <div class="mylabel">
                菜品明细
              </div>
            </template>
            <div>
                <div style="background: linear-gradient(to bottom, #e9f1ee, #fcfcf4);padding: 20px 30px;margin: 10px 0;border-radius: 20px;" v-for="(item, index) in DetailData.appDeskOrderVo" :key="index">
                  <div class="flex align-center">
                    <div><el-avatar :size="50" :src="item.uavatar" /></div>
                    <div class="flex flex-1 justify-between font-size-sm text-color-assist">
                      <div class="flex flex-column ml-2">
                        <span>{{item.unickname}}</span>
                        <span>{{formatDate(item.addTime) }}</span>
                      </div>
                      <div style="">
                        <span style="color: #9acafc;font-weight: bold;">{{item.uidType == 'user' ? '用户点餐' : '员工帮点'}}</span>
                        <span style="color: #5ac725;">({{item.isOrder == 0 ? '未出餐' : '已出餐'}})</span>
                      </div>
                    </div>
                  </div>
                  <el-divider />
                  <div class="flex align-center" v-for="(good,index2) in item.appDeskOrderGoodsVos" :key="index2">
                    <div><el-image :src="good.image" style="width: 70px;height: 70px;" /></div>
                    <div class="flex  flex-1 flex-column ml-2 font-size-sm">
                        <div class="flex justify-between"><span class="font-weight-bolder">{{good.title}}</span><span style="color: #f56c6c;">{{good.spec}}</span></div>
                        <div class="flex justify-between mt-1"><span>¥{{good.price}}</span><span>x{{good.number}}</span></div>
                    </div>
                  </div>
                </div>
            </div>
          </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="商品明细" :column="1" v-else>
          <el-descriptions-item label="预约桌面">
              <table width="100%">
                <tr style="font-weight:bold;height:50px">
                  <td>图片</td>
                  <td>名称</td>
                  <td>价格</td>
                  <td>数量</td>
                </tr>
                <tr>
                    <td><el-image style="width: 40px; height: 40px" :src="DetailData.shopDeskDO.image" :fit="fit" /></td>
                    <td>{{ DetailData.shopDeskDO.title}}</td>
                    <td>￥0.00</td>
                    <td>x 1</td>
                </tr>
              </table>
          </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="订单信息" :column="2">
        <template #title>
          订单信息
          <el-tag  type="danger" v-if="DetailData.orderType=='desk'">堂食</el-tag>
          <el-tag  type="danger" v-if="DetailData.orderType=='takeout'">外卖</el-tag>
          <el-tag  type="danger" v-if="DetailData.orderType=='takein'">自取</el-tag>
          <el-tag  type="danger" v-if="DetailData.orderType=='due'">预约</el-tag>
        </template>
        <el-descriptions-item label="门店">{{ DetailData.shopName }}</el-descriptions-item>
        <el-descriptions-item label="取餐号" v-if="DetailData.orderType != 'due'">{{ DetailData.numberId }}</el-descriptions-item>
        <el-descriptions-item label="桌位号">{{ DetailData.deskNumber ? DetailData.deskNumber : '无' }}</el-descriptions-item>
        <el-descriptions-item label="就餐人数" v-if="DetailData.orderType != 'due'">{{ DetailData.deskPeople ? DetailData.deskPeople : '无' }}</el-descriptions-item>
        <el-descriptions-item label="订单号">{{ DetailData.orderId }}</el-descriptions-item>
        <el-descriptions-item label="预约时间" v-if="DetailData.orderType == 'due'">{{ formatDate(DetailData.dueTime) }}</el-descriptions-item>
        <el-descriptions-item label="到店时间" v-if="DetailData.orderType == 'due'">{{ DetailData.reachTime }}</el-descriptions-item>
        <el-descriptions-item label="预约人" v-if="DetailData.orderType == 'due'">{{ DetailData.realName }}</el-descriptions-item>
        <el-descriptions-item label="预约预留电话" v-if="DetailData.orderType == 'due'">{{ DetailData.userPhone }}</el-descriptions-item>
        <el-descriptions-item label="订单状态" v-if="DetailData.orderType != 'due'">{{ DetailData.statusStr }}</el-descriptions-item>
        <el-descriptions-item label="预约状态" v-if="DetailData.orderType == 'due'">
          <span v-if="DetailData.dueStatus == 1">预约中</span>
          <span v-else-if="DetailData.dueStatus == 2">已取消</span>
          <span v-else>已完成</span>
        </el-descriptions-item>
        <el-descriptions-item label="商品总数">{{ DetailData.totalNum }}</el-descriptions-item>
        <el-descriptions-item label="商品总价">{{ DetailData.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="支付邮费">{{ DetailData.payPostage }}</el-descriptions-item>
        <el-descriptions-item label="优惠券金额">{{ DetailData.couponPrice }}</el-descriptions-item>
        <el-descriptions-item label="积分抵扣">{{ DetailData.useIntegral }}</el-descriptions-item>
        <el-descriptions-item label="实际支付">{{ DetailData.payPrice }}</el-descriptions-item>
        <el-descriptions-item label="赠送积分">{{ DetailData.gainIntegral }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(DetailData.createTime)}}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ formatDate(DetailData.payTime) }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ DetailData.payType }}</el-descriptions-item>
      </el-descriptions>
      <!-- <el-descriptions title="物流信息" :column="2">
        <el-descriptions-item label="快递公司">{{ DetailData.deliveryName }}</el-descriptions-item>
        <el-descriptions-item label="快递单号">{{ DetailData.deliveryId }} <el-button type="primary" @click="getLogistic(DetailData.deliverySn,DetailData.deliveryId)">物流追踪</el-button></el-descriptions-item>
      </el-descriptions> -->
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in logisticResult"
          :key="index"
          :timestamp="activity.acceptTime"
        >
          {{ activity.acceptStation }}
        </el-timeline-item>
      </el-timeline>
      <!-- <el-button @click="innerDrawer = true">Click me!</el-button>
      <el-drawer
        v-model="innerDrawer"
        title="I'm inner Drawer"
        :append-to-body="true"
        :before-close="handleClose"
      >
        <p>_(:зゝ∠)_</p>
      </el-drawer> -->
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import * as StoreOrderApi from '@/api/mall/order/storeOrder'
import { formatDate } from '@/utils/formatTime'
//const message = useMessage() // 消息弹窗

const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const dialogTitle = ref('') // 弹窗的标题
const drawer = ref(false)
const DetailData = ref({})
const nickname = ref('')
const logisticResult = ref({})
const product = ref([])
const addProductMark = ref(0)
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  drawer.value = true
  dialogTitle.value = t('action.' + type)
  DetailData.value = await StoreOrderApi.getStoreOrder(id)
  nickname.value = DetailData.value.userRespVO ? DetailData.value.userRespVO.nickname : '--'
  product.value = DetailData.value.storeOrderCartInfoDOList
  //获取加餐数量
  if(DetailData.value.storeOrderCartInfoDOList.length > 0){
    addProductMark.value = DetailData.value.storeOrderCartInfoDOList[DetailData.value.storeOrderCartInfoDOList.length - 1].addProductMark
  }


  console.log('addProductMark.value:',addProductMark.value )
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

//const getLogistic = async(deliverySn,deliveryId) => {
//   const res  = await StoreOrderApi.getLogistic(deliverySn, deliveryId)
//   if (res.success == "false") {
//     message.error(res.reason)
//   }
//   logisticResult.value = res.traces
// }
</script>
<style scoped>
.flex{
	/* #ifndef APP-PLUS-NVUE */
	display:flex;
	/* #endif */
	flex-direction:row;
}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.align-center{ align-items: center; }
.flex-1{ flex: 1; }
.flex-column{ flex-direction:column!important; }
.ml-2 { margin-left: 20px; }
.mylabel {font-weight:bolder;text-align:center;font-size:18px}
</style>