<!-- 商品发布 - 基础设置 -->
<template>
	<el-form
ref="formRef" :model="formData" :rules="rules" :class="{ 'view': isDetail, 'mobile-card': mobile }"
		label-width="120px" :disabled="isDetail">
		<el-row>
			<el-col :span="12">
				<el-form-item label="名称" prop="name">
					<el-input
v-model="formData.name" placeholder="请输入商品名称" maxlength="100" :show-word-limit="true"
						:clearable="true" class="w-80!" />
				</el-form-item>
			</el-col>

			<el-col :span="12" v-if="isDetail">
				<el-form-item label="状态" prop="categoryStatus">
					<el-input v-model="status" class="w-80!" />
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="!isDetail">
				<el-form-item label="商品支付方式" prop="spuPayType">
					<el-select v-model="formData.spuPayType" placeholder="请选择商品支付方式" class="w-80">
						<el-option label="人民币" :value="1" />
						<el-option label="积分" :value="2" />
						<!-- <el-option label="看点" :value="3" /> -->
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="产地" prop="producerArea">
					<el-input v-model="formData.producerArea" placeholder="请输入商品产地" class="w-80!" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="商品类型" prop="spuType">
					<el-select v-model="formData.spuType" placeholder="请选择商品类别" class="w-80">
						<el-option label="实体商品" :value="1" />
						<el-option label="虚拟商品" :value="0" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="商品关键字" prop="keyword">
					<el-input v-model="formData.keyword" placeholder="请输入商品关键字" class="w-80!" />
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="商品分类" prop="categoryId">
					<el-cascader
v-model="formData.categoryId" :options="categoryList" :props="defaultProps" class="w-80"
						clearable placeholder="请选择商品分类" filterable />
				</el-form-item>
			</el-col>
		</el-row>
		<template v-if="isDetail">
			<el-row>
				<el-col :span="12">
					<el-form-item label="销量" prop="salesCount" v-if="isDetail">
						<el-input v-model="formData.salesCount" class="w-80!" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="规格" prop="specType" v-if="isDetail">
						<el-input v-model="specType" class="w-80!" />
					</el-form-item>
				</el-col>
			</el-row>

		</template>
		<el-row>
			<el-col :span="isDetail ? 12 : 24">
				<el-form-item label="价格高精度" prop="highPrecision">
					<el-select v-model="formData.highPrecision" class="w-80" disabled>
						<el-option label="否" :value="false" />
						<el-option label="是" :value="true" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12" v-if="isDetail">
				<el-form-item label="商品支付方式" prop="spuPayType">
					<el-select v-model="formData.spuPayType" placeholder="请选择商品支付方式" class="w-80">
						<el-option label="人民币+积分" :value="1" />
						<el-option label="纯积分" :value="2" />
						<!-- <el-option label="看点" :value="3" /> -->
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			
			<el-col :span="24">
				<el-form-item label="商品简介" prop="introduction">
					<el-input
v-model="formData.introduction" placeholder="请输入商品名称" type="textarea"
						:autosize="{ minRows: 2, maxRows: 2 }" maxlength="300" :show-word-limit="true" :clearable="true"
						resize="none" class="w-80!" />
				</el-form-item>
			</el-col>

		</el-row>
		<div v-if="mobile">
			<el-row>
				<el-col :span="12">
					<el-form-item style="border: none;" label="商品轮播图" prop="businessLicensePicture" />
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item prop="sliderPicUrls" class="sliderPicUrls">
						<UploadImgs v-model:modelValue="formData.sliderPicUrls" :limit="5" :fileSize="0.3" :disabled="isDetail" />
					</el-form-item>
				</el-col>
			</el-row>
		</div>
		<el-row v-else>
			<el-col :span="24">
				<el-form-item label="商品轮播图" prop="sliderPicUrls">
					<UploadImgs v-model:modelValue="formData.sliderPicUrls" :limit="5" :fileSize="0.3" :disabled="isDetail" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { defaultProps, handleTree } from '@/utils/tree'
import type { Spu } from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductBrandApi from '@/api/mall/product/brand'
import { BrandVO } from '@/api/mall/product/brand'
import { CategoryVO } from '@/api/mall/product/category'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)

defineOptions({ name: 'ProductSpuInfoForm' })
const props = defineProps({
	propFormData: {
		type: Object as PropType<Spu>,
		default: () => { }
	},
	isDetail: propTypes.bool.def(false) // 是否作为详情组件
})

const message = useMessage() // 消息弹窗

const formRef = ref() // 表单 Ref
const formData = reactive<Spu>({
	name: '', // 商品名称
	categoryId: undefined, // 商品分类
	keyword: '', // 关键字
	sliderPicUrls: [], // 商品轮播图
	introduction: '', // 商品简介
	brandId: undefined, // 商品品牌
	specType: false,
	salesCount: 0,
	status: 0,
	producerArea: '',
	spuType: undefined,
	spuPayType: undefined,
	deliveryTypes: [],
	deliveryTemplateId: undefined,
	highPrecision:false
})
const rules = reactive({
	name: [required],
	categoryId: [required],
	keyword: [required],
	introduction: [required],
	sliderPicUrls: [required],
	brandId: [required],
	spuType: [required],
	spuPayType: [required],
	producerArea: [required]
})
const specType = computed(() => {
	return formData.specType ? '多规格' : '单规格'
})
const status = computed(() => {

	switch (formData.status) {
		case 0:
			return "下架";
		case 1:
			return "上架"
		case -1:
			return "回收站"
	}

})


// 使用 inject 函数来注入 spuTypeChange
const spuTypeChange = inject('spuTypeChange');
watch(() => formData.spuType, (val) => {
	spuTypeChange.value = val;
	console.log(val)
	if(val){
		formData.highPrecision = false
	}else{
		formData.highPrecision = true
	}
},
{
	immediate: true
})
// 使用 inject 函数来注入 spuTypeChange
const highPrecisionChange = inject('highPrecisionChange');
watch(() => formData.highPrecision, (val) => {
	highPrecisionChange.value = val
},
{
	immediate: true
})
/** 将传进来的值赋值给 formData */
watch(
	() => props.propFormData,
	(data) => {
		if (!data) {
			return
		}
		copyValueToTarget(formData, data)
		// TODO @puhui999：优化多文件上传，看看有没可能搞成返回 v-model 图片列表这种
		formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
			url: item
		}))
	},
	{
		immediate: true
	}
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
	if (!formRef) return
	try {
		await unref(formRef)?.validate()
		// 校验通过更新数据

		Object.assign(props.propFormData, formData)

	} catch (e) {
		message.error('【基础设置】不完善，请填写相关信息')
		emit('update:activeName', 'info')
		throw e // 目的截断之后的校验
	}
}
defineExpose({ validate })

/** 初始化 */
const brandList = ref<BrandVO[]>([]) // 商品品牌列表
const categoryList = ref<CategoryVO[]>([]) // 商品分类树
onMounted(async () => {
	// 获得分类树
	const data = await ProductCategoryApi.getCategoryList({})
	categoryList.value = handleTree(data, 'id')
	// 获取商品品牌列表
	brandList.value = await ProductBrandApi.getSimpleBrandList()
})
</script>
<style src="./SpuComponents.css"  lang="scss" scoped></style>
