<template>
	<view class="complain">
		<view class="content">
			<view class="title">
				投诉类型
			</view>
			<view class="select" v-for="(item,index) in list" :key="index" @click="selectType(item,index)">
				{{item.info}}
				<image src="/static/other/select.png" mode="" v-if="currentIndex === index"></image>
				<image src="/static/other/no_select.png" mode="" v-else></image>
			</view>
		</view>
		<view class="content">
			<view class="title">
				问题描述
			</view>
			<view class="select">
				<textarea v-model="form.description" placeholder="您的反馈将帮助我们改善服务品质,期待您的反馈"></textarea>
			</view>
		</view>
		<view class="content">
			<view class="title">
				投诉商户
			</view>
			<view class="select">
				<input type="text" v-model="form.name" placeholder="请输入您要投诉的商户姓名" />
			</view>
			<view class="city" @click="selectCity" v-if="form.deptName == ''">
				所在城市
			</view>
			<view class="city" v-else>
				{{form.deptName}}
			</view>
		</view>
		<view class="content">
			<view class="title">
				手机号码
			</view>
			<view class="select">
				<input v-model="form.phone" placeholder="请输入您的手机号码,以便我们及时联系您"></input>
			</view>
		</view>
		<view class="content">
			<view class="title">
				添加图片
			</view>
			<view class="select">
				<Upload
					:maxCount="2"
					@fileList="onUpload($event, 'photograph')"
				/>
			</view>
		</view>
		<view class="btn_box">
			<view class="btn" @click="submit">
				提交
			</view>
		</view>

		<u-picker :show="show" :columns="[cityList]" keyName="label" 
			@cancel="show = false" @confirm="onSelect"
		></u-picker>
	</view>
</template>

<script>
	import {
		complain,
		getCityList,complaintEnum
	} from '@/api/index'
	import Upload from '@/components/upload/index.vue';
  import { baseUrl } from '@/common/config.js';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				list: [],
				cityList: [],
				city: '',
				currentIndex: '',
				describe: '',
				jsName: '',
				photograph: [],
				show: false,
				urlImg: [],
				form: {
					description: '',
					complaintType: '',
					name: '',
					photograph: '',
					deptName: '',
					phone:'',
					deptId: null
				},
				token: ''
			}
		},
		onShow() {
			// this.token =
			// 	'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiN2UyOTU5NC0wNjE0LTQ2MWUtOThmYy1hMGJlYWNjYjExZWUifQ.SYH2TuRT-DVjzbW2moz6pgkItmsOsUEbh8jENZlCM9RV0AUEMFq9P7HEtuVa1LXWts1k3ss1VD1rpMrnr_9EFA'
			// uni.setStorageSync('access-token',
			// 	'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiN2UyOTU5NC0wNjE0LTQ2MWUtOThmYy1hMGJlYWNjYjExZWUifQ.SYH2TuRT-DVjzbW2moz6pgkItmsOsUEbh8jENZlCM9RV0AUEMFq9P7HEtuVa1LXWts1k3ss1VD1rpMrnr_9EFA'
			// 	)
			this.getCity()
			this.complaintEnum()
		},
		mounted() {
			// 在页面加载时获取Token，可以从本地缓存中获取
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
		},
		methods: {
			selectType(item, index) {
				this.currentIndex = index
				this.form.complaintType = item.desc
			},
			// upload事件
			onUpload(e, t) {
				this[t] = e.map(item => item.url).join();
			},
			selectCity() {
				this.show = true
			},
			onSelect(e) {
				this.form.deptName = e.value[0].label
				this.form.deptId = e.value[0].value
			},
			submit() {
        if (this.photograph) {
          let escapedBaseUrl = baseUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
          this.form.photograph = (this.photograph+'').replace(new RegExp(escapedBaseUrl, 'g'), '');
        }
        uni.navigateBack()
        return false;
				if (this.form.complaintType == '') {
					uni.showToast({
						title: '请选择投诉类型',
						icon: 'none'
					})
					return
				} else {
					complain(this.form).then(res => {
						console.log(res)
						if (res.data.code == 200){
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
              uni.switchTab({
                url: '/pages/my/my'
              })
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			complaintEnum(){
				complaintEnum().then(res => {
					this.list = res.data.data
				})
			},
			getCity() {
				getCityList().then(res => {
					this.cityList = res.data.data.map(({
						deptId,
						deptName
					}) => ({
						value: deptId,
						label: deptName
					}))
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.complain {
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #fcfdff, #b1fffc);
		padding-top: 20px;
		overflow-y: auto;
		padding-bottom: 100px;

		.content {
			width: 95%;
			margin: 10px auto;
			background-color: #fff;
			border-radius: 10px;
			padding: 20rpx;
			box-sizing: border-box;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

			.title {
				width: 100%;
				background-color: #f7f7f7;
				margin: 0 auto;
				padding: 10rpx 0px;
				text-align: center;
				border-radius: 10px;
			}

			.select {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: 20px 0px;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				textarea {
					width: 100%;
					height: 100px;
					background-color: #f7f7f7;
					padding: 10px;
					border-radius: 10px;
				}

				input {
					width: 100%;
					background-color: #f7f7f7;
					padding: 10px;
					border-radius: 10px;
					font-size: 24rpx;
				}

			}

			.city {
				width: 100%;
				font-size: 24rpx;
				box-sizing: border-box;
				background-color: #f7f7f7;
				margin: 0 auto;
				padding: 10px;
				// text-align: left;
				border-radius: 10px;
			}
		}

		.btn_box {
			width: 100%;
			height: 60px;
			background-color: #fff;
			position: fixed;
			bottom: 0px;

			.btn {
				width: 40%;
				height: 40px;
				text-align: center;
				background: linear-gradient(to right, #35c99d, #27aea7);
				margin: 20rpx auto;
				line-height: 40px;
				border-radius: 10px;
				color: #fcfdff;
			}
		}
	}
</style>