<script setup>
	import { ref,onMounted,reactive,defineAsyncComponent,markRaw,shallowRef,computed } from 'vue'
	import { useRoute,useRouter } from 'vue-router'
	import { customerList,supplierList,sellerList,addLog,getLog }  from '@/api'
	import { inquiryInfo,inquiryGoodsList } from '@/api/inquiry'
	import { HomeFilled,Search,EditPen,Flag,ShoppingCartFull } from '@element-plus/icons-vue'
	import { useUserStore } from '@/store'
	const user_store = useUserStore()
	const userId = user_store.userId

	const route = useRoute()
	const router = useRouter()
	const order_id = ref(0)
	const order = ref({})
	const status = ref(0)
	const goods_list = ref([])

	const currentPage = ref('order')
	const startShow = ref(false)
	const tableHeight = ref(0)
	const load = async () => {
		order_id.value = route.params.id ? +route.params.id : 0
		currentPage.value = 'order'
		if(order_id.value != 0) {
			const {data:res} = await inquiryInfo(order_id.value)
			if(res.data.id && parseInt(res.data.id) == order_id.value) {
				order.value = res.data
				status.value = +order.value.status
				const { data:goods } = await inquiryGoodsList(order_id.value)
				goods_list.value = goods.data
			}
			changeStatus(status.value)
		}
		startShow.value = true
	}

	// const supplier_list = ref([])
	// const seller_list2 = ref([])
	// const supplierName = computed(() => (id) => {
    //     if(`${id}`.startsWith('G')) {
    //         let ids = `${id}`.split('-')
    //         let idx = seller_list2.value.findIndex(item => item.id == ids[0])
    //         if(idx != -1) {
    //             return seller_list2.value[idx].name
    //         }
    //     } else {
    //         let idx = supplier_list.value.findIndex(item => item.id == id)
    //         if(idx != -1) {
    //             return supplier_list.value[idx].name
    //         }
    //     }
    //     return 'unknown'
    // })

	onMounted(async () => {
		await load()
		if(userId !== order.value.creator && order_id.value != 0) {// && user_store.partner.findIndex(order.value.creator) !== -1) {
			router.replace('/error-page')
			return
		}
		tableHeight.value = window.innerHeight - 180
        // const {data:supplier} = await supplierList()
        // supplier_list.value = supplier.data.map(item => ({id:item.sid,name:item.sname,mobile:item.mobile}))
        // const {data:seller} = await sellerList()
        // seller_list2.value = seller.data.map(item => ({id:`G${item.id}`,name:`*商城*${item.seller_name}`,mobile:item.mobile}))
		comId.value = tabs['order'].component
	})

	const Base = defineAsyncComponent(() => import('@/components/Base.vue'))
	const Inquiry = defineAsyncComponent(() => import('@/components/Inquiry.vue'))
	const Offer = defineAsyncComponent(() => import('@/components/Offer.vue'))
	const comId = shallowRef(Base)
	const tabs = reactive({
		order: {
			label: '1.订单基础',
			icon: markRaw(HomeFilled),
			disabled: false,
			component: markRaw(Base)
		},
		inquiry: {
			label: '2.供应商询件',
			icon: markRaw(Search),
			disabled: true,
			component: markRaw(Inquiry)
		},
		offer: {
			label: '3.优选报价',
			icon: markRaw(EditPen),
			disabled: true,
			component: markRaw(Offer)
		},
	})

	const changeStatus = (status) => {
		switch(status) {
			case 0:
				// tabs.result.disabled = true
				if(goods_list.value.length == 0) {
					tabs.inquiry.disabled = true
					tabs.offer.disabled = true
				} else {
					tabs.inquiry.disabled = false
					tabs.offer.disabled = false
				}
				// tabs.order_result.disabled = true
				break
			case 1:
				// tabs.result.disabled = true
				tabs.inquiry.disabled = false
				tabs.offer.disabled = false
				// tabs.order_result.disabled = true
				break
			case 2:
			case 3:
				tabs.inquiry.disabled = false
				// tabs.offer.disabled = false
				// tabs.result.disabled = false
				// tabs.order_result.disabled = true
				break
			case 5:
				tabs.inquiry.disabled = true
				// tabs.offer.disabled = true
				// tabs.result.disabled = true
				// tabs.order_result.disabled = false
				break
			default:
				tabs.inquiry.disabled = true
				// tabs.offer.disabled = true
				// tabs.result.disabled = true
				// tabs.order_result.disabled = true
				break
		}
	}

	const handleChange = (tab,evt) => {
		comId.value = tabs[tab.props.name].component
	}

	const handleStatusChange = async (id) => {
		if(!id) {
			return
		}
		const { data:res } = await inquiryInfo(id)
		let status = 0
		let oldId = order_id.value
		if(res.data.id && parseInt(res.data.id) == id) {
			order_id.value = id
			order.value = res.data
			status = parseInt(order.value.status)
		}
		changeStatus(status)
		// if(parseInt(oldId) == 0) {
		// 	router.push({
		// 		path: '/pre-order/edit',
		// 		query: {
		// 			id
		// 		}
		// 	})
		// }
	}

	/*
	const Result = defineAsyncComponent(() => import('@/components/Result.vue'))
	const OrderResult = defineAsyncComponent(() => import('@/components/OrderResult.vue'))

	const tabs = reactive({
		order: {
			label: '1.订单基础',
			icon: markRaw(HomeFilled),
			disabled: false,
			component: markRaw(OrderBase)
		},
		inquiry: {
			label: '2.询货查价',
			icon: markRaw(Search),
			disabled: true,
			component: markRaw(Inquiry)
		},
		result: {
			label: '4.询盘结果',
			icon: markRaw(Flag),
			disabled: true,
			component: markRaw(Result)
		},
		order_result: {
			label: '5.客户订单',
			icon: markRaw(ShoppingCartFull),
			disabled: true,
			component: markRaw(OrderResult)
		}
	})



	const saveGoods = async (id) => {
		const {data:res} = await inquiryGoodsList(id)
		goods_list.value = res.data
		if(goods_list.value.length > 0) {
			tabs.inquiry.disabled = false
		} else {
			tabs.inquiry.disabled = true
		}
		changeStatus(parseInt(order.value.status))
	}

	const nextStep = async (id) => {
		if(!id) {
			return
		}
		const {data:res} = await inquiryInfo(id)
		let status = 0
		if(res.data.id && parseInt(res.data.id) == id) {
			order_id.value = id
			order.value = res.data
			status = parseInt(order.value.status)
		}
		changeStatus(status)
	}

	load()
*/
</script>

<template>
    <el-tabs v-model="currentPage" type="border-card" @tab-click="handleChange">
		<el-tab-pane v-for="(item,index) in tabs" :name="index" :key="index" :disabled="item.disabled">
			<template #label>
				<span class="tabs-label">
					<el-icon>
						<component :is="item.icon"></component>
					</el-icon>
					<span>{{item.label}}</span>
				</span>
			</template>
		</el-tab-pane>
		<Suspense v-if="startShow">
			<component
				@status-change="handleStatusChange"
				:is="tabs[currentPage].component"
				:order-id="order_id"
				:order-status="+order.status"
			/>
			<template #fallback>
				功能加载中，请稍候...
			</template>
		</Suspense>
				<!-- @make-order="makeOrder"
				@add-goods="saveGoods"
				@next-step="nextStep" -->
	</el-tabs>
</template>

<style scoped>
	.tabs-label .el-icon {
		vertical-align: middle;
	}
	.tabs-label span {
		vertical-align: middle;
		margin-left: 10px;
		font-weight: 600;
	}
</style>