<template>
	<view class="post" style="background-color: #f6f6f6;">
		<view class="header" :style="[{height:CustomBar + 'px'},{top:jpHeight + 'px'}]">
			<view class="cu-bar bg-white" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px'}">
				<view class="action" @tap="isback">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
					编辑付费内容
				</view>
				<view class="action">
				</view>
			</view>
		</view>
		<view :style="[{padding:(NavBar+10) + 'px 10px 0px 10px'}]"></view>
		<form>
			<view class="bg-white margin-sm" style="font-size: 30upx;padding: 20upx;border-radius: 20upx;">
				<view class="margin-sm">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<text>付费价格</text>
						<view style="display: flex;align-items: stretch;justify-content: flex-end;">
							<input v-model="shopPrice" type="number" placeholder="输入价格"
								style="width: 45%;text-align: right;margin-right: 5px;" />
							<span>{{currencyName}}</span>
						</view>

					</view>
				</view>
				<hr style="width: 100%;margin: auto;height: 1px;background: #e5e5e5d9;border: none;" />
				<view class="margin-sm" @tap="setSelectShow()">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view>VIP折扣</view>
						<view>{{shopDiscountA}}</view>
					</view>
				</view>
			</view>
			<view class="bg-white margin-sm" style="border-radius: 20upx;">
				<view class="margin-sm">
					<cu-editor ref="editor" :mrPoster="videoPoster" :SPimg="SPimg" :musicpic='musicpic'
						editorId='editor' :NavBar="NavBar" @editorFocus="handleEditorFocus" :uploadTime="uploadTime"
						@editorBlur="handleEditorBlur" :url="this.$API.upload()" :formData="formData" :content="text"
						:isPay="true" :MusicUpload='MusicUpload' :isWz="false" placeholder="请输入付费内容"
						@save="onSave"></cu-editor>
				</view>

			</view>
			<!--  #ifdef APP-PLUS || H5 -->
			<view class="margin-sm" style="display: flex;justify-content: space-between;">
				<tn-button type="button" fontColor='#333' width="35%" class="form-btn"
					@click="setEmpty()">清空</tn-button>
				<tn-button backgroundColor='#01BEFF' fontColor="#fff" type="button" width="60%" class="form-btn"
					@click="savePaidContent()">保存</tn-button>
			</view>
			<!--  #endif -->
			<!--  #ifdef MP-WEIXIN -->
			<view class="margin-sm">
				<tn-button type="button" fontColor='#333' width="100%" class="form-btn"
					@click="setEmpty()">清空</tn-button>
				<view class="margin-top-sm">
					<tn-button backgroundColor='#01BEFF' fontColor="#fff" type="button" width="100%" class="form-btn"
						@click="savePaidContent()">保存</tn-button>
				</view>
			</view>
			<!--  #endif -->

		</form>
		<tn-select @confirm="confirm" v-model="selectShow" title="请选择VIP折扣" :defaultValue="[10]" :searchShow="false"
			:list="discountOptions"></tn-select>
	</view>
</template>
<script>
	import {
		localStorage
	} from '../../js_sdk/mp-storage/mp-storage/index.js'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar: this.StatusBar + this.CustomBar,
				AppStyle: this.$store.state.AppStyle,
				isPaid: 0,
				modalName: "",
				showContent: true,
				uid: 0,
				selectShow: false,
				price: 0,
				discountOptions: [{
						value: '0.0',
						label: 'VIP免费'
					},
					{
						value: '0.1',
						label: '1折'
					},
					{
						value: '0.2',
						label: '2折'
					},
					{
						value: '0.3',
						label: '3折'
					},
					{
						value: '0.4',
						label: '4折'
					},
					{
						value: '0.5',
						label: '5折'
					},
					{
						value: '0.6',
						label: '6折'
					},
					{
						value: '0.7',
						label: '7折'
					},
					{
						value: '0.8',
						label: '8折'
					},
					{
						value: '0.9',
						label: '9折'
					},
					{
						value: '1.0',
						label: '无折扣'
					}
				],
				token: "",
				poster: this.$API.SPmusicpic(),
				isShow: false,
				havePay: false,
				name: "",
				sid: 0,

				uploadTime: this.$API.getuploadTime(),
				curHeight: 0,
				jpHeight: 0,
				screenHeight: 0,
				postheight: 0,
				poststyle: "",
				readstyle: "",
				isText: 0,
				draft: 0,
				MusicUpload: this.$API.SPstarMusicUpload(),
				musicpic: this.$API.SPmusicpic(),
				videoPoster: this.$API.getVideoPoster(),
				SPimg: this.$API.SPimgs(),
				formData: {},
				//文章表单部分
				title: "",
				category: "",
				tag: "",
				categoryText: "",
				text: '',
				textRead: "",
				shopPrice: "",
				shopDiscount: "1.0",
				shopDiscountA: '无折扣',
				isSpace: false,
				currencyName: "",
				//页面状态
				type: "add",
				cid: 0,
				lenght: 0,
				shopList: [],
				editInterval: null,
				shopID: -1,
				sectionName: "未知圈子",
				sectionid: 0,
				content: "",
			}
		},
		onPullDownRefresh() {
			var that = this;

		},
		onHide() {
			var that = this;
			clearInterval(that.editInterval);
			that.editInterval = null;
		},
		onShow() {
			var that = this;
			if (localStorage.getItem('userinfo')) {

				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.token = userInfo.token;
				if (userInfo.screenName) {
					that.name = userInfo.screenName;
				} else {
					that.name = userInfo.name;
				}
				that.formData = {
					'token': userInfo.token,
					'username': that.name
				}
			}
			if (localStorage.getItem('curSection')) {
				var curSection = JSON.parse(localStorage.getItem('curSection'));
				that.sectionid = curSection.id;
				that.sectionName = curSection.name;
				console.log(curSection);
				localStorage.removeItem('curSection');
			}
			if (that.havePay && that.sid != '0') {
				var payData = JSON.parse(localStorage.getItem("payId" + that.sid));
				if (payData) {
					that.text = payData.text;
					that.shopPrice = payData.shopPice;
					that.shopDiscount = payData.shopDiscount;
					var discountOption = that.discountOptions.find(option => option.value === that.shopDiscount);
					if (discountOption) {
						that.shopDiscountA = discountOption.label;
					}
				}
			} else {
				var payData = JSON.parse(localStorage.getItem("payIdmy"));
				if (payData) {
					that.text = payData.text;
					that.shopPrice = payData.shopPice;
					that.shopDiscount = payData.shopDiscount;
					var discountOption = that.discountOptions.find(option => option.value === that.shopDiscount);
					if (discountOption) {
						that.shopDiscountA = discountOption.label;
					}
				}
			}

			localStorage.setItem('isSave', "false");

		},
		onLoad(res) {
			var that = this;
			that.getleiji()
			that.editInterval = setInterval(function() {
				if (localStorage.getItem('goBack')) {
					localStorage.removeItem('goBack');

					that.back();
				}
			}, 500);
			// #ifdef APP-PLUS || MP
			that.NavBar = this.CustomBar;
			// #endif
			if (res.havePay) {
				that.havePay = res.havePay;
			}
			if (res.sid) {
				that.sid = res.sid;
			}
			var verifyLevel = 0;
			if (localStorage.getItem('AppInfo')) {
				try {
					var AppInfo = JSON.parse(localStorage.getItem('AppInfo'));
					verifyLevel = AppInfo.verifyLevel;
				} catch (e) {
					console.log(e);
				}

			}
			if (localStorage.getItem('userinfo')) {
				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.token = userInfo.token;
				that.uid = userInfo.uid;
				that.uid = userInfo.uid;
				if (userInfo.screenName) {
					that.name = userInfo.screenName;
				} else {
					that.name = userInfo.name;
				}
			}


		},
		methods: {

			getleiji() {
				var that = this;
				uni.request({
					url: that.$API.SPset(),
					method: 'GET',
					dataType: "json",
					success(res) {
						that.currencyName = res.data.assetsname;
					},
					fail(error) {
						console.log(error);
					}

				})
			},
			editPaidContent() {
				uni.navigateTo({
					url: '/pages/edit/payText'
				});
			},
			confirm(e) {
				this.shopDiscount = e[0].value
				this.shopDiscountA = e[0].label
			},
			back() {
				localStorage.removeItem('isSave')
				uni.navigateBack({
					delta: 1
				});
			},
			setSelectShow() {
				this.selectShow = true
			},
			okBtn() {
				const nowDate = +new Date();
				uni.setStorageSync('modelView', nowDate);
				this.cancleBtn();
			},
			handleEditorFocus() {},
			handleEditorBlur() {},
			onSave(e) {
				var that = this
				that.content = e.html;
			},

			savePaidContent() {
			    this.$refs.editor.save();
			    setTimeout(() => {
			        console.log(this.content);
			        
			        if (this.shopPrice == '') {
			            uni.showToast({
			                title: "付费价格不能为空",
			                icon: 'none'
			            });
			            return false;
			        }
			        var shopPriceInt = Number(this.shopPrice);
			        if (!Number.isInteger(shopPriceInt) || shopPriceInt <= 0) {
			            uni.showToast({
			                title: "付费价格必须为正整数",
			                icon: 'none'
			            });
			            return false;
			        }
					if (this.content == '<p><br></p>' || this.content == '') {
					    uni.showToast({
					        title: "付费内容不能为空",
					        icon: 'none'
					    });
					    return false;
					}
			        var payData = {
			            text: this.content,
			            shopPice: this.shopPrice,
			            shopDiscount: this.shopDiscount
			        };
			        if (this.havePay && this.sid != '0') {
			            localStorage.setItem("payId" + this.sid, JSON.stringify(payData));
			        } else {
			            localStorage.setItem("payIdmy", JSON.stringify(payData));
			        }
			
			        uni.showToast({
			            title: "付费内容已保存",
			            icon: 'none'
			        });
			        localStorage.setItem('isSave', "true");
			        setTimeout(() => {
			            this.back();
			        }, 1000);
			    }, 500);
			},
			setEmpty() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否清空付费内容？',
					success: function(res) {
						if (res.confirm) {
							that.text = ''
							that.shopPrice = ''
							that.shopDiscount = '1.0'
							that.shopDiscountA = '无折扣'
							if (that.havePay && that.sid != '0') {
								localStorage.removeItem("payId" + that.sid)
							} else {
								localStorage.removeItem('payIdmy')
							}

							uni.showToast({
								title: "已清空",
								icon: 'none'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			isback() {
				var that = this;
				var isSave = localStorage.getItem('isSave');
				if (isSave == 'true') {
					that.back()
				} else {
					uni.showModal({
						title: '提示',
						content: '编辑的内容还没保存，确定要退出吗？',
						cancelText: '退出',
						confirmText: '留下',
						success: function(res) {
							if (res.confirm) {

							} else if (res.cancel) {
								that.back()
							}
						}
					});
				}
			}


		}
	}
</script>

<style>
	.post {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
	}
</style>