<template>
	<!-- 单向没有响应失败状态 -->
	<!-- 响应类型 -->
	<view class="command-record">
		<view class="filter-button" @click="openSearchDialog">
			<text>筛选</text>
			<image src="../../../static/shaixuan.png" />
		</view>

		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"
			height="700px">
			<view @click="openCommandDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
				<view class="item">
					<view class="item-first">
						<text>{{ item.deviceName }}</text>
						<view v-if="!item.request.oneway">
							<view class="item-right item-success" v-if="item.response">响应成功</view>
							<view class="item-right item-fail" v-else>响应失败</view>
						</view>
					</view>
					<view>
						命令类型:
						<text style="margin-left: 16rpx;">{{ item.additionalInfo.cmdType===1?'服务':'自定义' }}</text>
					</view>
					<view v-if="item.statusName">
						命令状态:
						<text :style="{
								color:
									item.status == 'EXPIRED'
										? 'red'
										: item.status == 'DELIVERED'
										? 'blue'
										: item.status == 'QUEUED'
										? '#00C9A7'
										: item.status == 'TIMEOUT'
										? 'red'
										: item.status == 'SENT'
										? '#00C9A7'
										: ''
							}" style="margin-left: 16rpx;">
							{{ item.statusName }}
						</text>
					</view>
					<view class="item-first">
						<view>
							响应类型:
							<text style="margin-left: 16rpx;">{{ !item.request.oneway?'双向':'单向' }}</text>
						</view>
						<view class="time">{{ format(item.createTime) }}</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!-- 告警筛选 -->
		<u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20"
			@touchmove.stop.prevent="disabledScroll">
			<view class="filter" @touchmove.stop.prevent="disabledScroll">
				<view class="filter-title"><text>筛选条件</text></view>
				<FilterItem :filterList="issueStatus" title="下发状态"
					@clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></FilterItem>
				<view class="button-group">
					<view>
						<u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置"
							@click="resetFilter"></u-button>
					</view>
					<view>
						<u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-calendar :show="showCalendar" mode="range" @confirm="calendarConfirm" @close="calendarClose" startText="开始时间"
			endText="结束时间" confirmDisabledText="请选择日期" :formatter="formatter"></u-calendar>
	</view>
</template>
<script>
	import FilterItem from '@/pages/device/FilterItem.vue';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		formatToDate
	} from '@/plugins/utils.js';
	import {
		debounce
	} from '@/plugins/throttle.js';
	export default {
		mixins: [MescrollMixin],
		components: {
			FilterItem
		},
		props: {
			tbDeviceId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: false,
				list: [],
				total: '',
				timeData: {
					selectTime: '',
					getTimeGap: ''
				},
				showCalendar: false,
				issueStatus: [{
						checked: true,
						name: '全部',
						type: ''
					},
					{
						checked: false,
						name: '响应成功',
						type: 'SUCCESSFUL'
					},
					{
						checked: false,
						name: '发送成功',
						type: 'DELIVERED'
					},
					{
						checked: false,
						name: '已过期',
						type: 'EXPIRED'
					},
					{
						checked: false,
						name: '响应失败',
						type: 'FAILED'
					}
				],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				page: {
					num: 0,
					size: 10
				}
			};
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.list = [];
				this.page.num = 1;
				this.loadData(this.page.num, {
					tbDeviceId: this.tbDeviceId
				});
			},
			format(date) {
				return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
			},
			disabledScroll() {
				return;
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				//联网加载数据
				this.page.num += 1;
				this.loadData(this.page.num, {
					tbDeviceId: this.tbDeviceId
				});
			},
			//获取告警数据
			loadData(pageNo, params = {}) {
				let httpData = {
					...params,
					page: pageNo,
					pageSize: 10
				};
				uni.$u.http
					.get('/yt/rpc', {
						params: httpData,
						custom: {
							load: false
						}
					})
					.then(res => {
						this.total = res.total;
						uni.stopPullDownRefresh();
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
						if (pageNo == 1) {
							this.list = res.items;
						} else {
							this.list = this.list.concat(res.items);
						}
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			},
			handleClickTag(currentIndex, list) {
				list.map((item, index) => {
					item.checked = index === currentIndex;
				});
			},
			resetFilter() {
				const {
					issueStatus
				} = this;
				issueStatus.forEach(item => item.map((item, index) => (item.checked = index === 0)));
			},
			close() {
				this.show = false;
			},
			openSearchDialog() {
				this.show = true;
			},
			hideKeyboard() {
				uni.hideKeyboard();
			},
			calendarConfirm(e) {
				this.showCalendar = false;
				this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
			},
			confirmFilter() {
				const issueStatus = this.issueStatus.find(item => item.checked);
				this.loadData(1, {
					status: issueStatus.type ? issueStatus.type : undefined,
					tbDeviceId: this.tbDeviceId
				});
				this.show = false;
			},
			calendarClose() {
				this.showCalendar = false;
			},
			openCommandDetail(item) {
				uni.navigateTo({
					url: '/deviceSubPage/deviceDetailPage/tabDetail/CommandDetail?data=' + JSON.stringify(item)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.command-record {
		padding: 0 30rpx;
		background: #f8f9fa;

		.filter-button {
			font-size: 12px;
			width: 160rpx;
			height: 64rpx;
			border-radius: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f0f1f2;
			color: #666;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 4rpx;
			}
		}
	}

	.list-item {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto;
		color: #333;

		.item {
			.delivered-color {
				color: blue;
			}

			padding: 30rpx;

			view {
				font-size: 14px;
				margin-bottom: 10rpx;
			}

			.time {
				margin-top: 20rpx;
				color: #999;
			}

			.item-first {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 15px;
				font-weight: 500;
				align-items: center;

				.item-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 104rpx;
					height: 36rpx;
					font-size: 10px;
					border-radius: 20rpx;
				}

				.item-fail {
					color: #848383;
					background-color: #84838325;
				}

				.item.success {
					color: #00c9a7;
					background-color: #00c9a725;
				}
			}
		}
	}

	.filter {
		padding: 0 30rpx;

		.filter-title {
			text-align: center;
			margin-top: 14px;
			font-size: 16px;
			font-weight: 700;
		}

		.button-group {
			display: flex;
			margin-top: 40rpx;
			justify-content: space-between;

			view {
				width: 330rpx;
			}
		}
	}
</style>