<template>

		<ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
			<div class="top" style="position: relative;overflow: hidden;">
				<!-- <SPuUploadImg v-model="formData.picUrl" :disabled="isDetail" /> -->
				<van-tabs v-model:active="activeName">
					<van-tab title="基本信息" name="info" />
					<van-tab title="价格/规格/型号" name="sku" />
					<van-tab title="详情" name="description" />
					<van-tab title="评价" name="comment" />
					<van-tab title="客服" name="service" />
					<van-tab title="售后" name="aftersale" />
					<van-tab title="物流设置" name="delivery" />
					<van-tab title="申请记录" name="apply" />
			</van-tabs>
			</div>
			<div class="bottom">
				<div v-show="activeName == 'info'">
					<InfoForm ref="infoRef" :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'sku'">
					<SkuForm ref="skuRef" :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'delivery'">
					<DeliveryForm ref="deliveryRef" :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'description'">
					<DescriptionForm ref="descriptionRef" :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'other' ">
					<OtherForm ref="otherRef" :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'comment' ">
					<Comment  :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'service'">
					<Service :is-detail="isDetail" :propFormData="formData" />
				</div>
				<div v-show="activeName == 'aftersale'">
					<AfterSale :productId="productId" openSource="Spu" />
				</div>
				<div v-show="activeName == 'apply'">
					<Apply :productId="productId" :propFormData="formData"/>
				</div>
			</div>

			<div style="clear: both;"></div>
		</ContentWrap>
		
		<div class="bottom-button" v-if="!checkStatus && checkPermi(['product:spu-apply:update'])">
      <el-form ref="formRef" v-loading="formLoading"  label-width="80px" style="display: flex;"  :model="formData">
        <el-form-item label="审核意见" prop="checkComment" style="border: none;width: 100%; ">
          <el-input v-model="state.checkComment" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
			<div class="flex">
				<el-button @click="goback" class="w-31">返 回</el-button>
				<el-button :disabled="formLoading" class="w-31" type="danger" @click="reject" v-hasPermi="['product:spu-apply:update']">拒绝</el-button>
				<el-button :disabled="formLoading" class="w-31" type="primary" @click="agree" v-hasPermi="['product:spu-apply:update']">同意</el-button>
			</div>
    </div>
	<!-- </div> -->

</template>

<script lang="ts" setup>

import * as ProductSpuApi from '@/api/mall/product/spu'
import InfoForm from './InfoForm.vue'
import DescriptionForm from './DescriptionForm.vue'
import OtherForm from './OtherForm.vue'
import SkuForm from './SkuForm.vue'
import DeliveryForm from './DeliveryForm.vue'
import Service from '../components/Service.vue'
import AfterSale from '@/components/ZxTemplate/AfterSale/AfterSale.vue'
import Apply from '../components/Apply.vue'
import Comment from '../components/Comment.vue'
import { checkPermi } from '@/utils/permission'
import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'

defineOptions({ name: 'ProductSpuForm' })
const { t } = useI18n() // 国际化
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口
const isDetail = ref(true) // 是否查看详情
const infoRef = ref() // 商品信息 Ref
const skuRef = ref() // 商品规格 Ref
const deliveryRef = ref() // 物流设置 Ref
const descriptionRef = ref() // 商品详情 Ref
const otherRef = ref() // 其他设置 Ref
// SPU 表单数据
const formData = ref<ProductSpuApi.Spu>({
	name: '', // 商品名称
	categoryId: undefined, // 商品分类
	keyword: '', // 关键字
	picUrl: '', // 商品封面图
	producerArea:'',
	spuType:undefined,
	sliderPicUrls: [], // 商品轮播图
	introduction: '', // 商品简介
	deliveryTypes: [], // 配送方式数组
	deliveryTemplateId: undefined, // 运费模版
	brandId: undefined, // 商品品牌
	specType: false, // 商品规格
	subCommissionType: false, // 分销类型
	skus: [
		{
			price: 0, // 商品价格
			marketPrice: 0, // 市场价
			costPrice: 0, // 成本价
			barCode: '', // 商品条码
			picUrl: '', // 图片地址
			stock: 0, // 库存
			weight: 0, // 商品重量
			volume: 0, // 商品体积
			promotionFee:0,
			mark:'',
			firstBrokeragePrice: 0, // 一级分销的佣金
			secondBrokeragePrice: 0 // 二级分销的佣金
		}
	],
	description: '', // 商品详情
	sort: 0, // 商品排序
	giveIntegral: 0, // 赠送佣金
	virtualSalesCount: 0 // 虚拟销量
})
const message = useMessage() // 消息弹窗
const route = useRoute();

const { push } = useRouter() // 路由跳转
const productId = ref(Number(route.params.id)) ;
const applyMemberUserId = ref(Number(route.params.applyMemberUserId)) ;
const checkStatus = ref(Number(route.params.checkStatus)) ;

/** 获得详情 */
const getDetail = async () => {
	const id = productId.value as any as number
	if (id) {
		formLoading.value = true
		try {
			const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
			res.skus?.forEach((item) => {
				if (isDetail.value) {
					item.price = floatToFixed2(item.price)
					item.marketPrice = floatToFixed2(item.marketPrice)
					item.costPrice = floatToFixed2(item.costPrice)
					item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
					item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
					item.highPrecisionPrice = item.highPrecisionPrice / 100
					item.settlementPrice = floatToFixed2(item.settlementPrice)
					item.highPrecisionSettlementPrice = item.highPrecisionSettlementPrice / 100
				} else {
					// 回显价格分转元
					item.price = formatToFraction(item.price)
					item.marketPrice = formatToFraction(item.marketPrice)
					item.costPrice = formatToFraction(item.costPrice)
					item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice)
					item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice)
					item.settlementPrice = formatToFraction(item.settlementPrice)
					item.highPrecisionSettlementPrice = item.highPrecisionSettlementPrice / 100
					item.highPrecisionPrice = item.highPrecisionPrice / 100
				}
			})
			formData.value = res
		} finally {
			formLoading.value = false
		}
	}
}

const state = reactive({
  id: '',
  checkComment: '',
  checkStatus: 0,
	applyMemberUserId:0
})
const goback = () => {
	push({ name: 'ProductSpu' })
}
// 拒绝审核
const reject = async () => {
  state.checkStatus = 2
  try {
    // 二次确认
    await message.confirm('拒绝申请?')
    await ProductSpuApi.apply(state).then(() => {
      // 提示成功
      message.success(t('common.success'))
			
			goback()

    })
  } catch {}
}
// 通过审核
const agree = async () => {
  state.checkStatus = 1
  try {
    // 二次确认
    await message.confirm('同意申请?')
    await ProductSpuApi.apply(state).then(() => {
      // 提示成功
      message.success(t('common.success'))
		
			goback()
    })
  } catch {}
}

onMounted(() => {
	getDetail()
	state.id = productId.value as any as string
	state.applyMemberUserId = applyMemberUserId as any 
  // 当子组件挂载时，改变父组件的样式
  document.getElementsByTagName('section')[1].style.padding = '0px';
  document.getElementsByTagName('section')[1].style.width = '100%';
  document.getElementsByTagName('section')[1].querySelector('div').style.border = 'none';
  document.getElementsByTagName('section')[1].style.background = '#f5f7f9';

});
onUnmounted(() => {
  // 当子组件卸载时，恢复父组件的原始样式
  document.getElementsByTagName('section')[1].style.width = 'auto';
  document.getElementsByTagName('section')[1].style.padding = '20px';
  document.getElementsByTagName('section')[1].style.background = 'var(--el-color-white)';

});
</script>
<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style>
<style scoped>
.w-31{
	font-size: 1rem;
	flex: 1
}
.bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: white;
	padding: 1rem;
	box-sizing: border-box;

}
</style>