<template>
	<view class="p-person-config g_w_all g_kuaishou">
		<view class="g_h_10"></view>
		<view class="g_bg_f g_ml_12 g_mr_12 g_radius_8" style="overflow: hidden;">
			<view class="g_flex_row_between flex_center g_p_16" style="border-bottom: 0.5px solid #eee;">
				<view class="g_fs_16 g_c_0">小程序名称</view>
				<view class="g_flex_1 g_flex_row_end">
					<input class="g_fs_16 g_text_r" type="text" v-model="formData.appName" placeholder="请输入小程序名称" placeholder-class="g_c_9" style="width: 200px;" />
				</view>
			</view>
			<view class="g_flex_row_between flex_center g_p_16" style="border-bottom: 0.5px solid #eee;" @click="chooseAvatar">
				<view class="g_fs_16 g_c_0">小程序头像</view>
				<view class="g_flex_row_end flex_center">
					<image v-if="formData.logo" :src="formData.logo" class="g_w_32 g_h_32 g_radius_50" mode="aspectFill"></image>
					<view v-else class="g_w_32 g_h_32 g_radius_50 g_bg_f_5 g_flex_c">
						<i class="iconfont icon-add g_c_9 g_fs_16"></i>
					</view>
					<i class="iconfont icon-gengduo11 g_ml_8 g_c_9 g_fs_14"></i>
				</view>
			</view>
			<view class="g_flex_row_between flex_center g_p_16">
				<view class="g_fs_16 g_c_0">开启演示模式</view>
				<u-switch v-model="formData.enabled" :activeColor="themeColor" inactiveColor="#e5e5e5" @change="handleSwitchChange"></u-switch>
			</view>
		</view>
		<view class="g_mt_40 g_ml_12 g_mr_12">
			<rh-button btnText="保存" @clickBtn="handleSubmit" type="primary" size="full" />
		</view>
	</view>
</template>

<script>
import { get } from 'mobx';

export default {
	data() {
		let demoConfig = uni.getStorageSync("DEMO_MODE_CONFIG") || {};
		return {
			themeColor: getApp().globalData.themeColor,
			formData: {
				appName: demoConfig.appName || "",
				logo: demoConfig.logo || "",
				enabled: demoConfig.enabled || false,
			},
		};
	},
	methods: {
		handleSwitchChange(e) {
			this.formData.enabled = e;
		},
		chooseAvatar() {
			let that = this;
			uni.showActionSheet({
				itemList: ["从相册选择", "使用相机"],
				success: function (res) {
					if (res.tapIndex == 0) {
						that.setAvatar(["album"]);
					} else {
						that.setAvatar(["camera"]);
					}
				},
			});
		},
		setAvatar($type) {
			let that = this;
			that.G.uploadImgToOss(
				(res) => {
					that.formData.logo = res.image;
					uni.hideLoading();
				},
				"avatar",
				"default",
				1,
				$type
			);
		},
		handleSubmit() {
			let that = this;
			if (that.formData.enabled && !that.formData.appName) {
				uni.showToast({
					title: "请输入小程序名称",
					icon: "none",
				});
				return;
			}
			if (that.formData.enabled && !that.formData.logo) {
				uni.showToast({
					title: "请上传小程序头像",
					icon: "none",
				});
				return;
			}
			uni.setStorageSync("DEMO_MODE_CONFIG", {
				appName: that.formData.appName,
				logo: that.formData.logo,
				enabled: that.formData.enabled,
			});
			uni.setStorageSync("DEMO_MODE_ENABLED", that.formData.enabled);
			uni.showToast({
				title: "保存成功",
				icon: "success",
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		},
	},
};
</script>

<style lang="scss">
.p-person-config{
	min-height: 100vh;
	background-color: #ededed;
}
</style>
