<template>
	<refresh @interrupt="interrupt" @pushToInterrupt="to" @backToInterrupt="back" @finished="finished">
		<view slot="top">

			<!-- 带文字式 -->
			<view
				:style="'position: absolute;bottom: 0rpx;height: ' + 60 + 'rpx;line-height:' + 60 + 'rpx;width: 100%;text-align: center; z-index:99'">
				<view class="ing2_ref" v-if="refresh_show == '1'">
					<image src="/subPageB/static/img/icn_ref.png" class="ing2_ref_pic"></image>
					<text class="ref_ing">{{ tip }}</text>
				</view>
				<view class="ing2_ref" v-if="refresh_show == '2'">
					<image src="/subPageB/static/img/icn_ref.png" class="ing2_ref_pic ing2_icn_ref2"></image>
					<text class="ref_ing">{{ tip }}</text>
				</view>
				<view class="ing2_ref" v-if="refresh_show == '3'">
					<image src="/subPageB/static/img/loading-icon.png" class="ing2_ref_pic icn_ref2"></image>
					<text class="ref_ing">{{ tip }}</text>
				</view>
			</view>
		</view>
		<template slot="vue-mes">
			<view>
				<scroll-view @scrolltolower="onReachScroll" class="scroll-view" :scroll-top="topNum" scrollY="true">
					<view class="lst_sug_warp" v-if="controlList.length > 0">
						<view class="lst_sug_unit" v-for="(item, index) in controlList" :key="index">
							<view @tap="showHideNr" :data-guid="item.guid" class="dly_flex_c mode_com tsu_bt">
								<view class="b_tol_ipt">{{ item.ctype }}</view>
								<view class="kou_top3">
									<text :class="item.upDownType"> <!-- 折叠图标-向下 --> </text>
									<!--<text class="up_touj">
							 折叠图标-向上 </text>-->
								</view>
							</view>



							<!-- 折叠内容 -->
							<view :class="'mode_com ' + item.showHideType">
								<!--class为zhed_gao 固定高度--对应向下的箭头---->
								<!-- 投诉时间 -->
								<!-- <view><text class="chel_t_s">提交时间:{{ item.createtime }}</text></view> -->
								<!-- 投诉内容 -->
								<view class="sug_lst_inf">
									{{ item.creason }}
								</view>
								<!-- 投诉图片 -->
								<view class="sug_dly_flex sug_lst_img sug_fm_img">
									<view class="w_33" v-for="(items, indexs) in item.imgList" :key="indexs">
										<image :src="imgUrl + items" class="sug_img" mode="aspectFill"></image>
									</view>
								</view>

							</view>
							<!-- 地址 -->
							<view class="mode_com">
								<view class="dly_flex sug_tips">
									<view class="sug_lst_time ">
										<image src="/subPageB/static/img/tab_mdd_a.png" class="kou_top3"></image>
										<view class="chel_t_s">{{ item.address }}</view>
									</view>

								</view>

							</view>
						</view>

					</view>
					<view class="mode_com empyt" v-else>
						<u-empty mode="list">
						</u-empty>

					</view>
					<view class="blk_2"></view>
				</scroll-view>
				<view class="sug_fied" style="z-index: 99;">
					<view class="mode_com sug_edit_btn">
						<button type="default" @tap="goAddSug()" class="state_sub">新增{{ type == 1 ? '投诉' : '建议' }}</button>
					</view>
				</view>

			</view>
		</template>
	</refresh>
</template>

<script>
import refresh from '../components/refresh_3.vue';
import uEmpty from "@/uni_modules/uview-ui/components/u-empty/u-empty.vue"
import aes from "@/common/aes.js";
export default {
	components: {
		refresh, uEmpty
	},
	data() {
		return {
			tip: '下拉刷新',
			refresh_show: '1',
			showHideType: "down_touj",
			imgUrl: this.$config.ROOTPATH,
			controlList: [],
			topNum: 0,
			page: 1,
			loadType: true,
			netType: true,
			type: 1
		}
	},
	onLoad: function (options) {
		var that = this;
		this.$util.getNetworkType(
			function (res) {
				if (res.networkType === 'none') {
					uni.showToast({
						title: that.$param.netMsg,
						icon: "none",
						duration: 2000
					})
					that.netType = false;
				}
			}, function () {
				uni.showToast({
					title: that.$param.netMsg,
					icon: "none",
					duration: 2000
				})
				that.netType = false;
			}
		)
		if (!that.netType) {
			return;
		}
		this.$util.hideLoadingByTime();
		this.type = options.type;
		this.getUserMsg();
	},
	methods: {
		onReachScroll: function (t) {
			if (this.loadType) {
				this.page++;
				this.getUserMsg();
			}
		},
		interrupt(e) {
			this.refresh_show = '3';
			this.tip = "刷新中";
			setTimeout(() => {
				this.page = 1;
				this.controlList = [];
				this.loadType = true;
				this.getUserMsg();
				this.tip = '刷新成功';
				this.refresh_show = '1';
				e();
			}, 2000);
		},
		to() {
			this.tip = '释放刷新';
			this.refresh_show = '2';
		},
		back() {
			this.tip = "下拉刷新"
			this.refresh_show = '1';
		},
		finished() {
			this.tip = '下拉刷新';
			this.refresh_show = '1';
		},
		showHideNr: function (e) {
			var that = this;
			for (var i = 0; i < that.controlList.length; i++) {
				if (e.currentTarget.dataset.guid == that.controlList[i].guid) {
					if (that.controlList[i].upDownType == "down_touj") {
						that.controlList[i].upDownType = "up_touj";
						that.controlList[i].showHideType = "";
					} else {
						that.controlList[i].upDownType = "down_touj";
						that.controlList[i].showHideType = "zhed_gao";
					}
				}
			}
		},
		getUserMsg: function () {
			var that = this;
			var data = {
				"pageno": that.page,
				"pageSize": "10",
				"appid": uni.getStorageSync("userInfo").openid,
				"dataType": that.type
			}
			this.$Request.get(this.$config.pageComplaintinfo, data, null, null, false, false).then(res => {

				var data = res.data.list;
				if (data != null && data.length > 0) {
					for (var i = 0; i < data.length; i++) {
						if (data[i].cimages != null && data[i].cimages != undefined) {
							if (data[i].cimages.includes(',')) {
								data[i].cimages = data[i].cimages.split(',')

							} else {
								data[i].cimages = [data[i].cimages]

							}
						}
						var item = {
							"guid": data[i].id,
							"creason": data[i].creason,
							"address": data[i].address,
							"ctype": data[i].ctype,
							"imgList": data[i].cimages,
							"showHideType": "zhed_gao",
							"upDownType": "down_touj"
						}
						that.controlList.push(item);
					}
					if (that.controlList.length == res.data.total) {
						that.loadType = false;
					}
					console.log(that.controlList, '列表')
				} else {
					that.loadType = false;
				}
			});
		},
		goAddSug: function () {
			uni.navigateTo({
				url: "/subPageB/suggest/sug_from?type=" + this.type
			})
		},
		timestampToTime: function (timestamp) {
			var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
			var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
			return Y + M + D + h + m + s;
		}
	},
}
</script>

<style scoped lang="scss">
@import url("/static/css/common.css");

page {
	background: #fff;
}

.scroll-view {
	position: absolute;
	top: 0rpx !important;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 4;
}

.sug_fied {
	bottom: 70rpx;
}

.no-data {
	text-align: center;
	margin: 100rpx 0;
}
.empyt{
	margin-top: 150rpx;
}
</style>
