<template>
	<view class="question-box">
		<global-loading />
		<view class="tabsbox">
			<u-tabs
				:list="questionTypeList" bar-width="140" :bold="false" active-color="#C5AA7B"
				inactive-color="#999999"
				:is-scroll="false" :current="questionTypeFlag" @change="questionTypeActive"
			>
			</u-tabs>
		</view>
		<view v-if="questionTypeFlag == 0">
			<view v-if="problemList.length > 0">
				<view class="wid function-box">
					<view v-if="allCheckShow" class="finishbox" @click="finishClick">完成</view>
					<view v-else class="flex-row-plus editicon-box flex-items fs28" @click="editClick">
						<image class="editicon" src="../../static/images/origin/collectionEditicon.png">
						</image>
						<text class="mar-left-10">编辑</text>
					</view>
				</view>
				<view class="swipe-box">
					<u-swipe-action
						v-for="(item, index) in problemList" :key="item.problemId" ref="problemActionSwipe"
						:show="item.show" :index="index" :disabled="allCheckShow" :auto-close="false"
						:options="options"
						@click="problemClick" @open="problemOpen"
					>
						<view class="flex-item itemBox" @click="goQuestionDetails(item.productId, item.problemId)">
							<view class="item u-border-bottom wid flex-row-plus flex-items">
								<view v-show="allCheckShow">
									<image
										v-if="item.selected == 1" mode="aspectFill" src="../../static/images/origin/selectActive.png"
										class="cart-select-img" @click.stop="problemItemSel(index, 0)"
									></image>
									<image
										v-else mode="aspectFill" src="../../static/images/origin/selectEmpty.png" class="cart-select-img"
										@click.stop="problemItemSel(index, 1)"
									></image>
								</view>
								<!--								<image class="product-img" mode="aspectFill" :src="item.image" /> -->
								<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
								<view class="title-wrap replynum-box">
									<view class="flex-items">
										<label>问</label>
										<text class="title u-line-2 font-weight-bold fs28">{{ item.problem }}</text>
									</view>
									<view class="flex-items reply">
										<label>答</label>
										<text v-if="item.count > 0" class="font-color-666 fs24">{{ item.count }}条回复</text>
										<text v-else class="font-color-666 fs24">暂无回复</text>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="borRig-line-20"></view> -->
					</u-swipe-action>
				</view>
				<view v-show="allCheckShow" class="allcheck-box flex-row-plus flex-sp-between flex-items">
					<view class="left">
						<image
							v-if="isAllProblemCheck" mode="aspectFill" src="../../static/images/origin/selectActive.png"
							class="cart-select-img" @click="allProblemSel(0)"
						></image>
						<image
							v-else mode="aspectFill" src="../../static/images/origin/selectEmpty.png" class="cart-select-img"
							@click="allProblemSel(1)"
						></image>
						<text>全选</text>
					</view>
					<view class="right">
						<view class="btn-delete" @click="questionDel(0)">删除</view>
					</view>
				</view>
				<view v-if="allCheckShow" class="pad-bot-140"></view>
			</view>
			<view v-if="ifEmpty" class="empty-box">
				<image class="question-empty" src="../../static/images/origin/bgnull.png"></image>
				<view class="tohome-box flex-items-plus">暂无提问内容</view>
			</view>
		</view>
		<view v-if="questionTypeFlag == 1">
			<view v-if="answerList.length > 0">
				<view v-if="allCheckShow" class="finishbox" @click="finishClick">完成</view>
				<view v-else class="flex-row-plus editicon-box flex-items fs28" @click="editClick">
					<image class="editicon" src="../../static/images/origin/collectionEditicon.png">
					</image>
					<text class="mar-left-10">编辑</text>
				</view>
				<view class="swipe-box">
					<u-swipe-action
						v-for="(item, index) in answerList" :key="item.answerId" ref="answerActionSwipe"
						:show="item.show" :index="index" :disabled="allCheckShow" :auto-close="false"
						:options="options"
						@click="answerClick" @open="answerOpen"
					>
						<view
							class="item itemBox u-border-bottom flex-item"
							@click="goQuestionDetails(item.productId, item.problemId)"
						>
							<view class="wid" style="border-radius: 50%;">
								<view class="flex-items-plus flex-row wid">
									<view v-show="allCheckShow">
										<image
											v-if="item.selected == 1" mode="aspectFill" src="../../static/images/origin/selectActive.png"
											class="cart-select-img" @click.stop="answerItemSel(index, 0)"
										></image>
										<image
											v-else mode="aspectFill" src="../../static/images/origin/selectEmpty.png"
											class="cart-select-img" @click.stop="answerItemSel(index, 1)"
										></image>
									</view>
									<!--									<image class="product-img" mode="aspectFill" :src="item.image" /> -->
									<view class="title-wrap replynum-box wid">
										<view class="flex-items">
											<label>问</label>
											<text class="title u-line-2 fs28 font-weight-bold">{{ item.problem }}</text>
										</view>
										<view class="replyBox">
											<view class="flex-items reply">
												<label>答</label>
												<text v-if="allCheckShow" style="width: 270rpx;" class="font-color-666 fs24 overflow">
													{{ item.name }} :
													{{ item.answer }}
												</text>
												<text v-else style="width: 360rpx;" class="font-color-999 fs24 overflow">
													{{ item.name }} :
													{{ item.answer }}
												</text>
											</view>
											<view class="qAarrow mar-top-30 flex-items">
												<text class="fs24 font-color-C5AA7B">共{{ item.count }}个回答</text>
												<image class="item-btn-right" src="../../static/images/origin/arrow.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="borRig-line-20"></view> -->
					</u-swipe-action>
				</view>
				<view v-show="allCheckShow" class="allcheck-box flex-row-plus flex-sp-between flex-items">
					<view class="left">
						<image
							v-if="isAllAnswerCheck" mode="aspectFill" src="../../static/images/origin/selectActive.png"
							class="cart-select-img" @click="allAnswerSel(0)"
						></image>
						<image
							v-else mode="aspectFill" src="../../static/images/origin/selectEmpty.png" class="cart-select-img"
							@click="allAnswerSel(1)"
						></image>
						<text>全选</text>
					</view>
					<view class="right">
						<view class="btn-delete" @click="questionDel(1)">删除</view>
					</view>
				</view>
				<view v-if="allCheckShow" class="pad-bot-140"></view>
			</view>
			<view v-if="ifEmpty" class="empty-box">
				<image class="question-empty" src="../../static/images/origin/bgnull.png"></image>
				<view class="tohome-box flex-items-plus">暂无问答内容</view>
			</view>
		</view>
		<!-- <u-popup v-model="delshow" class="" mode="center" border-radius="14">
			<view class="pad-topbot-50 del-box flex-items-plus flex-column-plus">
			<label class="font-weight-bold font-color-222 fs36">删除回答？</label>
			<label class="fs28 font-color-222 mar-top-50">删除回答后无法恢复</label>
			<view class="flex-row-plus mar-top-60">
			<view class="del-but" @click="delClick">继续删除</view>
			</view>
			</view>
			<view class="cancel-but" @click="cancelClick">
			<image src="../../static/images/origin/cancelClose.png" mode=""></image>
			</view>
			</u-popup> -->
		<!-- 删除确认弹窗 -->
		<TuiModal :show="delshow" :custom="true" :fadein="true">
			<view class="Put-box1">
				<view class="text-align fs34 fs-bold">
					删除回答？
				</view>
				<view class="mar-top-40 text-align">
					删除回答后无法恢复
				</view>
				<view class="flex-display flex-sp-between">
					<view class="btn submit" @click="delClick">继续删除</view>
				</view>
			</view>
			<view class="cancelDel" @click="cancelClick">
				<image src="../../static/images/origin/cancelClose.png" mode=""></image>
			</view>
		</TuiModal>
	</view>
</template>

<script>
import tuiModal from '@/components/modal/modal'
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	components: {
		TuiModal: tuiModal
	},
	data() {
		return {
			questionTypeList: [{
				name: '我的提问(0)'
			}, {
				name: '我的回答(0)'
			}],
			questionTypeFlag: 0,
			disabled: false,
			btnWidth: 180,
			show: false,
			options: [ {
				text: ' ',
				style: {
					backgroundColor: '#C83732'
				}
			} ],
			isAllProblemCheck: false,
			isAllAnswerCheck: false,
			allCheckShow: false,
			delshow: false,
			problemPage: 1,
			problemPageSize: 10,
			proloadingType: 0,
			problemList: [],
			answerList: [],
			answerPage: 1,
			answerPageSize: 10,
			answerloadingType: 0,
			delType: 0,
			ifEmpty: false
		}
	},
	onLoad() {
		this.getProblemList()
		this.getAnswerList()
	},
	onReachBottom() {
		if (this.questionTypeFlag == 0) {
			if (this.proloadingType == 1) {
				uni.stopPullDownRefresh()
			} else {
				this.problemPage = this.problemPage + 1
				this.getProblemList()
			}
		} else if (this.questionTypeFlag == 1) {
			if (this.answerloadingType == 1) {
				uni.stopPullDownRefresh()
			} else {
				this.answerPage = this.answerPage + 1
				this.getAnswerList()
			}
		}
	},
	methods: {
		goQuestionDetails(productId, problemId) {
			const data = {
				productId,
				problemId
			}
			// uni.setStorageSync("seeAllFnData", data)
			// uni.navigateTo({
			// 	url: '../../pages_category_page1/goodsModule/qADetail'
			// })
			this.$jump('/pages_category_page1/goodsModule/qADetail', data)
		},
		// 确定批量删除
		delClick() {
			this.delshow = false
			if (this.delType == 0) {
				this.problemPage = 1
				this.problemPageSize = 10
				this.problemDel()
			} else if (this.delType == 1) {
				this.answerPage = 1
				this.answerPageSize = 10
				this.answerDel()
			}
		},
		// 批量删除
		problemDel() {
			const ids = []
			this.problemList.forEach((value, index) => {
				if (value.selected == 1) {
					ids.push(value.problemId)
				}
			})
			NET.request(API.deleteProblem, {
				ids
			}, 'POST').then((res) => {
				this.problemList = []
				this.$u.toast(`删除成功`)
				this.getProblemList()
			})
				.catch((res) => {
					this.$u.toast(`删除失败`)
				})
		},
		answerDel() {
			const ids = []
			this.answerList.forEach((value, index) => {
				if (value.selected == 1) {
					ids.push(value.answerId)
				}
			})
			NET.request(API.deleteAnswer, {
				ids
			}, 'POST').then((res) => {
				this.answerList = []
				this.$u.toast(`删除成功`)
				this.getAnswerList()
			})
				.catch((res) => {
					this.$u.toast(`删除失败`)
				})
		},
		// 全选
		allProblemSel(type) {
			this.isAllProblemCheck = !this.isAllProblemCheck
			this.problemList.forEach((value, index) => {
				this.problemList[index].selected = type
			})
		},
		allAnswerSel(type) {
			this.isAllAnswerCheck = !this.isAllAnswerCheck
			this.answerList.forEach((value, index) => {
				this.answerList[index].selected = type
			})
		},
		// 单个选中
		problemItemSel(index, number) {
			this.problemList[index].selected = number
			let proSelectNum = 0
			this.problemList.forEach((value, index) => {
				if (this.problemList[index].selected == 0) {
					this.isAllProblemCheck = false
				} else {
					proSelectNum++
				}
			})
			if (this.problemList.length == proSelectNum) {
				this.isAllProblemCheck = true
			}
		},
		answerItemSel(index, number) {
			this.answerList[index].selected = number
			let ansSelectNum = 0
			this.answerList.forEach((value, index) => {
				if (this.answerList[index].selected == 0) {
					this.isAllAnswerCheck = false
				} else {
					ansSelectNum++
				}
			})
			if (this.answerList.length == ansSelectNum) {
				this.isAllAnswerCheck = true
			}
		},
		// 删除提问
		problemClick(index, index1) {
			if (index1 == 0) {
				const ids = this.problemList[index].problemId
				NET.request(API.deleteProblem, {
					ids: [ ids ]
				}, 'POST').then((res) => {
					this.problemPage = 1
					this.problemList = []
					this.proloadingType = 0
					this.getProblemList()
					this.$u.toast(`删除成功`)
				})
					.catch((err) => {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					})
			}
		},
		// 删除回答
		answerClick(index, index1) {
			if (index1 == 0) {
				const ids = this.answerList[index].answerId
				NET.request(API.deleteAnswer, {
					ids: [ ids ]
				}, 'POST').then((res) => {
					this.answerPage = 1
					this.answerList = []
					this.answerloadingType = 0
					this.getAnswerList()
					this.$u.toast(`删除成功`)
				})
					.catch((res) => {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					})
			}
		},
		problemOpen(index) {
			this.problemList[index].show = true
			this.problemList.map((val, idx) => {
				if (index != idx) this.problemList[idx].show = false
			})
		},
		answerOpen(index) {
			this.answerList[index].show = true
			this.answerList.map((val, idx) => {
				if (index != idx) this.answerList[idx].show = false
			})
		},
		// 我的提问列表
		getProblemList() {
			// uni.showLoading({
			// 	mask: true,
			// 	title: '加载中...',
			// })
			NET.request(
				API.getProblemList, {
					page: this.problemPage,
					pageSize: this.problemPageSize
				},
				'GET'
			).then((res) => {
				uni.hideLoading()
				const total = res.data.total
				this.questionTypeList[0].name = '我的提问(' + total + ')'
				if (res.data.list.length == 0) {
					this.proloadingType = 1
					this.problemPage = this.problemPage
				} else {
					this.problemList = this.problemList.concat(res.data.list)
				}
				if (this.problemList.length === 0) {
					this.ifEmpty = true
				} else {
					this.ifEmpty = false
				}
			})
				.catch((res) => {
					uni.showToast({
						title: '我的提问查询失败',
						icon: 'none'
					})
				})
		},
		// 我的回答列表
		getAnswerList() {
			// uni.showLoading({
			// 	mask: true,
			// 	title: '加载中...',
			// })
			NET.request(
				API.getAnswerList, {
					page: this.answerPage,
					pageSize: this.answerPageSize
				},
				'GET'
			).then((res) => {
				uni.hideLoading()
				const total = res.data.total
				this.questionTypeList[1].name = '我的回答(' + total + ')'
				if (res.data.list.length == 0) {
					this.answerloadingType = 1
					this.answerPage = this.answerPage
				} else {
					this.answerList = this.answerList.concat(res.data.list)
				}
				if (this.answerList.length === 0) {
					this.ifEmpty = true
				} else {
					this.ifEmpty = false
				}
			})
				.catch((res) => {
					uni.showToast({
						title: '失败',
						icon: 'none'
					})
				})
		},
		questionTypeActive(index) {
			this.ifEmpty = false
			this.questionTypeFlag = index
			if (index == 0) {
				this.problemPage = 1
				this.problemList = []
				this.proloadingType = 0
				this.getProblemList()
			} else if (index == 1) {
				this.answerPage = 1
				this.answerList = []
				this.answerloadingType = 0
				this.getAnswerList()
			}
		},
		editClick() {
			this.allCheckShow = true
			const problemActionSwipe = this.$refs.problemActionSwipe
			const answerActionSwipe = this.$refs.answerActionSwipe
			if (problemActionSwipe) {
				problemActionSwipe.forEach((item) => item.close())
			}
			if (answerActionSwipe) {
				answerActionSwipe.forEach((item) => item.close())
			}
		},
		finishClick() {
			this.allCheckShow = false
		},
		cancelClick() {
			this.delshow = false
		},
		questionDel(num) {
			let quNum = 0
			let anNum = 0
			this.problemList.forEach((value, index) => {
				if (this.problemList[index].selected == 1) {
					quNum++
				}
			})
			this.answerList.forEach((value, index) => {
				if (this.answerList[index].selected == 1) {
					anNum++
				}
			})
			if (num == 0) {
				if (quNum < 1) {
					uni.showToast({
						title: '至少选择一条提问！',
						icon: 'none'
					})
				} else {
					this.delType = num
					this.delshow = true
				}
			} else if (anNum < 1) {
				uni.showToast({
					title: '至少选择一条回答！',
					icon: 'none'
				})
			} else {
				this.delType = num
				this.delshow = true
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}

.question-box {
	.empty-box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding-top: 40%;

		.tohome-box {
			color: #999999;
			margin-top: 50rpx;
		}

		.question-empty {
			width: 198rpx;
			height: 183rpx;
		}
	}

	.Put-box1 {
		.btn {
			text-align: center;
			margin-top: 40rpx;
			border: 1px solid #333333;
			height: 80upx;
			line-height: 80upx;
			width: 100%;
			color: #333333;
		}

		.submit {
			background-color: #333333;
			color: #FFEBC4;
		}
	}

	.cancelDel {
		position: absolute;
		bottom: -50px;
		left: 45%;

		image {
			width: 60upx;
			height: 60upx;

		}
	}

	.function-box {
		background-color: #F7F7F7;
	}

	.tabsbox {
		margin-top: 4rpx;
		background-color: #FFFFFF;
	}

	.editicon-box {
		display: flex;
		justify-content: flex-end;
		position: relative;
		left: -30rpx;
		padding: 16rpx 0;
	}

	.finishbox {
		display: flex;
		justify-content: flex-end;
		position: relative;
		left: -30rpx;
		padding: 16rpx 0;
	}

	.editicon {
		width: 50rpx;
		height: 50rpx;
	}

	.swipe-box {
		width: 100%;
		padding: 0 24rpx;

		.itemBox {
			background: #FFFFFF;
		}

		.replynum-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10rpx 0;

			.item-btn-right {
				margin-left: 15rpx;
				width: 14upx;
				height: 24upx !important;
			}
		}

		.item {
			display: flex;
			padding: 20rpx 20rpx 20rpx 40rpx;
			width: 700rpx;

			.qAarrow {
				image {
					width: 16rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}

		.product-img {
			width: 180rpx;
			flex: 0 0 180rpx;
			height: 180rpx;
		}

		.head-img {
			width: 80rpx;
			flex: 0 0 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		label {
			width: 36rpx;
			height: 36rpx;
			display: block;
			line-height: 36rpx;
			text-align: center;
			background: #C83732;
			color: #FFFFFF;
			font-size: 20rpx;
			margin-right: 20rpx;
		}

		.replyBox {}

		.reply {
			margin-top: 20rpx;

			label {
				background: #C5AA7B;
			}
		}

		.title {
			text-align: left;
			font-size: 28rpx;
			color: $u-content-color;
		}

		.cart-select-img {
			width: 40upx;
			height: 40upx;
			margin: 0upx 30upx 0upx 0upx;
			box-sizing: border-box;
		}

		.toStore {
			border: 1rpx #C5AA7B solid;
			color: #C5AA7B;
			padding: 0rpx 20rpx;
			border-radius: 5rpx;
			height: 52rpx;
		}
	}

	.allcheck-box {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0upx;

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28upx;
			color: #666;

			.cart-select-img {
				width: 40upx;
				height: 40upx;
				margin: 30upx;
				box-sizing: border-box;
			}
		}

		.right {
			display: flex;
			flex-direction: row;
			align-items: center;
			box-sizing: border-box;
		}

		.btn-delete {
			width: 230upx;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 30upx;
			color: #FFFFFF;
			background: #C83732;
		}
	}
}
</style>

<style>
.question-box /deep/ .u-tabs #u-tab-item-0 {
	position: relative;
}

.question-box /deep/ .u-tabs #u-tab-item-0:before {
	content: '';
	display: block;
	width: 2rpx;
	height: 30rpx;
	position: absolute;
	right: 0;
	top: 25rpx;
	background: #CCCCCC;
}

.swipe-box /deep/ .u-swipe-del {
	align-items: center;
	justify-content: center;
	width: 120rpx !important;
}

.swipe-box /deep/ .u-btn-text {
	width: 60rpx;
	height: 60rpx;
	display: block;
	background: url("../../static/images/origin/delIcon.png") no-repeat center center;
	background-size: contain;
}

.swipe-box /deep/ .u-swipe-action {
	background: none !important;
	margin-bottom: 20rpx;
}
</style>
