<template>
	<!-- 20221220 -->
	<view class="feedback-index-page">
		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 顶部固定 -->
			<view class="jc-header bg-ff">

				<!-- 图片 -->
				<view class="padding-lr-30 padding-tb-10">
					<image class="jc-image" style="width: 690rpx;height: 220rpx;" mode="aspectFill" :src="topImg">
					</image>
				</view>

				<!-- 切换标签 -->
				<view class="">
					<ty-tab-around :list="tabsList" :list-key="listKey" :active.sync="tabsIndex" :color="'#2F97FF'"
						@click="changeTabs">
					</ty-tab-around>
				</view>
			</view>

			<!-- 意见反馈 -->
			<view class="content-block">
				<view class="" v-if="tabsIndex == 0">
					<!-- 反馈内容 -->
					<view class="padding-lr-30 bg-ff ">

						<view class="line-height-100 text-28 text-4d">问题反馈类型</view>

						<!-- 类别 -->
						<view class="flex flex-wrap">
							<view class="category-item margin-bottom-20" :class="{ 'active' : categoryIndex == index}"
								v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index)">
								{{item.name}}
							</view>
						</view>

						<!-- 文本框 -->
						<view class="dashed-bottom-ed padding-bottom-10">
							<textarea class="feedback-content margin-top-20 line-40" placeholder="选择问题类型，帮助我们更快处理您的反馈"
								placeholder-class="text-28 text-b3" maxlength="500" v-model="content"></textarea>

							<view class="margin-top-30 flex justify-end text-28" style="color: #d8d8d8;">
								{{content.length > 500 ? 500 : content.length}}/500
							</view>
						</view>

						<!-- 图片上传 -->
						<view class="padding-top-30">
							<ty-image-images-upload :count="imageCount" :image_list="imagePath"
								:video-count="videoCount" @imageChange="imageChange">
							</ty-image-images-upload>
						</view>
					</view>

					<!-- 个人信息 -->
					<view class="margin-top-15 padding-lr-30 bg-ff">
						<view class="line-100 border-bottom flex align-center">
							<view class="width-160">联系人姓名</view>
							<input class="flex-one margin-left-30" placeholder="请输入联系人姓名" type="text" v-model="linkman"
								placeholder-class="text-b3 text-28" />
						</view>
						<view class="line-100 flex align-center">
							<view class="width-160">手机号码</view>
							<input class="flex-one margin-left-30" placeholder="请输入手机号" type="number" maxlength="11"
								v-model="mobilePhone" placeholder-class="text-b3 text-28" />
						</view>
					</view>

					<!-- 提交按钮 -->
					<view class="btn width-100p padding-lr-30" @click="submit">
						<view class="line-height-80 radius-40 bg-2f9 text-center text-28 text-ff">提交</view>
					</view>
				</view>


				<view class="text-28" v-if="tabsIndex == 1">
					<ty-list-list :status="load_status">
						<view class="margin-20 bg-ff radius-10" v-for="(item,index) in list" :key="index">
							<!-- 内容 -->
							<view class="padding-30 border-bottom-ed"
								@click="go('/pages/feedback/detail?id=' + item.id)">
								<view class="flex align-center justify-between">
									<view class="text-28" style="color: #2A2A2A;">
										<text class="margin-right-50" v-if="item.linkman">{{item.linkman}}</text>
										<text>{{item.mobile_phone}}</text>
									</view>
									<view class="text-28" style="color: #2A2A2A;">
										{{item.category_name}}
									</view>
								</view>
								<view class="margin-top-30 height-80 line-40 text-26 text-4d text-cut-two">
									{{item.content}}
								</view>
							</view>
							<!-- 操作按钮 -->
							<view class="flex align-center justify-between padding-lr-30 height-100">
								<view class="text-24 text-b3">
									{{item.show_create_time}}
								</view>
								<view class="flex align-center justify-end">
									<view class="line-btn" @click="del(index)">
										删除记录
									</view>
									<view class="full-btn" @click="go('/pages/feedback/detail?id=' + item.id)">
										查看详情
									</view>
								</view>
							</view>

						</view>
					</ty-list-list>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>

</template>

<script>
	import feedback from "./api/feedback.js"
	export default {
		data() {
			return {
				// 顶部图片
				topImg: "",
				// 分类列表
				categoryList: [],
				// 分类选中INDEX
				categoryIndex: -1,
				// tab标签选中INDEX
				tabsIndex: 0,
				// 显示key
				listKey: '',
				// tab标签
				tabsList: ['意见反馈', '反馈记录'],
				// 图片数量
				imageCount: 9,
				// 视频数量，为0，没有视频
				videoCount: 0,
				// 上传的图片
				imagePath: [],
				// 意见反馈内容
				content: '',
				// 联系人
				linkman: '',
				// 联系电话
				mobilePhone: '',
				// 列表状态
				load_status: '',
				// 列表
				list: []
			}
		},


		onReady() {
			// 获取配置
			this.getConfig()

			// 获取分类列表
			this.listCategory()
		},

		methods: {
			/**
			 * 获取配置
			 * @date 2022-10-20
			 */
			getConfig() {
				feedback.getFeedbackConfig().then(res => {
					if (res.code == 0) {
						// 顶部图片
						this.topImg = res.data.top_img
					}
				})
			},

			/**
			 * 获取分类列表
			 * @date 2022-10-20
			 */
			listCategory() {
				feedback.listCategory().then(res => {
					if (res.code == 0) {
						// 分类列表
						this.categoryList = res.data.category_list
					}
				})
			},

			/**
			 * 切换标签
			 * @date 2022-10-20
			 */
			changeTabs(e) {
				if (e.index == 1) {
					this.loadList(1)
				}
			},

			/**
			 * 切换分类
			 * @date 2022-10-20
			 */
			categoryClick(index) {
				this.categoryIndex = index
			},


			/**
			 * 上传图片
			 * @date 2022-12-20
			 */
			imageChange(e) {
				this.imagePath = e.image_list
			},

			/**
			 * 提交反馈
			 * @date 2022-12-20
			 */
			submit() {

				if (this.categoryIndex == -1) {
					this.cn.toast('请选择类别')
					return false
				}
				if (!this.mobilePhone) {
					this.cn.toast('请填写手机号码')
					return false
				}
				if (!this.content) {
					this.cn.toast('请填写反馈内容')
					return false
				}

				feedback.insertFeedback(this.categoryList[this.categoryIndex].id, this.content, this.imagePath, this
					.mobilePhone, this.linkman).then(res => {
					if (res.code == 0) {
						this.cn.alert(res.msg).then(res => {
							this.linkman = ''
							this.mobilePhone = ''
							this.content = ''
							this.imagePath = []
							this.categoryIndex = -1
							this.tabsIndex = 1

							this.loadList(1)
						})
					}
				})
			},

			/**
			 * 删除意见反馈
			 * @param {int} index 第INDEX条数据
			 * @date 2022-12-22
			 */
			del(index) {
				let feedbackId = this.list[index].id
				this.cn.confirm('确认要删除吗?').then(res => {
					if (res.confirm) {
						feedback.deleteFeedback(feedbackId).then(res => {
							if (res.code == 0) {
								this.loadList(1)
							}
						})
					}
				})
			},

			/**
			 * 加载列表
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-12-22
			 */
			loadList(isFirstPage) {
				feedback.listFeedback(this, isFirstPage)
			}
		}
	}
</script>

<style scoped>
	/* 内容区域 */
	.content-block {
		margin-top: calc(240rpx + 88rpx + 15rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx + 40rpx);
	}

	/* 分类 */
	.category-item {
		margin-right: 15rpx;
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		background: #F5F5F5;
		text-align: center;
		font-size: 26rpx;
		color: #4D4D4D;
	}

	.category-item.active {
		background: #2F97FF;
		color: #fff;
	}

	/* 意见反馈内容 */
	.feedback-content {
		width: 100%;
		height: 160rpx;
		line-height: 40rpx;
	}

	/* 提交按钮 */
	.btn {
		position: fixed;
		left: 0;
		bottom: calc(20rpx + env(safe-area-inset-bottom));
	}
</style>
