<template>
	<div class="setting flex align-center justify-center">
		<!-- 主内容区 -->
		<div class="content flex algin-center justify-between">
			<!-- 左侧菜单 -->
			<div class="content-left">
				<div class="content-left-box">
					<div @click="goNav(item,index)" :class="$route.name == item.path?'content-left-box-active':''"
						@mouseover="item.isse = true" @mouseout="item.isse = false"
						class="content-left-box-item flex algin-center justify-center" v-for="(item,index) in linkList"
						:key="index">
						<img v-if="$route.name == item.path" :src="item.src2" alt="" />
						<img v-else :src="item.isse?item.src2:item.src1" alt="" />
						{{item.name}}
					</div>
				</div>
			</div>
			<!-- 右侧内容 -->
			<div class="content-right flex align-center justify-center">
				<div class="content-right-con">
					<div class="content-right-con-title flex align-center justify-between">
						{{linkList[linkIndex].name}}
						<div class="content-right-con-title-line"></div>
						<!-- <el-button @click="show = true" icon="edit" plain>意见反馈</el-button> -->
					</div>
					<div ref="conBoxRef" class="content-right-con-router">
						<router-view></router-view>
					</div>

				</div>

			</div>
		</div>
		<!-- 举报弹窗 -->
		<el-dialog v-model="show" :draggable="true" destroy-on-close align-center center>
			<template #header>
				<div class="my-header flex align-center">
					<div class="my-header-title" style="font-weight: bold;">
						意见反馈
					</div>
				</div>
			</template>
			<div class="jb" v-loading="loading">
				<div class="jb-title">
					问题和意见
				</div>
				<div class="jb-text">
					<el-input resize="none" :input-style="inputStyles" v-model="sendDate.content"
						:autosize="{ minRows: 6, maxRows: 8 }" type="textarea" placeholder="请详细描述你的问题和意见..." />
				</div>
				<div class="jb-title" style="margin-top: 20px;">
					电话/微信
				</div>
				<div class="jb-text jb-texts">
					<el-input :input-style="inputStyles" style="width: 100%;" v-model="sendDate.contact"
						placeholder="方便我们联系您" />
				</div>
				<div class="jb-btn flex align-center">
					<el-button @click.stop="show = false">取消</el-button>
					<el-button type="primary" @click.stop="reportSave">提交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ElMessageBox,
		ElMessage,
	} from 'element-plus'
	import {
		CalculationInterpolation
	} from 'sass';
	export default {
		data() {
			return {
				screenHeight: 0,
				sendDate: {
					content: '',
					contact: ''
				},
				inputStyles: {
					border: 'none',
					background: '#F7F7F7',
					borderRadius: '8px',
					boxShadow: 'none',
				},
				loading: false,
				show: false,
				linkIndex: 0,
				linkList: [
					{
						name: '隐私协议',
						path: 'agreement',
						isse: false,
						type: 1,
						src1: '/images/setting/privacy.png',
						src2: '/images/setting/privacy_.png'
					},
			], //左侧路由列表
			}
		},
		computed: {
			userType() {
				return localStorage.getItem('userType');
			},
			zhiRate() {
				return this.$store.state.zhiRate ? this.$store.state.zhiRate : localStorage.getItem('zhiRate');
			},
		},
		mounted() {
			this.screenHeight = window.innerHeight
			if (this.userType == 1) { //用户
				this.linkList = [...this.linkList, ...[
					// {
					// 	name: '屏蔽公司',
					// 	path: 'shield',
					// 	isse: false,
					// 	src1: '/images/setting/shield.png',
					// 	src2: '/images/setting/shield_.png'
					// },
					// {
					// 	name: '隐私协议',
					// 	path: 'agreement',
					// 	isse: false,
					// 	type: 1,
					// 	src1: '/images/setting/privacy.png',
					// 	src2: '/images/setting/privacy_.png'
					// },
					{
						name: '用户协议',
						path: 'agreementU',
						isse: false,
						type: 2,
						src1: '/images/setting/useragr.png',
						src2: '/images/setting/useragr_.png'
					},
					// {
					// 	name: '关于我们',
					// 	path: 'agreementG',
					// 	isse: false,
					// 	type: 3,
					// 	src1: '/images/setting/about.png',
					// 	src2: '/images/setting/about_.png'
					// }, 
					{
						name: '修改密码',
						path: 'upDataPassWord',
						isse: false,
						type: 3,
						src1: '/images/setting/account.png',
						src2: '/images/setting/account_.png'
					},
					// {
					// 	name: '注销账号',
					// 	path: 'logoff',
					// 	isse: false,
					// 	type: 3,
					// 	src1: '/images/setting/zhuxiao.png',
					// 	src2: '/images/setting/zhuxiao_.png'
					// },
					{
						name: '退出登录',
						path: 'noLogin',
						isse: false,
						type: 3,
						src1: '/images/setting/logOff.png',
						src2: '/images/setting/logOff_.png'
					}
				]]
			} else { //企业
				this.linkList = [...this.linkList, ...[
					// {
					// 	name: '黑名单',
					// 	path: 'blacklist',
					// 	isse: false,
					// 	src1: '/images/setting/shield.png',
					// 	src2: '/images/setting/shield_.png'
					// },
					// {
					// 	name: '转让企业',
					// 	path: 'transference',
					// 	isse: false,
					// 	src1: '/images/setting/zr.png',
					// 	src2: '/images/setting/zr_.png'
					// },
					// {
					// 	name: '隐私协议',
					// 	path: 'agreement',
					// 	isse: false,
					// 	type: 1,
					// 	src1: '/images/setting/privacy.png',
					// 	src2: '/images/setting/privacy_.png'
					// },
					{
						name: '用户协议',
						path: 'agreementU',
						isse: false,
						type: 2,
						src1: '/images/setting/useragr.png',
						src2: '/images/setting/useragr_.png'
					},
					// {
					// 	name: '关于我们',
					// 	path: 'agreementG',
					// 	isse: false,
					// 	type: 3,
					// 	src1: '/images/setting/about.png',
					// 	src2: '/images/setting/about_.png'
					// }, 
					{
						name: '修改密码',
						path: 'upDataPassWord',
						isse: false,
						type: 3,
						src1: '/images/setting/account.png',
						src2: '/images/setting/account_.png'
					}, 
					// {
					// 	name: '注销账号',
					// 	path: 'logoff',
					// 	isse: false,
					// 	type: 3,
					// 	src1: '/images/setting/zhuxiao.png',
					// 	src2: '/images/setting/zhuxiao_.png'
					// },
					{
						name: '退出登录',
						path: 'noLogin',
						isse: false,
						type: 3,
						src1: '/images/setting/logOff.png',
						src2: '/images/setting/logOff_.png'
					}
				]]
			}
			if (Number(this.zhiRate) > 0) {
				let obj = {
					name: '我的团队',
					path: 'myTeam',
					isse: false,
					src1: '/images/setting/myTeam.png',
					src2: '/images/setting/myTeam_.png'
				}
				this.linkList.splice(1, 0, obj)
			}
			if (this.linkList.length > 1) {
				//处理页面刷新后右侧标题显示的问题
				let indexs = this.linkList.findIndex(item => item.path == this.$route.name)
				if (indexs != -1) {
					this.linkIndex = indexs
				}
			}

		},
		methods: {
			//用户反馈
			reportSave() {
				if (!this.sendDate.content) {
					ElMessageBox.alert('请输入意见反馈内容', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				if (!this.sendDate.content) {
					ElMessageBox.alert('请输入联系方式', '提示', {
						confirmButtonText: '确认',
					})
					return
				}
				this.loading = true
				let data = {
					title: this.sendDate.contact,
					content: JSON.stringify(this.sendDate),
					state: 2
				}
				this.$Request.post('/app/message/insertMessage', data, {
					type: 'json'
				}).then(res => {
					if (res.code == 0) {
						ElMessage({
							message: '已提交',
							type: 'success',
							duration: 1500,
							offset: this.screenHeight / 2
						})
						this.loading = false
						this.show = false
					} else {
						this.loading = false
						ElMessageBox.alert(res.msg, '提示', {
							confirmButtonText: '确认'
						})
					}
				})
			},
			//切换路由
			goNav(item, index) {

				this.linkIndex = index
				if (item.path == 'noLogin') {
					ElMessageBox.confirm(
						'确认退出登录吗？',
						'提示', {
							confirmButtonText: '退出',
							cancelButtonText: '取消',
							type: 'warning',
						}
					).then(() => {
						localStorage.removeItem('token');
						localStorage.removeItem('userId');
						localStorage.removeItem('userType')
						// 调用重置状态的函数  
						this.$store.dispatch('SET_DATA');
						this.$router.push({
							name: 'login'
						})
					}).catch(() => {})

				} else {
					// conBoxRef
					const conBoxRouterHeight = this.$refs.conBoxRef.offsetHeight
					if (item.type) {
						this.$router.push({
							name: item.path,
							query: {
								type: item.type,
							}
						})
					} else {
						this.$router.push({
							name: item.path,
							query: {
								conBoxRouterHeight: conBoxRouterHeight
							}
						})
					}
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	$margin-60: 120px;

	.my-header {
		padding: 10px 10px 0 10px;
	}

	:deep(.el-input__wrapper) {
		background-color: #F7F7F7 !important;
		box-shadow: none !important;
	}

	:deep(.el-input) {
		--el-input-focus-border: none;
		--el-input-focus-border-color: none;
	}

	:deep(.is-focus) {
		box-shadow: none;
	}

	:deep(.el-textarea__inner) {
		box-shadow: none;
	}

	:deep(.el-input__wrapper:hover) {
		box-shadow: none;
	}

	:deep(.el-dialog) {
		border-radius: 14px !important;
		padding: 0 !important;
	}

	:deep(.el-dialog__body) {
		padding-top: 10px !important;

	}

	:deep(.el-dialog__header) {
		background: linear-gradient(45deg, #f2fffa, #FFFFFF);
		border-radius: 14px 14px 0 0;
	}

	.jb {
		width: calc(100% - 20px);
		padding: 10px 10px;

		.jb-title {
			color: #333333;
			font-size: 14px;
			font-weight: 500;
		}

		.jb-text {
			width: 100%;
			margin-top: 10px;
			background-color: #F7F7F7;
			border-radius: 8px;
		}

		.jb-btn {
			margin-top: 40px;
			justify-content: flex-end;
		}
	}

	.content-left-box-active {
		color: #00DD9A !important;
		background-color: rgba(0, 221, 154, 0.1) !important;
		border-left: 4px solid #00DD9A !important;
	}

	.setting {
		width: 100%;
	}

	.content {
		margin-top: 20px;
		width: calc(100% - $margin-60 * 2);
		height: 80vh;

	}

	.content-left {
		width: 270px;
		background-color: #ffffff;
		border-radius: 12px;

		.content-left-box {
			margin-top: 20px;
			width: 100%;
			height: calc(100% - 40px);
			overflow: hidden;
			overflow-y: scroll;
		}

		.content-left-box::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

		.content-left-box::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.content-left-box::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}

		.content-left-box-item:hover {
			color: #00DD9A !important;
			background-color: rgba(0, 221, 154, 0.1);
			border-left: 4px solid #00DD9A;
		}

		.content-left-box-item {
			width: calc(100% - 4px);
			padding: 15px 0;
			cursor: pointer;
			margin-bottom: 20px;
			color: #222222;
			font-weight: 500;
			border-left: 4px solid #ffffff;
			border-radius: 0px 8px 8px 0px;

			img {
				width: 22px;
				height: 22px;
				margin-right: 5px;
			}
		}
	}

	.content-right {
		width: calc(100% - 290px);
		height: 100%;
		background-color: #ffffff;
		border-radius: 12px;

		.content-right-con {
			width: calc(100% - 40px);
			height: calc(100% - 40px);

		}

		.content-right-con-title {
			width: 100%;
			height: 50px;
			border-bottom: 1px solid #EBEBEB;
			color: #00DD9A;
			font-weight: 500;
			position: relative;
		}

		.content-right-con-title-line {
			position: absolute;
			width: 80px;
			height: 2px;
			background-color: #00DD9A;
			bottom: 0;
		}

		.content-right-con-router {
			width: 100%;
			height: calc(100% - 70px);
			margin-top: 20px;
			overflow: hidden;
			overflow-y: scroll;
		}

		.content-right-con-router::-webkit-scrollbar {
			/* Chrome, Safari, Opera */
			width: 0px;
		}

		.content-right-con-router::-webkit-scrollbar-thumb {
			background-color: #cccccc;
			/* 滚动条颜色 */
		}

		.content-right-con-router::-webkit-scrollbar-track {
			background-color: #ffffff;
			/* 轨道颜色 */
		}
	}
</style>