<template>
	<div class="app-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="用户协议" name="userAgreement">
				<el-form ref="form" :model="userAgreementFrom" label-width="80px">
					<el-row>
						<el-col :span="20">
							<editor
								id="editor1"
								tableName="editor1"
								v-model="userAgreementFrom.userAgreement"
								:min-height="580"
							/>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="隐私政策" name="privacyAgreement">
				<el-form ref="form" :model="privacyAgreementFrom" label-width="80px">
					<el-row>
						<el-col :span="20">
							<editor
								id="editor2"
								tableName="editor2"
								v-model="privacyAgreementFrom.privacyAgreement"
								:min-height="580"
							/>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="积分规则" name="integralRule">
				<el-form ref="form" :model="integralRuleFrom" label-width="80px">
					<el-row>
						<el-col :span="20">
							<editor
								id="editor3"
								tableName="editor3"
								v-model="integralRuleFrom.integralRule"
								:min-height="580"
							/>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="关于我们" name="aboutUs">
				<el-form ref="form" :model="aboutUsFrom" label-width="80px">
					<el-row>
						<el-col :span="20">
							<editor
								id="editor4"
								tableName="editor4"
								v-model="aboutUsFrom.aboutUs"
								:min-height="580"
							/>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="蓝牙指引权限" name="bluetoothGuidancePermissions">
				<el-form
					ref="form"
					:model="bluetoothGuidancePermissionsFrom"
					label-width="80px"
				>
					<el-row>
						<el-col :span="20">
							<editor
								id="editor5"
								tableName="editor5"
								v-model="
									bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions
								"
								:min-height="580"
							/>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="定位指引权限" name="locationGuidancePermissions">
				<el-form
					ref="form"
					:model="locationGuidancePermissionsFrom"
					label-width="80px"
				>
					<el-row>
						<el-col :span="20">
							<editor
								id="editor6"
								tableName="editor6"
								v-model="
									locationGuidancePermissionsFrom.locationGuidancePermissions
								"
								:min-height="580"
							/>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="联系客服" name="contactWorker">
				<div class="block" style="float: left; margin-left: 3%; margin-top: 3%">
					<el-image
						:src="contactWorkerFrom.contactWorkerSrc"
						style="width: 330px; height: 461px"
					>
						<div slot="placeholder" class="image-slot">
							<span class="dot"></span>
						</div>
					</el-image>
				</div>
				<div style="float: left; margin-left: 10%; margin-top: 10%">
					<el-upload
						ref="upload"
						:limit="1"
						accept=".jpg, .png, .jpeg, .mp4"
						:headers="upload.headers"
						:action="upload.url"
						:disabled="upload.isUploading"
						:on-progress="handleFileUploadProgress"
						:on-success="handleFileSuccess"
						drag
					>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或<em>点击上传</em>
						</div>
						<div class="el-upload__tip" slot="tip">
							请上传联系客服页面图片，建议尺寸为330px*461px
						</div>
					</el-upload>
				</div>
			</el-tab-pane>
			<el-tab-pane label="商城链接/版本管理" name="otherSetting">
				<el-form
					ref="form"
					:model="otherForm"
					:rules="rules"
					label-width="150px"
					style="margin-top: 1%"
				>
					<el-divider content-position="left">商城设置</el-divider>
					<el-form-item label="跳转商城appid：" prop="skipAppid">
						<el-input
							v-model="otherForm.skipAppid"
							style="width: 70%"
						></el-input>
					</el-form-item>
					<el-form-item label="跳转商城路径：" prop="skipPath">
						<el-input
							v-model="otherForm.skipPath"
							style="width: 70%"
						></el-input>
					</el-form-item>
					<el-divider content-position="left">版本管理设置</el-divider>
					<el-form-item label="当前版本：" prop="sysVersion">
						<el-input
							v-model="otherForm.sysVersion"
							style="width: 70%"
						></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<div
			style="margin-left: 76%; margin-top: 2%"
			v-show="this.activeName != 'contactWorker'"
		>
			<el-button type="primary" @click="submitForm">提 交</el-button>
		</div>
	</div>
</template>

<script>
import {
	listSetting,
	getSetting,
	delSetting,
	addSetting,
	updateSetting,
} from '@/api/system/systemSetting'
import {
	listOtherSetting,
	addOtherSetting,
	updateOtherSetting,
} from '@/api/system/otherSetting'
import { getToken } from '@/utils/auth'

export default {
	name: 'Setting',
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
			// 平台参数设置表格数据
			settingList: [],
			// 弹出层标题
			title: '',
			activeName: 'userAgreement',
			// 是否显示弹出层
			open: false,
			// 用户导入参数
			upload: {
				// 是否显示弹出层（用户导入）
				open: false,
				// 弹出层标题（用户导入）
				title: '',
				// 是否禁用上传
				isUploading: false,
				// 是否更新已经存在的用户数据
				updateSupport: 0,
				// 设置上传的请求头部
				headers: { Authorization: 'Bearer ' + getToken() },
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + '/file/upload',
			},
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				key: null,
				value: null,
				instructions: null,
				status: null,
			},
			otherQueryParams: {
				pageNum: 1,
				pageSize: 10,
				skipAppid: null,
				skipPath: null,
				sysVersion: null,
				status: null,
			},
			// 表单参数
			form: {},
			otherForm: {},
			userAgreementFrom: {
				userAgreement: null,
				userAgreementId: null,
			},
			privacyAgreementFrom: {
				privacyAgreement: null,
				privacyAgreementId: null,
			},
			integralRuleFrom: {
				integralRule: null,
				integralRuleId: null,
			},
			aboutUsFrom: {
				aboutUs: null,
				aboutUsId: null,
			},
			bluetoothGuidancePermissionsFrom: {
				bluetoothGuidancePermissions: null,
				bluetoothGuidancePermissionsId: null,
			},
			locationGuidancePermissionsFrom: {
				locationGuidancePermissions: null,
				locationGuidancePermissionsId: null,
			},
			contactWorkerFrom: {
				contactWorkerSrc: null,
				contactWorkerId: null,
			},
			// 表单校验
			rules: {
				skipAppid: [
					{ required: true, message: '请输入商城apppid', trigger: 'blur' },
				],
				skipPath: [
					{ required: true, message: '请输入商城路径', trigger: 'blur' },
				],
				sysVersion: [
					{ required: true, message: '请输入当前版本', trigger: 'blur' },
				],
			},
		}
	},
	created() {
		this.getList()
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event)
		},
		/** 提交按钮 */
		submitForm() {
			if (this.activeName == 'userAgreement') {
				if (this.userAgreementFrom.userAgreementId != null) {
					this.form.id = this.userAgreementFrom.userAgreementId
				}
				this.form.key = 'USER_AGREEMENT'
				if (!this.userAgreementFrom.userAgreement) {
					this.$modal.msgError('用户协议内容不能为空')
					return
				}
				this.form.value = this.userAgreementFrom.userAgreement
				this.form.instructions = '用户协议'
			}
			if (this.activeName == 'privacyAgreement') {
				if (this.privacyAgreementFrom.privacyAgreementId != null) {
					this.form.id = this.privacyAgreementFrom.privacyAgreementId
				}
				this.form.key = 'PRIVACY_AGREEMENT'
				if (!this.privacyAgreementFrom.privacyAgreement) {
					this.$modal.msgError('隐私协议内容不能为空')
					return
				}
				this.form.instructions = '隐私协议'
				this.form.value = this.privacyAgreementFrom.privacyAgreement
			}
			if (this.activeName == 'integralRule') {
				if (this.integralRuleFrom.integralRuleId != null) {
					this.form.id = this.integralRuleFrom.integralRuleId
				}
				this.form.key = 'INTEGRAL_RULE'
				if (!this.integralRuleFrom.integralRule) {
					this.$modal.msgError('积分规则内容不能为空')
					return
				}
				this.form.instructions = '积分规则'
				this.form.value = this.integralRuleFrom.integralRule
			}
			if (this.activeName == 'aboutUs') {
				if (this.aboutUsFrom.aboutUsId != null) {
					this.form.id = this.aboutUsFrom.aboutUsId
				}
				this.form.key = 'ABOUT_US'
				if (!this.aboutUsFrom.aboutUs) {
					this.$modal.msgError('关于我们内容不能为空')
					return
				}
				this.form.instructions = '关于我们'
				this.form.value = this.aboutUsFrom.aboutUs
			}
			if (this.activeName == 'bluetoothGuidancePermissions') {
				if (
					this.bluetoothGuidancePermissionsFrom
						.bluetoothGuidancePermissionsId != null
				) {
					this.form.id =
						this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissionsId
				}
				this.form.key = 'BLUETOOTH_GUIDANCE_PERMISSIONS'
				if (
					!this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions
				) {
					this.$modal.msgError('蓝牙指引权限内容不能为空')
					return
				}
				this.form.instructions = '蓝牙指引权限'
				this.form.value =
					this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions
			}
			if (this.activeName == 'locationGuidancePermissions') {
				if (
					this.locationGuidancePermissionsFrom.locationGuidancePermissionsId !=
					null
				) {
					this.form.id =
						this.locationGuidancePermissionsFrom.locationGuidancePermissionsId
				}
				this.form.key = 'LOCATION_GUIDANCE_PERMISSIONS'
				if (!this.locationGuidancePermissionsFrom.locationGuidancePermissions) {
					this.$modal.msgError('定位指引权限内容不能为空')
					return
				}
				this.form.instructions = '定位指引权限'
				this.form.value =
					this.locationGuidancePermissionsFrom.locationGuidancePermissions
			}
      if (this.form.value) {
        this.form.value = this.form.value.replace(/\\/g, '') // 兼容表格
				this.form.value = encodeURIComponent(this.form.value)
        console.log("	this.form.value",	this.form.value)
      }
      
			if (this.activeName != 'otherSetting') {
				if (this.form.id != null) {
					updateSetting(this.form).then((response) => {
						this.$modal.msgSuccess('修改成功')
						this.open = false
						this.getList()
					})
				} else {
					addSetting(this.form).then((response) => {
						this.$modal.msgSuccess('保存成功')
						this.open = false
						this.getList()
					})
				}
				this.form.id = null
				this.form.value = null
			} else {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						// 其他设置处理
						if (this.otherForm.id != null) {
							updateOtherSetting(this.otherForm).then((response) => {
								this.$modal.msgSuccess('修改成功')
								this.open = false
								this.getList()
							})
						} else {
							addOtherSetting(this.otherForm).then((response) => {
								this.$modal.msgSuccess('保存成功')
								this.open = false
								this.getList()
							})
						}
					}
				})
			}
		},
		/** 查询平台参数设置列表 */
		/** USER_AGREEMENT-用户协议 PRIVACY_AGREEMENT-隐私协议  INTEGRAL_RULE-积分规则 ABOUT_US-关于我们  BLUETOOTH_GUIDANCE_PERMISSIONS-蓝牙指引权限 LOCATION_GUIDANCE_PERMISSIONS - 定位指引权限 CONTACT_WORKER-联系客服 */
		getList() {
			this.loading = true
			listSetting(this.queryParams).then((response) => {
				this.settingList = JSON.parse(JSON.stringify(response.rows))
				this.total = response.total
				this.loading = false
				// 处理回显逻辑
				this.settingList.forEach((item) => {
					if (item.key == 'USER_AGREEMENT') {
						this.userAgreementFrom.userAgreement = decodeURIComponent(item.value);
						this.userAgreementFrom.userAgreementId = item.id
					}
					if (item.key == 'PRIVACY_AGREEMENT') {
						this.privacyAgreementFrom.privacyAgreement = decodeURIComponent(item.value);
						this.privacyAgreementFrom.privacyAgreementId = item.id
					}
					if (item.key == 'INTEGRAL_RULE') {
						this.integralRuleFrom.integralRule = decodeURIComponent(item.value);
						this.integralRuleFrom.integralRuleId = item.id
					}
					if (item.key == 'ABOUT_US') {
						this.aboutUsFrom.aboutUs = decodeURIComponent(item.value);
						this.aboutUsFrom.aboutUsId = item.id
					}
					if (item.key == 'BLUETOOTH_GUIDANCE_PERMISSIONS') {
						this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions =
						decodeURIComponent(item.value);
						this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissionsId =
							item.id
					}
					if (item.key == 'LOCATION_GUIDANCE_PERMISSIONS') {
						this.locationGuidancePermissionsFrom.locationGuidancePermissions =
						decodeURIComponent(item.value);
						this.locationGuidancePermissionsFrom.locationGuidancePermissionsId =
							item.id
					}
					if (item.key == 'CONTACT_WORKER') {
						this.contactWorkerFrom.contactWorkerSrc = item.pictureUrl
						this.contactWorkerFrom.contactWorkerId = item.id
					}
				})
			})
			listOtherSetting(this.otherQueryParams).then((response) => {
				this.otherForm = response.rows.length > 0 ? response.rows[0] : {}
				this.loading = false
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				key: null,
				value: null,
				instructions: null,
				status: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				remark: null,
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm')
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.open = true
			this.title = '添加平台参数设置'
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			const id = row.id || this.ids
			getSetting(id).then((response) => {
				this.form = response.data
				this.open = true
				this.title = '修改平台参数设置'
			})
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			// this.upload.isUploading = true;
			console.log('上传处理中==>', JSON.stringify(event))
		},
		// 文件上传成功处理
		handleFileSuccess(response, file, fileList) {
			console.log('上传后的结果==>', JSON.stringify(response))
			if (response.code == '200') {
				this.contactWorkerFrom.contactWorkerSrc = response.data.url
				this.form.key = 'CONTACT_WORKER'
				this.form.instructions = '联系客服'
				this.form.pictureUrl = this.contactWorkerFrom.contactWorkerSrc
				if (this.contactWorkerFrom.contactWorkerId != null) {
					this.form.id = this.contactWorkerFrom.contactWorkerId
				}
				// 处理保存处理接口
				if (this.form.id != null) {
					updateSetting(this.form).then((response) => {
						this.$modal.msgSuccess('修改成功')
						this.open = false
						this.getList()
					})
				} else {
					addSetting(this.form).then((response) => {
						this.$modal.msgSuccess('保存成功')
						this.open = false
						this.getList()
					})
				}
				this.form.id = null
				this.form.pictureUrl = null
			}
			// this.upload.open = false;
			// this.upload.isUploading = false;
			// this.$refs.upload.clearFiles();
			// this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
			// this.getList();
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids
			this.$modal
				.confirm('是否确认删除平台参数设置编号为"' + ids + '"的数据项？')
				.then(function () {
					return delSetting(ids)
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess('删除成功')
				})
				.catch(() => {})
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'system/setting/export',
				{
					...this.queryParams,
				},
				`setting_${new Date().getTime()}.xlsx`
			)
		},
	},
}
</script>
