<template>
	<el-dialog
v-model="dialogVisible" :title="dialogTitle" :fullscreen="isFullScreen" :show-close="false" width="70%"
		draggable class="dialog" destroy-on-close	>
		<template #header="{ close }">
			<div class="my-header">
				<div class="my-header-left">{{dialogTitle}}</div>
				<div class="my-header-right">
					<span @click="fullScreen">
						<Icon :icon="isFullScreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
					</span>
					<span @click="close">
						<el-icon>
							<Close />
						</el-icon>
					</span>
				</div>
			</div>
		</template>
		<ContentWrap v-loading="formLoading" style="max-height:560px;min-height:560px;overflow-y: auto;">
			<div class="left" style="position: relative;overflow: hidden;">
				<!-- 默认回显第一个商品的主图 -->
				<SPuUploadImg v-model="formData.items[0].picUrl" :disabled="true"  />
				<el-tabs v-model="activeName" tab-position="left" class="child-tabs">
					<el-tab-pane label="基本信息" name="info" />
					<el-tab-pane label="商品" name="product" />
          <el-tab-pane label="评价" name="comment" />
          <el-tab-pane label="客服" name="service" />
          <el-tab-pane label="售后" name="afterSale" />
          <el-tab-pane label="物流" name="logistics" />
          <el-tab-pane label="支付" name="pay" />
          <el-tab-pane label="日志" name="logs" />
				</el-tabs>

			</div>
		
			<div class="right">
				<div v-if="activeName == 'info'">
					<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" />
				</div>
        <div v-if="activeName == 'product'">
					<OrderProduct ref="infoRef" :is-detail="isDetail" :id="orderId" />
				</div>
        <div v-if="activeName == 'comment'">
					<OrderComment ref="infoRef" :is-detail="isDetail" :id="orderId" />
				</div>
        <div v-if="activeName == 'service'">
					<OrderService ref="infoRef" :is-detail="isDetail" :id="orderId" />
				</div>
        <div v-if="activeName == 'afterSale'">
					<AfterSale :orderId="orderId" openSource="Order"/>
					<!-- <OrderAfterSale ref="infoRef" :is-detail="isDetail" :id="orderId" /> -->
				</div>
        <div v-if="activeName == 'logistics'">
					<OrderLogistics ref="infoRef" :is-detail="isDetail" :id="orderId" />
				</div>
        <div v-if="activeName == 'pay'">
					<OrderPay ref="infoRef" :is-detail="isDetail" :id="orderId" />
				</div>
        <div v-if="activeName == 'logs'">
					<OrderLogs ref="infoRef" :is-detail="isDetail" :id="orderId" />
				</div>
			</div>

			<el-form style="clear: both;" v-if="activeName == 'info'">
				<el-form-item style="float: right">
					<el-button :loading="formLoading" type="primary" v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type && formData.status === TradeOrderStatusEnum.UNDELIVERED.status || formData.deliveryType === DeliveryTypeEnum.VIRTUAL_PRODUCT.type && formData.status === TradeOrderStatusEnum.UNDELIVERED.status"  @click="handleDelivery(formData.id,formData.spuType)">发货</el-button>
					<el-button :loading="formLoading" type="primary" v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type && formData.status === TradeOrderStatusEnum.UNDELIVERED.status" @click="updateAddress(formData.id,formData.receiverAreaName,formData.receiverMobile,formData.receiverAreaId,formData.receiverDetailAddress)">修改地址</el-button>
					<el-button :loading="formLoading" type="primary" v-if="formData.status === TradeOrderStatusEnum.COMPLETED.status"  @click="handleInvoice">开发票</el-button>
					<el-button :loading="formLoading" type="primary" @click="handleRemark(formData.id,formData.remark)">备注</el-button>
				</el-form-item>
			</el-form>
		</ContentWrap>
	</el-dialog>
	<!-- </div> -->
	<OrderDeliveryForm ref="deliveryFormRef" @success="close" />
	<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getBaseInfo" />
	<OrderUpdateAddressForm ref="updateAddressFormRef" @success="close" />
</template>
<script lang="ts" setup>
	import { cloneDeep } from 'lodash-es'
	import { useTagsViewStore } from '@/store/modules/tagsView'
	import DetailForm from '../detail/index.vue'
	import OrderBaseInfo from './OrderBaseInfo.vue'
	import OrderProduct from './OrderProduct.vue'
	import OrderComment from './OrderComment.vue'
	import OrderService from './OrderService.vue'
  import AfterSale from '@/components/ZxTemplate/AfterSale/AfterSale.vue'
	import OrderLogistics from './OrderLogistics.vue'
	import OrderPay from './OrderPay.vue'
  import OrderLogs from './OrderLogs.vue'
	import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
	import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
	import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
	import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
	import {
		Close
	} from '@element-plus/icons-vue'
	import { Icon } from '@/components/Icon'
	defineOptions({ name: 'ProductSpuForm' })
	//全屏/取消全屏弹窗
	const isFullScreen = ref(false)
	const fullScreen = () => {
		isFullScreen.value = !isFullScreen.value
	}
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const activeName = ref('info') // Tag 激活的窗口
	const isDetail = ref(false) // 是否查看详情
	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
  const orderId = ref(0)
	const formData = ref({})
	/** 打开弹窗 */

	const open = async (type:string,row:object,no:string) => {
    orderId.value = row.id
		formData.value = row
    dialogTitle.value = "查看-"+no
    activeName.value = "info"
    if ('view' == type) {
			isDetail.value = true
		} else {
			isDetail.value = false
		}
		dialogVisible.value = true
		isFullScreen.value = false
  }
		
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	// 当在页面使用 ref="baseInfoRef" 时，baseInfoRef.value 就可以获取到该组件的实例，从而可以调用其方法
	const baseInfoRef = ref()
	const getBaseInfo = () => {
		baseInfoRef.value?.getDetail()
	}
	/** 操作分发 */
	const deliveryFormRef = ref()
	const updateRemarkForm = ref()
	const updateAddressFormRef = ref() // 收货地址表单 Ref
	const updateAddress = (id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress) => {
		updateAddressFormRef.value.open(id,receiverName,receiverMobile,receiverAreaId,receiverDetailAddress)
	}
	const handleDelivery = (id,spuType) =>{
		deliveryFormRef.value?.open("订单列表",id,spuType)
	}
	const handleRemark = (id) => {
		updateRemarkForm.value?.open(id,"DetailOpen")
	}
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	
	/** 关闭按钮 */
	const close = () => {
		emit('success', true)
		dialogVisible.value = false
	}
	
</script>
<style type="text/css">
	.el-dialog__body {
		padding: unset;
	}

	.dialog .el-card__body {
		padding: 0 20px 20px 0;
	}

	.dialog .el-dialog__headerbtn {
		top: 0px;
		line-height: 60px;
	}

	.dialog .el-dialog__headerbtn:hover {
		background-color: #ef6b6b;
	}

	.dialog .el-dialog__headerbtn:hover .el-dialog__close {
		color: #fff;
	}

	.dialog .el-dialog__header {
		padding: 0;
		margin: 0
	}
</style>
<style lang="scss" scoped>
	::v-deep .left {
		width: 106px;
		float: left;

	}

	.child-tabs {
		border-top: 2px solid #e4e7ef;
		margin-top: -7px;
	}



	::v-deep .child-tabs .el-tabs__item {
		width: 106px;
		justify-content: center;
	}


	.right {
		padding: 10px 0 60px;
		border-left: 2px solid #e4e7ee;
		margin-left: -2px;
		float: left;
		width: calc(100% - 120px);
    
    padding-left: 10px;

	}



	.my-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left {
			// font-weight: bold;
			// font-size: 1rem;
			padding: 1rem;
			// padding-bottom: 10px
		}

		&-right {
			span {
				width: 55px;
				height: 55px;
				display: inline-block;
				line-height: 55px;
				text-align: center;
				cursor: pointer;
			}

			span:first-child:hover {
				background-color: #f6f6f6;
				// color: white
			}

			span:last-child:hover {
				background-color: #ef6b6b;
				color: white
			}
		}
	}
</style>