<template>
	<view class="page-container">
	<view class="main">
		<view class="toptitle">
			<view class="toptitle_left" @click="ht">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
			<view class="toptitle_title">
				培训展示
			</view>
		</view>
		<view class="title">
			<view class="title-search-wrapper">
				<u-search shape="square" :clearabled="true" :showAction="false" placeholder="请输入培训名称/设备名称" v-model="form.searchKey" @search="onSearch"></u-search>
				<view class="filter-btn" @click="showFlPicker = true">
					<text class="filter-btn-text">{{ selectedFlName || '关联产品' }}</text>
					<text class="filter-btn-icon">▼</text>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
		<u-picker :show="showFlPicker" :columns="flColumns" @confirm="flConfirm" @cancel="showFlPicker = false"></u-picker>
		<view v-if="pxlist.length === 0 && !loading" class="empty-tip">
			<view style="text-align: center; padding: 40px 20px; color: #999;">
				<text>仅显示您所属设备关联产品的培训，暂无数据时可前往「我的设备」添加设备</text>
			</view>
		</view>
		<view class="box" style="position: relative;" v-for="item in pxlist" :key="item.id" @click="xq(item)">
			<view style="padding: 0 0 8px 0;font-size: 15px;font-weight: bold;color: #333;">{{item.pxmc || '无'}}</view>
			<image v-if="item.slt != '[]' && item.slt != '' && item.slt != null && item.slt != undefined" style="width: 100%;height: 200px;border-radius: 5px;" :src="'https://hhjj.antissoft.com' + item.slt[0].url" mode=""></image>
			<view class="" v-if="item.slt == '[]' || item.slt == '' || item.slt == null || item.slt == undefined" style="width: 100%;height: 200px;border-radius: 5px;background-color: #e5e5e5;">
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 10px 10px;padding-bottom: 0px;border-top: 1px solid #ccc;">
				<view class="top">
					<view v-if="item.sbmc" style="font-size: 12px;color: #666;">设备：{{item.sbmc}}</view>
					<view v-if="item.sssb" style="font-size: 12px;color: #999;margin-top: 4px;">{{ getProductName(item.sssb) }}</view>
				</view>
				<view class="footer" style="color: #000;">
					<span style="font-size: 13px;">{{timestampToTime(item.fbsj)}}</span>
				</view>
			</view>
			
			<!-- <view class="top" style="margin-bottom: 10px;">
				<span class="f1">{{item.sbmc}}</span>
			</view>
			<view class="top2">
				<span class="f4">设备编号</span>
				<span class="f5">无</span>
			</view>
			<view class="top2">
				<span class="f4">规格</span>
				<span class="f5">无</span>
			</view>
			<view class="top2">
				<span class="f4">分类</span>
				<span class="f5">无</span>
			</view>
			<view class="xx">
			</view>
			<view class="footer">
				<span>2024-11-12 22:20:11</span>
				<view class="">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view> -->
		</view>
	</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				keyword: "",
				show: false,
				columns: [
					['设备名', '设备名称','关键词']
				],
				title: "关键词",
				form:{
					currentPage:1,
					pageSize:10,
					searchKey: "",
					sssb: ""
				},
				pxlist:[],
				loading: false,
				showFlPicker: false,
				flColumns: [['全部']],
				flMap: {},
				selectedFlName: '',
				cpglOptions: [],
				searchTimer: null
			}
		},
		onUnload() {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer);
				this.searchTimer = null;
			}
		},
		onLoad() {
			this.getCpglOptions();
			this.pxzslist();
		},
		onReachBottom() {
			var page = Math.ceil(this.nv_length / 10);
			if (page > parseInt(this.form.currentPage)) {
				this.form.currentPage = parseInt(this.form.currentPage) + 1
				this.pxzslist();
			} else {
				uni.showToast({
					icon: "error",
					title: "没有更多内容"
				})
			}
		},
		watch:{
			'form.searchKey'(newVal) {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				this.form.currentPage = 1;
				this.pxlist = [];
				this.searchTimer = setTimeout(() => {
					this.pxzslist();
					this.searchTimer = null;
				}, 500);
			},
			'form.sssb'(){
				this.form.currentPage = 1
				this.pxlist = []
				this.pxzslist();
			}
		},
		methods:{
			getCpglOptions() {
				this.API.hqcpglAllowedList({ currentPage: 1, pageSize: 1000 }).then(res => {
					if (res && res.code == 200 && res.data && res.data.list) {
						this.cpglOptions = res.data.list;
						const productNames = res.data.list.map(item =>
							item.cpmc ? `${item.cpmc}${item.cpid ? ' (' + item.cpid + ')' : ''}` : (item.cpid || item.id)
						);
						this.flMap = {};
						res.data.list.forEach(item => {
							const displayName = item.cpmc ? `${item.cpmc}${item.cpid ? ' (' + item.cpid + ')' : ''}` : (item.cpid || item.id);
							this.flMap[displayName] = item.id;
						});
						this.flColumns = [['全部', ...productNames]];
					} else {
						this.cpglOptions = [];
						this.flColumns = [['全部']];
						this.flMap = {};
					}
				}).catch(() => {
					this.cpglOptions = [];
					this.flColumns = [['全部']];
					this.flMap = {};
				});
			},
			flConfirm(e) {
				const selectedIndex = e.indexs[0];
				const selectedText = e.value[0];
				if (selectedIndex === 0 || selectedText === '全部') {
					this.form.sssb = '';
					this.selectedFlName = '';
				} else {
					this.form.sssb = this.flMap[selectedText] || '';
					this.selectedFlName = selectedText;
				}
				this.showFlPicker = false;
			},
			getProductName(productId) {
				if (!productId) return '';
				const product = this.cpglOptions.find(item => item.id === productId);
				return product ? (product.cpmc || product.cpid || productId) : productId;
			},
			onSearch(){
				this.form.currentPage = 1;
				this.pxlist = [];
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
					this.searchTimer = null;
				}
				this.pxzslist();
			},
			pxzslist(){
				this.loading = true
				const params = {
					currentPage: this.form.currentPage,
					pageSize: this.form.pageSize,
					sidx: this.form.sidx || 'id',
					sort: this.form.sort || 'desc'
				};
				if (this.form.searchKey && this.form.searchKey.trim()) {
					params.searchKey = this.form.searchKey.trim();
				}
				if (this.form.sssb && this.form.sssb.trim()) {
					params.sssb = this.form.sssb.trim();
				}
				if (this.form.currentPage === 1) {
					this.pxlist = []
				}
				this.API.pxzslist(params).then(res=>{
					this.loading = false
					if (res && res.code === 200 && res.data) {
						this.nv_length = res.data.pagination ? res.data.pagination.total : 0
						if(res.data.list && res.data.list.length > 0){
							for(let i = 0;i < res.data.list.length;i++){
								if(res.data.list[i].slt != '[]' && res.data.list[i].slt != '' && res.data.list[i].slt != null && res.data.list[i].slt != undefined){
									res.data.list[i].slt = JSON.parse(res.data.list[i].slt)
								}
								this.pxlist.push(res.data.list[i])
							}
						}
					}
				}).catch(err => {
					this.loading = false
					uni.showToast({ title: err.msg || err.message || '加载失败', icon: 'none' })
				})
			},
			timestampToTime(timestamp) {
			    const date = new Date(timestamp); //时间戳为10位需*1000，13位不需乘
			    const Y = date.getFullYear() + '-';
			    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			    
			    return Y + M + D + h + m + s;
			},
			ht(){
				uni.navigateBack({
				    delta: 1
				});
			},
			confirm(e){
				console.log("11",e);
				this.title = e.value[0]
				this.show = false
				this.keyword = ''
			},
			xq(item){
				var data = JSON.stringify(item)
				uni.setStorageSync("detail",data)
				uni.navigateTo({
					url:"/pages/new/pxzs/detail"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../zlgl/index.scss';
</style>