<template>
	<div>
		<div class="i-layout-page-header header_top">
			<div class="i-layout-page-header fl_header">
				<router-link :to="{ path: '/admin/marketing/store_seckill/index' }"><Button icon="ios-arrow-back"
						size="small" type="text">返回</Button></router-link>
				<Divider type="vertical" />
				<span class="ivu-page-header-title mr20" style="padding: 0"
					v-text="$route.params.id ? '编辑租车商品' : '添加租车商品'"></span>
			</div>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Row type="flex" class="mt30 acea-row row-middle row-center">
				<Col span="20">
				<Steps :current="current">
					<Step title="选择租车商品"></Step>
					<Step title="填写基础信息"></Step>
					<Step title="修改商品详情"></Step>
				</Steps>
				</Col>
				<Col span="23">
				<Form class="form mt30" ref="formValidate" :model="formValidate" :rules="ruleValidate"
					@on-validate="validate" :label-width="labelWidth" :label-position="labelPosition"
					@submit.native.prevent>
					<FormItem label="选择商品：" prop="image_input" v-if="current === 0">
						<div class="picBox" @click="changeGoods">
							<div class="pictrue" v-if="formValidate.image">
								<img v-lazy="formValidate.image" />
							</div>
							<div class="upLoad acea-row row-center-wrapper" v-else>
								<Icon type="ios-camera-outline" size="26" class="iconfonts" />
							</div>
						</div>
					</FormItem>
					<Col v-show="current === 1" type="flex">
					<!-- <Col span="24">
					<FormItem label="商品主图：" prop="image">
						<div class="picBox" @click="modalPicTap('dan', 'danFrom')">
							<div class="pictrue" v-if="formValidate.image">
								<img v-lazy="formValidate.image" />
							</div>
							<div class="upLoad acea-row row-center-wrapper" v-else>
								<Icon type="ios-camera-outline" size="26" class="iconfont" />
							</div>
						</div>
					</FormItem>
					</Col> -->
					<Col span="24">
					<FormItem label="商品轮播图：" prop="images">
						<div class="acea-row">
							<div class="pictrue" v-for="(item, index) in formValidate.images" :key="index"
								draggable="true" @dragstart="handleDragStart($event, item)"
								@dragover.prevent="handleDragOver($event, item)"
								@dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)">
								<img v-lazy="item" />
								<Button shape="circle" icon="md-close" @click.native="handleRemove(index)"
									class="btndel"></Button>
							</div>
							<div v-if="formValidate.images.length < 10" class="upLoad acea-row row-center-wrapper"
								@click="modalPicTap('duo')">
								<Icon type="ios-camera-outline" size="26" class="iconfonts" />
							</div>
						</div>
					</FormItem>
					</Col>
					<Col span="24">
					<Col v-bind="grid">
					<FormItem label="商品标题：" prop="title" label-for="title">
						<Input placeholder="请输入商品标题" element-id="title" v-model="formValidate.title" />
					</FormItem>
					</Col>
					</Col>
					<Col span="24">
					<Col v-bind="grid">
					<FormItem label="简介：" prop="info" label-for="info">
						<Input placeholder="请输入简介" type="textarea" :rows="4" element-id="info"
							v-model="formValidate.info" />
					</FormItem>
					</Col>
					</Col>
					<Col span="24">
					<FormItem label="单位：" prop="unit_name" label-for="unit_name">
						<Input placeholder="请输入单位" element-id="unit_name" v-model="formValidate.unit_name"
							class="perW20" />
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="排序：">
						<InputNumber placeholder="请输入排序" element-id="sort" :precision="0" :max="10000" :min="0"
							v-model="formValidate.sort" class="perW10" />
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="以租代购：" props="car_lease" label-for="car_lease">
						<RadioGroup element-id="car_lease" v-model="formValidate.car_lease">
							<Radio :label="1" class="radio">是</Radio>
							<Radio :label="0">否</Radio>
						</RadioGroup>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem v-if="formValidate.car_lease==1" label="还款月份：" props="several_months">
						<InputNumber placeholder="请输入还款月份" element-id="several_months" :precision="0" :max="100" :min="0"
							v-model="formValidate.several_months" class="perW10" />
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="规格选择：">
						<Table :data="specsData" :columns="columns" border @on-selection-change="changeCheckbox">
							<template slot-scope="{ row, index }" slot="price">
								<InputNumber v-model="row.price" :min="0.01" :precision="2" class="priceBox" @on-change="
                          (e) => {
                            changePrice(e, index);
                          }
                        " :active-change="false"></InputNumber>
							</template>
							<template slot-scope="{ row, index }" slot="pic">
								<div class="acea-row row-middle row-center-wrapper"
									@click="modalPicTap('dan', 'danTable', index)">
									<div class="pictrue pictrueTab" v-if="row.pic">
										<img v-lazy="row.pic" />
									</div>
									<div class="upLoad pictrueTab acea-row row-center-wrapper" v-else>
										<Icon type="ios-camera-outline" size="21" />
									</div>
								</div>
							</template>
						</Table>
					</FormItem>
					</Col>
					</Col>
					<Row v-show="current === 2">
						<Col span="24">
						<FormItem label="内容：">
							<WangEditor style="width: 90%" :content="formValidate.description"
								@editorContent="getEditorContent"></WangEditor>
						</FormItem>
						</Col>
					</Row>
					<Col span="24">
					<FormItem>
						<Button class="submission mr15" @click="step" v-show="current !== 0"
							:disabled="$route.params.id && current === 1">上一步
						</Button>
						<Button :disabled="submitOpen && current === 2" type="primary" class="submission"
							@click="next('formValidate')" v-text="current === 2 ? '提交' : '下一步'"></Button>
					</FormItem>
					</Col>
				</Form>
				<Spin size="large" fix v-if="spinShow"></Spin>
				</Col>
			</Row>
		</Card>
		<!-- 选择商品-->
		<Modal v-model="modals" title="商品列表" class="paymentFooter" footerHide scrollable width="900"
			@on-cancel="cancel">
			<goods-list ref="goodslist" @getProductId="getProductId"></goods-list>
		</Modal>
		<!-- 上传图片-->
		<Modal v-model="modalPic" width="950px" scrollable footer-hide closable title="上传商品图" :mask-closable="false"
			:z-index="888">
			<uploadPictures :isChoice="isChoice" @getPic="getPic" @getPicD="getPicD" :gridBtn="gridBtn"
				:gridPic="gridPic" v-if="modalPic"></uploadPictures>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import goodsList from '@/components/goodsList/index';
	import WangEditor from '@/components/wangEditor/index.vue';
	import uploadPictures from '@/components/uploadPictures';
	import {
		productAttrsApi
	} from '@/api/marketing';
	import {
		rentAdd,
	} from '@/api/rent';
	export default {
		name: 'storeSeckillCreate',
		components: {
			goodsList,
			uploadPictures,
			WangEditor,
		},
		data() {
			return {
				submitOpen: false,
				spinShow: false,
				isChoice: '',
				current: 0,
				modalPic: false,
				grid: {
					xl: 12,
					lg: 20,
					md: 24,
					sm: 24,
					xs: 24,
				},
				gridPic: {
					xl: 6,
					lg: 8,
					md: 12,
					sm: 12,
					xs: 12,
				},
				gridBtn: {
					xl: 4,
					lg: 8,
					md: 8,
					sm: 8,
					xs: 8,
				},
				modals: false,
				modal_loading: false,
				images: [],
				formValidate: {
					images: [],
					info: '',
					title: '',
					image: '',
					unit_name: '',
					price: 0,
					sales: 0,
					sort: 0,
					status: 0,
					description: '',
					id: 0,
					product_id: 0,
					several_months:12,//还款月份
					car_lease:0,//默认关闭以租代购
					attrs: [],
					items: [],
				},
				description: '',
				columns: [],
				specsData: [],
				picTit: '',
				tableIndex: 0,
				ruleValidate: {
					image: [{
						required: true,
						message: '请选择主图',
						trigger: 'change'
					}],
					images: [{
							required: true,
							type: 'array',
							message: '请选择主图',
							trigger: 'change',
						},
						{
							type: 'array',
							min: 1,
							message: 'Choose two hobbies at best',
							trigger: 'change',
						},
					],
					title: [{
						required: true,
						message: '请输入商品标题',
						trigger: 'blur'
					}],
					info: [{
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					}],
					unit_name: [{
						required: true,
						message: '请输入单位',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						type: 'number',
						message: '请输入租车价',
						trigger: 'blur',
					}, ],
				},
				copy: 0,
			};
		},
		computed: {
			...mapState('media', ['isMobile']),
			labelWidth() {
				return this.isMobile ? undefined : 135;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			},
		},
		mounted() {
			if (this.$route.params.id) {
				this.copy = this.$route.params.copy;
				this.current = 1;
				this.getInfo();
			}
		},
		methods: {
			// 获取商品详情
			getEditorContent(data) {
				this.description = data;
			},
			// 租车商品规格；
			productAttrs(rows) {
				let that = this;
				productAttrsApi(rows.id, 7)
					.then((res) => {
						let data = res.data.info;
						let selection = {
							type: 'selection',
							width: 60,
							align: 'center',
						};
						that.specsData = data.attrs;
						that.specsData.forEach(function(item, index) {
							that.$set(that.specsData[index], 'id', index);
						});
						that.formValidate.items = data.items;
						that.columns = data.header;
						that.columns.unshift(selection);
						that.inputChange(data);
					})
					.catch((res) => {
						that.$Message.error(res.msg);
					});
			},
			inputChange(data) {
				let that = this;
				let $index = [];
				data.header.forEach(function(item, index) {
					if (item.type === 1) {
						$index.push({
							index: index,
							key: item.key,
							title: item.title
						});
					}
				});
				$index.forEach(function(item, index) {
					let title = item.title;
					let key = item.key;
					let row = {
						title: title,
						key: key,
						align: 'center',
						minWidth: 100,
						render: (h, params) => {
							return h('div', [
								h('InputNumber', {
									props: {
										min: 1,
										precision: 0,
										value: params.row.quota,
									},
									on: {
										'on-change': (e) => {
											params.row.quota = e;
											that.specsData[params.index] = params.row;
											if (!!that.formValidate.attrs && that
												.formValidate.attrs.length) {
												that.formValidate.attrs.forEach((v,
													index) => {
													if (v.id === params.row.id) {
														that.formValidate.attrs
															.splice(index, 1,
																params.row);
													}
												});
											}
										},
									},
								}),
							]);
						},
					};
					that.columns.splice(item.index, 1, row);
				});
			},
			// 多选
			changeCheckbox(selection) {
				this.formValidate.attrs = selection;
			},
			// 表单验证
			validate(prop, status, error) {
				if (status === false) {
					this.$Message.error(error);
				}
			},
			// 商品id
			getProductId(row) {
				this.modal_loading = false;
				this.modals = false;
				setTimeout(() => {
					this.formValidate = {
						images: row.slider_image,
						info: row.store_info,
						title: row.store_name,
						image: row.image,
						unit_name: row.unit_name,
						price: 0, // 不取商品中的原价
						sales: row.sales,
						sort: row.sort,
						status: 0,
						description: row.description,
						id: 0,
						product_id: row.id,
						custom_form: row.custom_form, //自定义表单数据
						car_lease:0,//默认关闭以租代购
						several_months:12,//需要几个月
					};
					this.productAttrs(row);
					this.$refs.goodslist.productRow = null;
				}, 500);
			},
			cancel() {
				this.modals = false;
			},
			// 详情
			getInfo() {
				this.spinShow = true;
				rentDetail(this.$route.params.id)
					.then(async (res) => {
						let that = this;
						let info = res.data.info;
						let selection = {
							type: 'selection',
							width: 60,
							align: 'center',
						};
						this.formValidate = info;
						this.$set(this.formValidate, 'items', info.attrs.items);
						this.columns = info.attrs.header;
						this.columns.unshift(selection);
						that.specsData = info.attrs.value;
						that.specsData.forEach(function(item, index) {
							that.$set(that.specsData[index], 'id', index);
						});
						let data = info.attrs;
						let attr = [];
						for (let index in info.attrs.value) {
							if (info.attrs.value[index]._checked) {
								attr.push(info.attrs.value[index]);
							}
						}
						that.formValidate.attrs = attr;
						this.inputChange(data);
						this.spinShow = false;
					})
					.catch((res) => {
						this.spinShow = false;
						this.$Message.error(res.msg);
					});
			},
			changePrice(e, index) {
				this.$set(this.specsData[index], 'price', e);
			},
			// 下一步
			next(name) {
				let that = this;
				if (this.current === 2) {
					this.formValidate.description = this.description;
					this.$refs[name].validate((valid) => {
						if (valid) {
							if (this.copy == 1) this.formValidate.copy = 1;
							this.formValidate.id = Number(this.$route.params.id) || 0;
							this.submitOpen = true;
							rentAdd(this.formValidate)
								.then(async (res) => {
									this.submitOpen = false;
									this.$Message.success(res.msg);
									setTimeout(() => {
										this.$router.push({
											path: '/admin/rent/cart',
										});
									}, 500);
								})
								.catch((res) => {
									this.submitOpen = false;
									this.$Message.error(res.msg);
								});
						} else {
							return false;
						}
					});
				} else if (this.current === 1) {
					this.$refs[name].validate((valid) => {
						if (valid) {
							if (!that.formValidate.attrs) {
								return that.$Message.error('请选择属性规格');
							}
							this.current += 1;
						}
					});
				} else {
					if (this.formValidate.images) {
						this.current += 1;
					} else {
						this.$Message.warning('请选择商品');
					}
				}
			},
			// 上一步
			step() {
				this.current--;
			},
			// 内容
			getContent(val) {
				this.formValidate.description = val;
			},
			// 点击商品图
			modalPicTap(tit, picTit, index) {
				this.modalPic = true;
				this.isChoice = tit === 'dan' ? '单选' : '多选';
				this.picTit = picTit;
				this.tableIndex = index;
			},
			// 获取单张图片信息
			getPic(pc) {
				switch (this.picTit) {
					case 'danFrom':
						this.formValidate.image = pc.att_dir;
						break;
						// case 'danTable':
						//     this.specsData[this.tableIndex].pic = pc.att_dir;
						//     break;
					default:
						if (!!this.formValidate.attrs && this.formValidate.attrs.length) {
							this.$set(this.specsData[this.tableIndex], '_checked', true);
						}
						this.specsData[this.tableIndex].pic = pc.att_dir;
				}
				this.modalPic = false;
			},
			// 获取多张图信息
			getPicD(pc) {
				this.images = pc;
				this.images.map((item) => {
					this.formValidate.images.push(item.att_dir);
					this.formValidate.images = this.formValidate.images.splice(0, 10);
				});
				this.modalPic = false;
			},
			handleRemove(i) {
				this.images.splice(i, 1);
				this.formValidate.images.splice(i, 1);
			},
			// 选择商品
			changeGoods() {
				this.modals = true;
				this.$refs.goodslist.formValidate.is_presale = 0;
				this.$refs.goodslist.getList();
				this.$refs.goodslist.goodsCategory();
			}, // 移动
			handleDragStart(e, item) {
				this.dragging = item;
			},
			handleDragEnd(e, item) {
				this.dragging = null;
			},
			// 首先把div变成可以放置的元素，即重写dragenter/dragover
			handleDragOver(e) {
				e.dataTransfer.dropEffect = 'move'; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
			},
			handleDragEnter(e, item) {
				e.dataTransfer.effectAllowed = 'move'; // 为需要移动的元素设置dragstart事件
				if (item === this.dragging) {
					return;
				}
				const newItems = [...this.formValidate.images];
				const src = newItems.indexOf(this.dragging);
				const dst = newItems.indexOf(item);
				newItems.splice(dst, 0, ...newItems.splice(src, 1));
				this.formValidate.images = newItems;
			},
		},
	};
</script>

<style scoped lang="stylus">
	.maxW /deep/.ivu-select-dropdown {
		max-width: 600px;
	}

	.tabBox_img {
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}

	.tabBox_img img {
		width: 100%;
		height: 100%;
	}

	.priceBox {
		width: 100%;
	}

	.form {
		.picBox {
			display: inline-block;
			cursor: pointer;
		}

		.pictrue {
			width: 60px;
			height: 60px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			margin-right: 15px;
			display: inline-block;
			position: relative;
			cursor: pointer;

			img {
				width: 100%;
				height: 100%;
			}

			.btndel {
				position: absolute;
				z-index: 9;
				width: 20px !important;
				height: 20px !important;
				left: 46px;
				top: -4px;
			}
		}

		.upLoad {
			width: 58px;
			height: 58px;
			line-height: 58px;
			border: 1px dotted rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			background: rgba(0, 0, 0, 0.02);
			cursor: pointer;
		}

		.col {
			color: #2d8cf0;
			cursor: pointer;
		}
	}

	.addfont {
		font-size: 13px;
		color: #1890FF;
		margin-left: 14px;
		cursor: pointer;
		margin-left: 10px;
		cursor: pointer;
	}
</style>
