<template><page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="page">
    <h3 v-if="detailData.orderState==1">已下单</h3>
    <h3 v-if="detailData.orderState==2">已完成</h3> 
    <h3 v-if="detailData.orderState==3&&detailData.payState==3">已退单</h3>
    <h3 v-if="detailData.orderState==3&&detailData.payState==5">已取消</h3>
	<h3 v-if="detailData.orderState==4&&detailData.payState==1">未支付</h3>
	<h3 v-if="detailData.orderState==4&&detailData.payState==3">待下单</h3>
    <h3 v-if="detailData.orderState==4&&detailData.payState==4">支付失败</h3>
	
    
    <view class="appraise">
      <view>您对本单满意吗?</view>
      <view class="refund-btn" @click="refundOrder" v-if="detailData.orderState==1&&(detailData.canteenId=='378928463446282240')">
        退单
      </view>
	  <!-- <view class="refund-btn" @click="refundOrder" v-if="detailData.payState==4&&detailData.orderState==4">
	    申请退款
	  </view> -->
	  <view class="flex appraise-right" @click="goEvaluate" v-if="detailData.orderState==2&&detailData.commentState==2">
	    去评价
	    <u-icon name="arrow-right" size="12" />
	  </view>
    </view>
    <view class="cont">
		<view class="top-source m-8" style="display: flex;align-items: center;justify-content: space-between;">
			<view style="font-size: 28rpx;">
				订单类型: {{detailData.orderTypeStr}}
			</view>
			<view style="color: rgba(15, 39, 75, 0.8);font-weight: 400;font-size: 26rpx;">就餐日期: {{ detailData.orderDate }}</view>
		</view>
      <view class="flex m-8">
        <view class="flex align-center justify-between" style="width: 100%;font-weight: 600;">
          <view style="color: #0f274b;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;max-width: 80%;">{{ detailData.canteenName }}/{{detailData.stallName}}</view> 
          <view class="tag">{{ detailData.mealtimeName }}</view>
        </view>
      </view>
      <view class="img-cont m-8">
        <view class="img-list m-8" v-for="(item, index) in detailData.orderDetailList" :key="index">
			<view style="width: 100%;display: flex;justify-content: space-between;">
				<view style="width: 24%;">
					<u-image :src="item.goodsDishesImgUrl" width="100%" height="80px" />
				</view>
				<view style="width: 74%;display: flex;flex-direction: column;justify-content: space-between;padding: 10rpx;font-size: 24rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view style="font-weight: 600;font-size: 28rpx;">{{ item.goodsDishesName }}</view>
						<!-- <view style="color: red;" v-if="item.refundAmount>0">￥{{ (Number(item.salePrice/100)*item.quantity).toFixed(2) }}</view> -->
						<view style="font-size: 28rpx;">￥{{ (Number(item.salePrice/100)*item.quantity).toFixed(2) }}</view>
					</view>
					<view style="display: flex;justify-content: space-between;">
						<view style="font-size: 28rpx;">x{{ item.quantity }}</view>
						<view style="color: red;" v-if="item.refundAmount>0">已退款￥{{ (item.refundAmount/100).toFixed(2) }}</view>
					</view>
				</view>
			</view>
        </view>
      </view>
	  <view class="flex justify-between m-8 bt fs26">
	    订单金额
	    <view style="font-weight: 600;">￥{{ (detailData.realAmount/100).toFixed(2) }}</view>
	  </view>
      <view class="flex justify-between m-8 bt fs26">
        配送费
        <view style="font-weight: 600;">{{ detailData.deliveryAmount>0? "￥"+(detailData.deliveryAmount/100).toFixed(2):"免配送费" }}</view>
      </view>
      <view class="flex justify-between m-8 bt fs26">
        包装费
        <view style="font-weight: 600;">{{ detailData.packingAmount>0? "￥"+(detailData.packingAmount/100).toFixed(2):"免包装费" }}</view>
      </view>
      <view class="flex justify-between m-8 bt fs26">
        餐券金额
        <view style="color: red;font-weight: 600;">-￥{{ (detailData.couponAmount/100).toFixed(2) }}</view>
      </view>
      <view class="flex justify-between m-8 bt fs26">
        优惠金额
        <view style="color: red;font-weight: 600;">-￥{{ (detailData.discountsAmount/100).toFixed(2) }}</view>
      </view>
	  
	  <view class="flex justify-between m-8 bt fs26" v-if="detailData.refundAmount>0">
	    退款金额
	    <view style="font-weight: 600;">￥{{ (detailData.refundAmount/100).toFixed(2) }}</view>
	  </view>
	  
      <u-line />
      <view class="flex justify-between m-8 realAmount">
        实付金额
        <view>￥{{ (detailData.realAmount/100).toFixed(2) }}</view>
      </view>
    </view>
	
	<view class="order">
		<view class="flex justify-between m-8 bt fs26" style="align-items: center;">
		  配送方式
		  <view>{{ detailData.consigneeAddress ||'-'}}</view>
		</view>
		<view class="flex justify-between m-8 fs26" style="align-items: center;">
		  备注
		  <view>{{ detailData.remark ||'-'}}</view>
		</view>
	</view>
	
    <view class="order">
      <view class="m-8 fs26">订单二维码</view>
      <view class="qrcode">
        <canvas id="qrcode" canvas-id="qrcode" style="width: 175px; height: 175px"/>
      </view>
      <template >
      </template>
      <view class="flex justify-center fs26" style="font-size: 28rpx;">流水号: {{ detailData.mealCode }}</view>
      <u-line style="margin: 20px 0;" />
	  <view class="flex justify-between m-8 bt fs26">
	    取餐码
	    <view>{{ '-' }}</view>
	  </view>
      <view class="flex justify-between m-8 bt ">
        订单编号
        <view>{{ detailData.orderId }}</view>
      </view>
      <view class="flex justify-between m-8 bt fs26">
        创建时间
        <view>{{ detailData.orderTime }}</view>
      </view>
      <view class="flex justify-between m-8 bt fs26">
        支付时间
        <view>{{ detailData.payTime }}</view>
      </view>
      <view class="flex justify-between m-8 fs26">
        支付方式
        <view>{{ detailData.payTypeStr }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import uqrCode from '@/utils/uqrcode'
import { getOrderInfoAPI,getOrderPayTypeListAPI,getOrderSourceTypeListAPI,refundOrderApi } from '../../api/order/index'

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			orderId:"",
			payTypeList:[],//支付类型
			sourceTypeList:[],//订单来源
			typeList:[
				{id:"1",name:'当餐点餐'},{id:"2",name:'预订餐'},{id:"3",name:'自定义报餐'},{id:"4",name:'商城'},{id:"5",name:'预订商城'},{id:"6",name:'包间'},
				{id:"7",name:'餐桌'},{id:"8",name:'班车'},{id:"9",name:'3天报餐'},{id:"10",name:'7天报餐'},{id:"11",name:'线下消费'},{id:"12",name:'自助餐'},
				{id:"13",name:'到店扫码'},{id:"14",name:'到店扫码'},{id:"15",name:'美团外卖'},{id:"16",name:'美团到店'},{id:"21",name:'补扣'},{id:"22",name:'外部订单'},{id:"99",name:'其他'}
			],
			// 详情页数据
			detailData: {
				sourceType:0,
				
				// 订单状态
				orderState: '订单已完成',
				// 订单来源
				orderSource: '设备下线消费',
				// 餐厅名称
				canteenName: '宏远工业园/本周菜谱',
				// 餐次
				intervalName: '午餐',
				// 就餐时间
				diningTime: '2024-08-12',
				// 菜品
				dishes: [
				  {
					name: '苹果',
					imgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg',
					price: 10,
					num: 1
				  },
				  {
					name: '香蕉',
					imgUrl: 'https://img.yzcdn.cn/vant/banana.jpg',
					price: 5,
					num: 2
				  },
				  {
					name: '橘子',
					imgUrl: 'https://img.yzcdn.cn/vant/orange.jpg',
					price: 8,
					num: 1
				  }
				],
				// 配送费
				deliveryFee: '免配送费',
				// 包装费
				packingFee: '免包装费',
				// 餐券金额
				mealTicketAmount: '27',
				// 优惠金额
				discountAmount: '0.7',
				// 实付金额
				realAmount: '9.3',
				// 订单二维码
				qrCode: '',
				// 流水号
				serialNumber: '361',
				// 订单号
				orderNumber: '397944984700981249',
				// 创建时间
				createTime: '2025-01-05 06:57:08',
				// 支付时间
				payTime: '2025-01-03 22:56:23',
				// 支付方式
				payType: '小程序二维码支付'
			}
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params)
		console.log(options)
		this.orderId = options.orderId; 
		this.getPayTypeList()
		// this.getSourceTypeList() 
		this.getOrderDetail()
		this.generate('1223321312')
	},onShow() {
		this.getOrderDetail()
	},
	methods: {
		//退单
		refundOrder() {
			if(this.detailData.payState==3||this.detailData.payState==6){
				let param = {
					"macOrderId": this.detailData.macOrderId,
					"orderId": this.detailData.orderId,
					"remark": ""
				}
				this.$modal.confirm('确定退单吗？').then(() => {
					refundOrderApi(param).then((res) => {
						console.log(res)
						if(res.code==200){
							uni.showToast({
							  title: "操作成功",
							  icon: 'none'
							})
							setTimeout(()=>{
								this.getOrderDetail()
							},500)
						}else{
							uni.showToast({
							  title: res.msg,
							  icon: 'none'
							}) 
						}
					}) 
				})
			}
		},
		//评价按钮
		goEvaluate() {
			console.log('跳转订单详情', this.detailData)
			uni.navigateTo({
				url: `/pages/work/evaluate?params=${JSON.stringify(this.detailData)}`
			})
		},
		async getPayTypeList() {
		  try {
		    const res = await getOrderPayTypeListAPI({})
		    // console.log('?? ~ getList ~ res:', res)
			this.payTypeList=res
		  } catch (error) {
		    console.log(error)
		  }
		},
		async getSourceTypeList() {
		  try {
		    const res = await getOrderSourceTypeListAPI({})
		    // console.log('?? ~ getList ~ res:', res)
			this.sourceTypeList=res
		  } catch (error) {
		    console.log(error)
		  }
		},
		async getOrderDetail() {
			try {
				let param = {
					"orderId":this.orderId
				}
				const res = await getOrderInfoAPI(param)
				console.log('?? ~ getList ~ res:', res)
				this.detailData = res.data; 
				let str = `xnzn{"s":1,"y":2,"p":"${res.data.orderId}","t":${new Date().getTime()}}`
				this.generate(str)
				this.payTypeList.forEach((item=>{
					if(item.key==this.detailData.payType){
						this.detailData.payTypeStr = item.value
					}
				}))
				this.typeList.forEach((item=>{
					if(item.id==this.detailData.orderType){
						this.detailData.orderTypeStr = item.name
					}
				}))
			} catch (error) {
				console.log(error)
			}
		},
		// 生成二维码
		generate(e) {
		  console.log('?? ~ generate ~ e:', e)
		  uqrCode.make({
			canvasId: 'qrcode',
			componentInstance: this,
			text: e, // 想生成二维码到内容
			size: 175,
			margin: 0,
			backgroundColor: '#ffffff',
			foregroundColor: '#000000',
			fileType: 'jpg',
			errorCorrectLevel: uqrCode.errorCorrectLevel.H,
			success: res => {
			  // this.imgCode = res // base64的图片格式
			  // console.log('?? ~ generate ~ res:', res)
			}
		  })
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
  background: #f9fbff;
  padding: 16px;
  height: 95vh;
  overflow-y: auto;
  color: #0f274b;
}
.appraise {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  margin: 8px 0 20px;
  .appraise-right {
    color: #ff6816;
  }
  
  .refund-btn{
	  width: 100rpx;
	  height: 40rpx;
	  text-align: center;
	  line-height: 40rpx;
	  border-radius: 8rpx;
	  background: #ff6816;
	  color: #FFF;
  }
}
.m-8 {
  margin: 0 8px;
}
.bt {
  margin-bottom: 16px;
}
.fs26{
	font-size: 26rpx;
}
.cont {
  background: #fff;
  border-radius: 8px;
  padding: 8px 0;
  font-size: 26rpx;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  .top-source {
    font-weight: 800;
    margin-bottom: 12px;
  }
  .tag {
    margin-left: 5px;
    width: 52px;
    border-radius: 1px 1px 1px 1px;
    border: 1px solid #ff6816;
    color: #ff6816;
	font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .img-cont {
    margin: 20px 0;
    .img-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .name-num {
        margin-left: 10px;
      }
    }
  }
  .realAmount {
    margin-top: 16px;
    font-size: 32rpx;
    font-weight: 800;
  }
}
.order {
  margin-top: 16px;
  padding: 8px 0;
  background: #fff;
  border-radius: 8px;
  font-size: 26rpx;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  .qrcode{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px 0 12px;
  }
}
</style>
