<template>
	<view class="content">
		<view class="main">
			<view class="box-1">
				<view class="box-left">标题：</view>
				<input type="text" :disabled="lx != 0" v-model="title" placeholder-class="placeholder"
					class="list-input" placeholder="请填写文章标题" />
			</view>
			<view class="box-1">
				<view class="box-left">作者：</view>
				<input type="text" :disabled="lx != 0" v-model="author" placeholder-class="placeholder"
					class="list-input" placeholder="请填写文章作者" />
			</view>
			<view class="box-1">
				<view class="box-left">文章简介：</view>
				<input type="text" :disabled="lx != 0" v-model="synopsis" placeholder-class="placeholder"
					class="list-input" placeholder="请填写文章简介" />
			</view>
			<view class="upload-box">
				<view class="upload-left">文章头图</view>
				<view class="upload-right" @click.stop="scImgMian()">
					<image v-if="!image_input" class="upload-img " src="/static/img/add.png"></image>
					<image v-if="image_input" class="upload-img " :src="image_input"></image>
				</view>
			</view>
			<!-- <view class="box-1">
				<view class="box-left">
					关联商品 ：
				</view>
				<view class="list-input" v-if="!product" @click="open()">
					请选择关联商品
				</view>
				<view class="list-input clamp" v-else @click="open()">
					{{product.store_name}}
				</view>
			</view> -->
			<view class="bjq" v-if="showwz == 0&&lx ==0">
				<jinEdit ref="set" placeholder="请输入文章内容" @editOk="editOk" uploadFileUrl="/api/upload/image"
					:header="{'Authori-zation': AuthoriZation}" :showImgSize="true" :html="content" height="50vh">
				</jinEdit>
			</view>
			<view class="bjq" v-if="lx !=0">
				<view v-html="content"></view>
			</view>
		</view>
		<view @click.stop="submit('1')" v-if="lx == 0" class="address-box submit-box"><text
				class="submit-btn">提交文章</text></view>
		<view @click.stop="submit('0')" v-if="lx == 0" class="address-box submit-box"><text
				class="submit-btn gren">保存草稿</text></view>
		<uni-popup ref="choose" type="bottom">
			<view class="choose-main">
				<view class="choose-top flex">
					<view class="choose-font" @click="close()">
						取消
					</view>
				</view>
				<view class="top-box">
					<view class="top">
						<view class="top-icon">
							<image src="../../static/icon/icon.png" mode=""></image>
						</view>
						<view class="top-main"><input type="text" v-model="keyworld" placeholder="请输入商品名称"></view>
					</view>
					<view class="top-font" @click="clickSearch()">
						搜索
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;" @scrolltolower="getProduct()">
					<view class="choose-item flex" v-for="(item,index) in productlist" @click="xuanzhe(item)">
						<view class="choose-image">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="choose-rigt">
							<view class="choose-name">
								{{item.store_name}}
							</view>
							<view class="choose-price">
								{{item.price}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		upload
	} from '@/api/order.js';
	import {
		getProducts,
		goodsDetail
	} from '@/api/product.js'
	import {
		my_detail,
		add_article
	} from '@/api/activity.js';
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default {
		components: {
			jinEdit
		},
		data() {
			return {
				lx: 0,
				AuthoriZation: '',
				id: 0,
				title: '', //文章标题
				author: '', //文章作者
				image_input: '', //文章图片
				content: '', //文章内容
				synopsis: '', //文章简介
				product: '', //关联商品
				productlist: [], //商品列表
				page: 1,
				limit: 10,
				loadType: 'more',
				keyworld: '',
				showwz: 0,
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.showwz = 1;
				this.id = opt.id;
				this.loadData();
			}
			if (opt.type) {
				this.lx = opt.type
			}
			console.log(this.product);
			// this.getProduct();
			this.AuthoriZation = 'Bearer ' + uni.getStorageSync('token')
		},
		onShow() {},
		onReachBottom() {},
		onReady() {},
		methods: {
			editOk(res) {
				//  保存富文本转出的html
				this.content = res.html
				console.log(this.content);
			},
			getProduct() {
				const obj = this
				if (obj.loadType == 'noMore' || obj.loadType == 'loading') {
					return
				}
				obj.loadType = 'loading'
				getProducts({
					page: obj.page,
					limit: obj.limit,
					keyword: obj.keyworld
				}).then(({
					data
				}) => {
					obj.productlist = obj.productlist.concat(data);
					obj.page++
					if (data.length == obj.limit) {
						obj.loadType = 'more'
					} else {
						obj.loadType = 'noMore'
					}
				})
			},
			loadData() {
				my_detail({}, this.id).then(({
					data
				}) => {
					this.title = data.news.title
					this.author = data.news.author
					this.image_input = data.news.image_input[0]
					this.synopsis = data.news.synopsis
					// this.spxq(data.news.product_id)
					this.content = data.news.content
					this.showwz = 0
				})
			},
			spxq(id) {
				goodsDetail({}, id).then(({
					data
				}) => {
					this.product = data.storeInfo
					console.log(data);
				})
			},
			scImgMian() {
				if (this.lx != 0) {
					return
				}
				let obj = this;
				upload({
						file: ''
					})
					.then(e => {
						console.log(e, 'e');
						obj.image_input = e[0].url;
					})
					.catch(e => {});
			},
			clickSearch() {
				this.page = 1;
				this.limit = 10;
				this.loadType = 'more'
				this.getProduct();
			},
			open() {
				if (this.lx != 0) {
					return
				}
				this.$refs.choose.open()
			},
			close() {
				this.$refs.choose.close()
			},
			xuanzhe(opt) {
				this.product = opt;
				console.log(this.product, '123456');
				this.$refs.choose.close();
			},
			submit(type) {
				const obj = this
				this.$refs.set.release(true)
				setTimeout(() => {
					if (!obj.title) {
						return this.$api.msg('请输入文章标题')
					}
					if (!obj.author) {
						return this.$api.msg('请输入文章作者')
					}
					if (!obj.image_input) {
						return this.$api.msg('请输入文章头图')
					}
					if (!obj.synopsis) {
						return this.$api.msg('请输入文章简介')
					}
					if (!obj.content) {
						return this.$api.msg('请输入文章内容')
					}
					add_article({
						type: type,
						id: obj.id,
						title: obj.title,
						author: obj.author,
						image_input: obj.image_input,
						synopsis: obj.synopsis,
						share_title: obj.title,
						share_synopsis: obj.synopsis,
						share_images: obj.image_input,
						content: obj.content,
						product_id: 0
					}).then(e => {
						if (type == 0) {
							uni.navigateTo({
								url: '/pages/user/creation?id=0'
							})
						} else {
							uni.navigateTo({
								url: '/pages/user/creation?id=2'
							})
						}

					})
				}, 10)
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
	}

	.box-1 {
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 20rpx;

		.box-left {
			width: 25%;
			text-align: left;
			color: #000000;

		}

		.list-input {
			width: 75%;
			font-size: 28rpx;
			color: #959595;
			text-align: right;
			padding-right: 24rpx;
		}
	}

	.upload-box {
		width: 100%;
		background: #ffffff;
		border-radius: 27rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx 40rpx;
		margin: 20rpx auto 30rpx;

		.upload-left {
			font-weight: 400;
			font-size: 28rpx;
		}

		.upload-right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.upload-img {
				width: 200rpx;
				height: 200rpx;
				margin-top: 20rpx;
			}
		}
	}

	.main {
		padding: 20rpx;
	}

	.bjq {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 20rpx;
	}

	.address-box {
		padding: 15rpx 40rpx;
		margin-bottom: 10px;
	}

	.submit-box {
		bottom: 0;
		left: 0;
		width: 750rpx;
	}

	.submit-btn {
		margin-top: 10px;
		display: inline-block;
		width: 670rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #000000;
		opacity: 1;
		box-shadow: 0rpx 8rpx 12rpx rgba(0, 0, 0, 0.16);
		border-radius: 56rpx;
		font-size: 39rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.gren {
		background: #ffffff;
		color: #000000;
		border: 1px solid #000000;
	}

	.choose-main {
		background: #ffffff;

	}

	.choose-top {
		padding: 20rpx 40rpx 20rpx;
		font-size: 32rpx;
		justify-content: flex-end;

		.choose-font {
			color: #d4c7c2;
		}
	}

	.choose-item {
		padding: 40rpx 20rpx;
		justify-content: flex-start;

		.choose-image {
			width: 100rpx;
			height: 100rpx;

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

		.choose-rigt {
			height: 100rpx;
			margin-left: 20rpx;
			padding: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.choose-name {
				font-size: $font-base;
				color: $font-color-dark;
				font-weight: bold;
			}

			.choose-price {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #ff4c4c;
				line-height: 1;
			}
		}
	}

	.top-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-font {
		font-size: 32rpx;
		color: #000000;
		margin-left: 20rpx;
	}

	.top {
		width: 550rpx;
		height: 58rpx;
		background: #ededed;
		border-radius: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-icon {
			width: 32rpx;
			height: 32rpx;

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

		.top-main {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cbcbcb;
		}
	}
</style>