<template>
	<view class="command-record">
		<!-- 命令记录筛选-->
		<view class="filter-button" @click="openSearchDialog">
			<text>{{ $t('common.screen') }}</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">{{ $t('device.responseSuccess') }}</view>
							<view class="item-right item-fail" v-else>{{ $t('device.ResponseFailed') }}</view>
						</view>
					</view>
					<view>
						{{$t('device.commandType')}}:
						<text class="ml-16">{{ item.additionalInfo.cmdType===1?$t('device.service'):$t('common.customText') }}</text>
					</view>
					<view v-if="item.statusName">
						{{ $t('device.commandStatus') }}:
						<text :style="{color:formatCommandStatus(item.status)}" class="ml-16">
							{{ statusEnum[item.status]?$t(statusEnum[item.status]):item.statusName }}
						</text>
					</view>
					<view class="item-first">
						<view>
							{{ $t('device.responseType') }}:
							<text class="ml-16">{{ !item.request.oneway?$t('device.twoWay'):$t('device.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">
			<view class="filter" @touchmove.stop.prevent="disabledScroll">
				<view class="filter-title"><text>{{ $t('common.filterCriteria') }}</text></view>
				<query-item :filterList="issueStatus" :title="$t('device.issuanceStatus')"
					@clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></query-item>
				<view class="flex-column">
					<view class="mt-3 command-time-text">{{ $t('device.commandTime') }}</view>
					<view class="mt-3">
						<uni-datetime-picker return-type="timestamp" v-model="range" type="datetimerange"
							:rangeSeparator="$t('common.toText')" />
					</view>
				</view>
				<view class="h-30"></view>
				<view class="button-group">
					<view>
						<u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" :text="$t('common.resetting')"
							@click="resetFilter"></u-button>
					</view>
					<view>
						<u-button color="#3388ff" shape="circle" :text="$t('common.confirm')" @click="confirmFilter"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import queryItem from '@/pages/device/components/query-item.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';
	import {
		issueStatus
	} from '../config/data.js'
	import api from '@/api/index.js'
	import {
		useNavigateTo
	} from '@/plugins/utils.js'

	export default {
		mixins: [MescrollMixin],
		components: {
			queryItem
		},
		props: {
			tbDeviceId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				show: false,
				list: [],
				total: 0,
				range: [],
				formTime: {
					status: '',
					startTime: '',
					endTime: ''
				},
				status: '',
				issueStatus,
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				page: {
					num: 0,
					size: 10
				},
				statusEnum:{
					SUCCESSFUL:'device.responseSuccess',
					EXPIRED:'device.expired',
					DELIVERED:'device.successSent',
				}
			};
		},
		methods: {
			formatCommandStatus(status) {
				return status == 'EXPIRED' ?
					'red' :
					status == 'DELIVERED' ?
					'blue' :
					status == 'QUEUED' ?
					'#00C9A7' :
					status == 'TIMEOUT' ?
					'red' :
					status == 'SENT' ?
					'#00C9A7' : ''
			},
			downCallback() {
				for (let i in this.formTime) Reflect.set(this.formTime, i, '')
				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;
			},
			upCallback() {
				const tbDeviceId = {
					tbDeviceId: this.tbDeviceId
				}
				const condition = Object.values(this.formTime)
				if (condition.length === 0) {
					this.page.num += 1;
					this.loadData(this.page.num, {
						...tbDeviceId
					});
				} else if (condition.filter(Boolean).length > 0) {
					this.page.num += 1;
					this.loadData(this.page.num, {
						...this.formTime,
						...tbDeviceId
					});
				} else {
					this.page.num += 1;
					this.loadData(this.page.num, {
						...tbDeviceId
					});
				}
			},
			async loadData(pageNo, params = {}) {
				let httpData = {
					...params,
					page: pageNo,
					pageSize: 10
				};
				const res = await api.deviceApi.getRpcRecord({
					params: httpData,
					custom: {
						load: false
					}
				})
				if (!res) return
				this.total = res.total;
				uni.stopPullDownRefresh();
				this.mescroll.endByPage(res.items.length, res.total);
				if (pageNo == 1) {
					this.list = res.items;
				} else {
					this.list = this.list.concat(res.items);
				}
			},
			handleClickTag(currentIndex, list) {
				list.map((item, index) => {
					item.checked = index === currentIndex;
				});
			},
			resetFilter() {
				const {
					issueStatus
				} = this;
				issueStatus.forEach(item => item.checked = false)
				issueStatus[0].checked = true
			},
			close() {
				this.show = false;
			},
			openSearchDialog() {
				this.show = true;
				this.resetFilter()
				this.range = []
				for (let i in this.formTime) Reflect.set(this.formTime, i, '')
			},
			hideKeyboard() {
				uni.hideKeyboard();
			},
			confirmFilter() {
				this.formTime.startTime = this.range[0]
				this.formTime.endTime = this.range[1]
				const issueStatus = this.issueStatus.find(item => item.checked);
				this.formTime.status = issueStatus.type ? issueStatus.type : undefined,
					this.loadData(1, {
						tbDeviceId: this.tbDeviceId,
						...this.formTime
					});
				this.show = false;
			},
			openCommandDetail(item) {
				useNavigateTo('/device-subpackage/device-detail/components/command-detail?data=', item)
			}
		}
	};
</script>


<style lang="scss" scoped>
	@import "../static/command-record.scss";
</style>