<template>
	<div class="app-content">
		<!-- 商品基本信息 -->
		<form @submit="formSubmit">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">名称</div>
					<input v-model="form.goodsName" placeholder-class="phcolor" class="tui-input" name="goodsName" placeholder="请输入" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">已售</div>
					<input v-model="form.sold" placeholder-class="phcolor" class="tui-input" name="sold" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">库存</div>
					<input v-model="form.stock" placeholder-class="phcolor" class="tui-input" name="stock" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell category-wrap" :hover="false">
					<div class="tui-title">类型</div>
					<div class="tui-input">
						<block v-for="(item, index) in categoryData" :key="index">
							<button class="admin-button-com" :class="[form.categoryIdList.includes(item.id) ? '' : 'default']" @click="selCategoryFn(item)">{{ item.categoryName || '暂无' }}</button>
						</block>
					</div>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">价格</div>
					<input v-model="form.price" placeholder-class="phcolor" class="tui-input" name="price" placeholder="请输入" maxlength="50" type="number" />
					<div class="tui-prompt">元</div>
				</tui-list-cell>
				<!-- <tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title">分类</div>
					<div v-if="form.receiveFullAddress" class="tui-input">{{ form.receiveFullAddress }}</div>
					<div v-else class="tui-placeholder">请选择</div>
				</tui-list-cell>-->
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">节假日自动涨价</div>
					<label for="autoPrice" class="tui-input" @click="autoRiseChange(form.autoRise)">
						<checkbox id="autoPrice" class="ljd-checkbox" :checked="form.autoRise == 1"></checkbox>
						<span>需要</span>
					</label>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">配送方式</div>
					<label for="autoPrice" class="tui-input" @click="needSendChange(form.needSend)">
						<checkbox id="autoPrice" class="ljd-checkbox" :checked="form.needSend == 1" @change="giftChange"></checkbox>
						<span>到店自提</span>
					</label>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">运费</div>
					<radio-group class="tui-input flex-center-between" @change="freightChange">
						<label class="list" for="customLink">
							<radio id="customLink" value="0" :checked="form.freightType == 0" />
							<span class="checkbox-text">按距离收费</span>
						</label>
						<label class="list" for="goodsLink">
							<radio id="goodsLink" value="1" :checked="form.freightType == 1" />
							<span class="checkbox-text">免运费</span>
						</label>
					</radio-group>
				</tui-list-cell>
			</div>
			<!-- 商品图片 -->
			<div class="module-com input-line-wrap goods-wrap">
				<div class="module-tit">
					<span>商品图片</span>
					<span class="app-color-3">（最多上传4张）</span>
				</div>
				<div class="module-det">
					<app-uploader ref="appUploader" :imgList.sync="form.shopImg" :isMain="true" :num="4" />
				</div>
			</div>
			<!-- 商品简介 -->
			<div class="module-com input-line-wrap summary-wrap">
				<div class="module-tit">商品简介</div>
				<div class="module-det" style="padding-bottom: 10px">
					<!-- <span class="app-price">商品简介请在电脑端进行修改</span> -->
					<textarea v-model="form.briefContent" class="goods-summary" placeholder-class="phcolor" placeholder="请输入商品简介" />
				</div>
			</div>
			<!-- button -->
			<div class="app-footer">
				<button class="admin-button-com middle default" formType="submit" @click="status = 1">上架出售</button>
				<button class="admin-button-com middle blue" formType="submit" @click="status = 0">加入仓库</button>
			</div>
		</form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TuiListCell from '@/components/plugin/list-cell'
import AppUploader from '@/components/app-uploader'
const form = require('@/utils/formValidation.js')
// api
import { getCategory } from '@/utils/config'
import { getDetailB, addB, updateB } from '@/api/goods'
export default {
	name: 'goods-add',
	components: {
		TuiListCell,
		AppUploader
	},
	data() {
		return {
			// 上架状态
			status: 1,
			form: {
				goodsName: '',
				stock: '',
				price: '',
				categoryIdList: [],
				// goodsStyle: '1',
				// content: '',
				autoRise: '1',
				needSend: '0',
				freightType: '0',
				shopImg: []
				// goodsStyleList: [],
			}
		}
	},
	computed: {
		...mapGetters({ categoryData: 'getCategory' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			getCategory().then(() => {
				if (this.option.id) {
					this._getDet()
				}
			})
		},
		_getDet() {
			return getDetailB({ id: this.option.id }).then(res => {
				if (this.$util.isEmpty(res.data)) return
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res.data[i]
				})
			})
		},
		// 确认
		confirmFn() {
			let host = this.option.id ? updateB : addB
			let form = JSON.parse(JSON.stringify(this.form))
			form.shopImg = this.$util.imgSubstr(form.shopImg)
			host({
				status: this.status,
				...form
			}).then(res => {
				this.$msg('操作成功！')
			})
		},
		// operate
		selCategoryFn(item) {
			let index = this.form.categoryIdList.findIndex(e => e == item.id)
			if (index == -1) {
				this.form.categoryIdList.push(item.id)
			} else {
				this.form.categoryIdList.splice(index, 1)
			}
			console.log(this.form.categoryIdList)
		},
		autoRiseChange(e) {
			this.form.autoRise = e == '0' ? '1' : '0'
		},
		needSendChange(e) {
			this.form.needSend = e == '0' ? '1' : '0'
		},
		freightChange(e) {
			this.form.freightType = e.detail.value
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				{
					name: 'goodsName',
					rule: ['required'],
					msg: ['请输入商品名']
				}
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				setTimeout(() => {
					this.confirmFn()
				})
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 100px);
		padding-bottom: 100px;
	}
	// 公共模块
	.module-com {
		margin-bottom: 20px;
		background-color: #fff;
		color: $fontColor2;
		.module-tit {
			padding: 20px 30px;
			font-size: 28px;
			// font-weight: 600;
			// border-bottom: 1px solid $borderColor;
		}
		.module-det {
			padding: 0 30px;
		}
	}
	.category-wrap {
		align-items: flex-start;
		padding-bottom: 0 !important;
		.tui-input {
			@include disFlex(center, flex-start);
			flex-wrap: wrap;
			.admin-button-com {
				// width: 104px;
				margin-right: 20px;
				margin-bottom: 20px;
				// &:nth-child(4n + 1) {
				// 	margin-left: 0;
				// }
			}
		}
	}
	.summary-wrap {
		.goods-summary {
			height: 400px;
			// font-size: 24px;
		}
	}
	// button
	.app-footer {
		justify-content: space-evenly;
		.admin-button-com {
			width: 46%;
		}
	}
</style>
