<template>
<el-drawer title="订单详情" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
	<el-main>
		<el-descriptions :column="2" title="用户信息" border style="margin-top: 20px;">
			<el-descriptions-item label="头像" span="2"><el-avatar :src="detail.member?.avatar" /></el-descriptions-item>
			<el-descriptions-item label="用户ID">{{detail.member?.uid}}</el-descriptions-item>
			<el-descriptions-item label="购买人">{{detail.member?.username}}</el-descriptions-item>
			<el-descriptions-item label="用户昵称">{{detail.member?.nickname}}</el-descriptions-item>
			<el-descriptions-item label="联系电话">{{detail.member?.mobile}}</el-descriptions-item>
		</el-descriptions>

		<el-descriptions :column="2" title="订单信息" border style="margin-top: 20px;">
			<el-descriptions-item label="订单编号">{{detail.order_no}}</el-descriptions-item>
			<el-descriptions-item label="订单金额">{{detail.amount}}</el-descriptions-item>
			<el-descriptions-item label="支付时间" v-if="detail.pay_time">{{detail.pay_time}}</el-descriptions-item>
			<el-descriptions-item label="订单状态">
				<el-tag :type="detail.status == 0 ? 'warning' : detail.status == 1 ? 'primary' : detail.status == 2 ? 'success' : detail.status == 3 ? 'info' : 'danger'">{{ status[detail.status] }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="确认收货时间" v-if="detail.comfirm_time">{{detail.comfirm_time}}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions :column="1" title="收货信息" border style="margin-top: 20px;">
			<el-descriptions-item label="收货人">{{detail.delivery_info?.name}}</el-descriptions-item>
			<el-descriptions-item label="联系电话">{{detail.delivery_info?.mobile}}</el-descriptions-item>
			<el-descriptions-item label="收货地址">{{detail.delivery_info?.address}}</el-descriptions-item>
		</el-descriptions>

		<el-descriptions :column="1" border style="margin-top: 20px;" direction="vertical">
			<el-descriptions-item label="商品信息">
				<el-table :data="detail.detail" border>
					<el-table-column label="商品ID" prop="id" width="80" />
					<el-table-column label="商品图片" width="280">
						<template #default="scope">
							<el-image :src="scope.row.cover" style="height: 80px;"/>
						</template>
					</el-table-column>
					<el-table-column label="商品名称" prop="title" />
					<el-table-column label="购买数量" prop="num" width="120" />
					<el-table-column label="购买价格" prop="total_price" width="120" />
					<el-table-column label="操作" width="120">
						<template #default="scope">
							<el-button type="primary" @click="orderSend(scope.row)" v-if="scope.row.status == 1">发货</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-descriptions-item>
		</el-descriptions>
	</el-main>
	<template #footer>
	</template>
</el-drawer>
<send v-if="dialog.send" ref="sendBox" @success="upsearch" @closed="dialog.send=false" />
</template>

<script>
import send from "./send.vue"

export default {
	emits: ['success', 'closed'],
	components: {
		send
	},
	data() {
		return {
			mode: "add",
			form: {},
			rules: {
				title: [{required: true, message: '请输入商品名称'}]
			},
			dialog: { send: false },
			detail: {},
			visible: false,
			isSaveing: false,
			cache: {},
			status: {
				'-1': '已取消',
				0: '待付款',
				1: '待发货',
				2: '待收货',
				3: '已签收',
				4: '退货',
			}
		}
	},
	watch: {
		"form.operate"(value){
			this.priceTab = value[0]
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this;
		},
		async upsearch(){
			let res = await this.$API.order.lists.detail.get({id: this.detail.id})
			if(res.code == 1){
				this.detail = res.data
			}else{
				this.$message.error(res.message)
			}
		},
		orderSend(row){
			this.dialog.send = true
			this.$nextTick(() => {
				this.$refs.sendBox.open().setData(row)
			})
		},
		//表单注入数据
		setData(data){
			this.loading = true
			Object.assign(this.detail, data)
		}
	}
}
</script>
