<template>
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
	<el-main>
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="160px">
			<el-tabs v-model="activeName">
				<el-tab-pane label="基本信息" name="basic">
					<el-form-item label="商品名称" prop="title">
						<el-input v-model="form.title" placeholder="请输入商品名称" clearable />
					</el-form-item>
					<el-form-item label="所属店铺" prop="store_id">
						<sc-select v-model="form.store_id" :apiObj="$API.store.lists.list" :params="{status: 1}" :props="{label: 'title', value: 'id'}" style="width: 200px;" />
					</el-form-item>
					<el-form-item label="所属栏目" prop="category_id">
						<sc-select-tree v-model="form.category_id" :apiObj="$API.goods.category.list" multiple :props="{label: 'title', value: 'id'}" />
					</el-form-item>
					<el-form-item label="商品品牌" prop="brand_id">
						<sc-select v-model="form.brand_id" :apiObj="$API.goods.brand.list" :props="{label: 'title', value: 'id'}" style="width: 200px;" />
					</el-form-item>
					<el-form-item label="标签" prop="tags">
						<sc-tag-input v-model="form.tags" placeholder="请输入标签"/>
					</el-form-item>
					<el-form-item label="简述" prop="description">
						<el-input type="textarea" v-model="form.description" placeholder="请输入简述" clearable />
					</el-form-item>
					<el-form-item label="商品类型" prop="goods_type">
						<el-radio-group v-model="form.goods_type">
							<el-radio v-for="item in [{value: 1, title: '实体商品'}, {value: 2, title: '虚拟商品'}, {value: 0, title: '推广套餐'}]" :key="item.value" :label="item.title" :value="item.value" border />
						</el-radio-group>
					</el-form-item>
					<el-form-item label="工具" prop="stock">
						<el-checkbox v-model="form.is_recom" label="是否推荐" :true-value="1" :false-value="0" border />
						<el-checkbox v-model="form.is_hot" label="是否热门" :true-value="1" :false-value="0" border />
						<el-checkbox v-model="form.is_new" label="是否新品" :true-value="1" :false-value="0" border />
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input v-model="form.sort" placeholder="请输入排序" clearable style="max-width: 240px;" />
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-select v-model="form.status" placeholder="请选择状态" clearable style="max-width: 240px;">
							<el-option v-for="item in [{value: 0, title: '下架'}, {value: 1, title: '上架'}]" :key="item.value" :label="item.title" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="商品规格" name="spce">
					<el-form-item label="商品规格" prop="spec" v-if="form.goods_type != 0">
						<el-radio-group v-model="form.spec">
							<el-radio v-for="item in [{title: '单规格', value: 0}, {title: '多规格', value: 1}]" :key="item.value" :label="item.value" :value="item.value" border>{{item.title}}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-row>
						<el-col :span="12">
							<el-form-item label="原价" prop="original_price">
								<el-input type="number" v-model="form.original_price" placeholder="请输入原价" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="售价" prop="price">
								<el-input type="number" v-model="form.price" placeholder="请输入售价" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所需积分" prop="integral">
								<el-input type="number" v-model="form.integral" placeholder="请输入所需积分" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="库存" prop="stock">
								<el-input type="number" v-model="form.stock" placeholder="请输入库存" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="销量" prop="sales">
								<el-input v-model="form.sales" placeholder="请输入销量" clearable style="max-width: 240px;" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
						</el-col>
						<el-col :span="12" v-if="form.goods_type == 0">
							<el-form-item label="可兑换积分" prop="score">
								<el-input type="number" v-model="form.score" placeholder="请输入可兑换积分" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.goods_type == 0">
							<el-form-item label="可兑换等级" prop="level_id">
								<el-input type="number" v-model="form.level_id" placeholder="请输入可兑换等级ID" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否可重复分润" prop="is_repeat_buy">
								<el-switch v-model="form.is_repeat_buy" :active-value="1" :inactive-value="0" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="规格模版" prop="spec_template" v-if="form.spec == 1">
						<sc-table-select v-model="form.spec_template" :apiObj="$API.goods.spec.list" :props="{label: 'title', value: 'id'}" clearable style="width: 240px;">
							<el-table-column prop="title" label="规格名称" />
						</sc-table-select>
					</el-form-item>
					<el-form-item label="规格" prop="spec_list" v-if="form.spec == 1">
						<sc-spec v-model="form.spec_list" :sourceAttribute="form.spec_template" />
					</el-form-item>
					<el-form-item label="规格模版" prop="sku" v-if="form.spec == 1">
						<sc-sku v-model="form.sku" :spec="form.spec_list" />
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="商品内容" name="content">
					<el-form-item label="商品封面" prop="cover">
						<sc-upload v-model="form.cover" title="商品封面图" />
					</el-form-item>
					<el-form-item label="商品图片" prop="images">
						<sc-upload-multiple v-model="form.images" title="商品图片" />
					</el-form-item>
					<el-form-item label="商品内容" prop="content">
						<sc-editor v-model="form.content" placeholder="请输入商品内容" />
					</el-form-item>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</el-main>
	<template #footer>
		<el-button type="primary" @click="onSubmit">确认提交</el-button>
	</template>
</el-drawer>
</template>

<script>
import scEditor from '@/components/scEditor'
import scSku from '@/components/scSku'
import scSpec from '@/components/scSpec'

export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {add: '新增', edit: '编辑'},
			form: {goods_type: 1, is_repeat_buy: 1, operate: [], brand_id: '', category_id: [], spec_template: {}},
			rules: {
				title: [{required: true, message: '请输入商品名称'}],
				store_id: [{required: true, message: '请选择店铺'}],
				category_id: [{required: true, message: '请选择商品分类'}],
				title: [{required: true, message: '请输入商品名称'}]
			},
			visible: false,
			isSaveing: false,
			activeName: 'basic',
			operateList: [],
			priceTab: '',
			cache: {}
		}
	},
	components: {
		scEditor,
		scSku,
		scSpec
	},
	watch: {
		"form.operate"(value){
			this.priceTab = value[0]
		}
	},
	mounted() {},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this;
		},
		async getOperateList(goods_id){
			let res = await this.$API.goods.lists.operate.get({goods_id: goods_id});
			if(res.code == 1){
				this.operateList = res.data
				this.operateList.forEach(item => {
					this.form[item.value] = {}
					item.form.forEach(field => {
						this.form[item.value][field.name] = field.value
					})
				})
			}
		},
		//表单提交方法
		onSubmit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let res
					if(this.form.id){
						res = await this.$API.goods.lists.edit.post(this.form);
					}else{
						res = await this.$API.goods.lists.add.post(this.form);
					}

					this.isSaveing = false;
					if(res.code == 1){
						this.$emit('success', res.data)
						this.visible = false;
						this.$message.success("操作成功")
					}else{
						this.$message.error(res.message)
					}
				}
			})
		},
		//表单注入数据
		setData(data){
			this.loading = true
			Object.assign(this.form, data)
			this.form.category_id = []
			if(data.category && data.category.length > 0){
				this.form.category_id = data.category.map(item => item.id)
			}
			this.form.is_repeat_buy = this.form.is_repeat_buy ? this.form.is_repeat_buy : 0
			this.form.goods_type = this.form.goods_type ? this.form.goods_type : 0
			this.form.images = this.form.images ? this.form.images : []
			this.form.spec = this.form.spec ? this.form.spec : 0
			this.form.sku = this.form.sku ? this.form.sku : []
		}
	}
}
</script>
