<template>
	<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">
			<u-search shape="square" :clearabled="true" :showAction="false" placeholder="请输入关键字" v-model="form.mc" ></u-search>
			
			<!-- <view class="l1" @click="show = true">
				<image src="../../../static/sx.png" style="width: 20px;" mode="widthFix"></image>
				<span style="margin-right: 3px;">{{title}}</span>
			</view> -->
		</view>
		<view class="title" style="">
			<view class="" style="width: 100%;display: flex;justify-content: flex-end;">
				<view class="" style="display: flex;align-items: center;">
					<span style="font-size: 30rpx;">设备类型：</span>
					<uni-data-picker placeholder="请选择设备分类" popup-title="请选择设备分类" :localdata="dataTree" v-model="classes"
						@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
		<view class="box" v-for="item in list" @click="xq(item)">
			<view class="top" style="margin-bottom: 10px;">
				<span class="f1">{{item.mc}}</span>
			</view>
			<view class="top2">
				<span class="f4">备件编号</span>
				<span class="f5">{{item.bh}}</span>
			</view>
			<view class="top2">
				<span class="f4">规格</span>
				<span class="f5">{{item.gg}}</span>
			</view>
			<view class="top2">
				<span class="f4">位置</span>
				<span class="f5">{{item.wz}}</span>
			</view>
			<view class="xx">
			</view>
			<view class="footer">
				<span>{{timestampToTime(item.fbsj)}}</span>
				<view class="">
					<u-button size="small" type="primary" text="查看"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				classes: '',
				dataTree: [],
				keyword: "",
				show: false,
				columns: [
					['设备名','备件名称/备件编号','关键词']
				],
				title: "关键词",
				list:[],
				form:{
					currentPage:1,
					pageSize:10,
					mc:"",
					bjfl:""
				},
				nv_length:0
			}
		},
		onReachBottom() {
			var page = Math.ceil(this.nv_length / 10);
			if (page > parseInt(this.form.currentPage)) {
				this.form.currentPage = parseInt(this.form.currentPage) + 1
				this.bjyzclist();
			} else {
				uni.showToast({
					icon: "error",
					title: "没有更多内容"
				})
			}
		},
		watch:{
			'form.mc'(newVal, oldVal){
				console.log('name changed', newVal, oldVal)
				this.form.pageSize = 10
				this.form.currentPage = 1
				this.list = []
				this.bjyzclist();
			},
		},
		onLoad() {
			this.bjyzclist();
			this.hqcpfl();
		},
		methods:{
			onchange(e){
				console.log("onchange",e);
				if(e.detail.value.length > 1){
					var index = e.detail.value.length - 1
					this.form.bjfl = e.detail.value[index].value
				}
				if(e.detail.value.length  == 1){
					this.form.bjfl = e.detail.value[0].value
				}
				if(e.detail.value.length  == 0){
					this.form.bjfl = ''
				}
				this.form.currentPage = 1
				this.form.pageSize = 10
				this.list = []
				this.bjyzclist();
			},
			onpopupclosed(e){
				console.log("onpopupclosed",e);
			},
			onpopupopened(e){
				console.log("onpopupopened",e);
			},
			onnodeclick(e){
				console.log("onnodeclick",e);
			},
			// 获取分类
			hqcpfl(){
				this.API.hqcpfl("625969064434468101").then(res=>{
					console.log("获取分类",res);
					if(res.code == 200){
						if(res.data.list.length > 0){
							var arr = []
							for(let i = 0;i < res.data.list.length;i++){
								var info = {
									text:"",
									value:"",
									children:[]
								}
								info.text = res.data.list[i].fullName
								info.value = res.data.list[i].id
								if(res.data.list[i].children != null && res.data.list[i].children != '' && res.data.list[i].children.length > 0){
									for(let s = 0;s < res.data.list[i].children.length;s++){
										var info1 = {
											text:res.data.list[i].children[s].fullName,
											value:res.data.list[i].children[s].id,
											children:[]
										}
										
										if(res.data.list[i].children[s].children.length > 0 && res.data.list[i].children[s].children != null && res.data.list[i].children[s].children != ''){
											for(let t = 0;t < res.data.list[i].children[s].children.length;t++){
												var info2 = {
													text:res.data.list[i].children[s].children[t].fullName,
													value:res.data.list[i].children[s].children[t].id,
													children:[]
												}
												info1.children.push(info2)
											}
										}
										info.children.push(info1)
									}
								}
								arr.push(info)
							}
							this.dataTree = arr
						}
					}
				})
			},
			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;
			},
			bjyzclist(){
				this.API.bjyzclist(this.form).then(res=>{
					this.nv_length = res.data.pagination.total
					console.log("111",res);
					if(res.data.list.length > 0){
						for(let i = 0;i < res.data.list.length;i++){
							this.list.push(res.data.list[i])
						}
					}else{
						if(this.form.currentPage = 1){
							this.list = []
						}
					}
				})
			},
			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/bjzc/detail"
				})
			},
		}
	}
</script>

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