<template>
	<!-- 设备采购列表 -->
	<view class="overview">
		<u-sticky zIndex="3">
			<view class="head">
				<u-search placeholder="请输入设备名称" v-model="keyword" @search="getList" @custom="getList"></u-search>
				<!-- <u-icon name="plus" @click="add"></u-icon> -->
			</view>
		</u-sticky>
		<view class="main" v-for="(item, index) in deviceList" :key="index">

			<view class="u-img">
				<img src="../../static/cg.png"></img>
			</view>
			<view class="content" @click="toAdd(item)">
				<view>
					<u-text :text="'设备名称：'+item.equipName"></u-text>
				</view>
				<view class='tt'>
					设备批次：{{item.batch}}
				</view>
				<view class="c-status">
					<u-text :text="'采购数量：'+item.num"></u-text>
				</view>
				<view class="c-status">
					<u-tag text="采购中" plain size="mini" type="warning" v-if="item.status=='0'"></u-tag>
					<u-tag text="采购完成" plain size="mini"  v-if="item.status=='1'"></u-tag>
					<u-tag text="已入库" plain size="mini" type="success" v-if="item.status=='2'"></u-tag>
					<u-tag text="已失效" plain size="mini" type="error" v-if="item.status=='3'"></u-tag>
				</view>
			</view>
			<u-icon name="arrow-right" @click="toAdd(item)"></u-icon>
		</view>
		<u-divider text="没有更多数据了"></u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1.2搜索内容
				keyword: '',

				// 3.设备列表
				deviceList: [],
				userinfo: null,

			}
		},

		onShow: function() {
			this.index()
		},
		methods: {
			index() {
				this.userinfo = uni.getStorageSync('userinfo');
				this.getList();
			},
			async getList() {
				this.deviceList = []
				// if (!this.userinfo) {
				// 	return uni.showToast({
				// 	title: '请登录账号',
				// 	icon: 'error'
				//  })
				// }
				const {
					data: res
				} = await this.$http('/app/purchaseList',{"name":this.keyword,"status":'2',"status2":'3'})
				if (res.code) return
				this.deviceList = res.data
			},

			// // 跳转详情页
			toAdd(item) {
				// if (!this.userinfo) {
				// 	return uni.showToast({
				// 	title: '请登录账号',
				// 	icon: 'error'
				//  })
				// }
				if(item.status != '0'){
					wx.navigateTo({
						url: 'purchase_details?form=' + JSON.stringify(item),
					})
				}else{				
					wx.navigateTo({
						url: 'purchase?form=' + JSON.stringify(item),
					})
				}
			},
			add(){
				// if (!this.userinfo) {
				// 	return uni.showToast({
				// 	title: '请登录账号',
				// 	icon: 'error'
				//  })
				// }
				wx.navigateTo({
					url: 'purchase',
				})
			},
		}
	}
</script>

<style lang="scss">
	.overview {
		background: #f6f6f6;
		// padding: 2.667vw 0;
		.head {
			background: #fff;
			padding: 2.667vw;
			
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			input {
				padding: 1vw;
				border-radius: 1vw;
			}
		}
		.submit {
			margin: 2.667vw 2.667vw;
		}
		// 展示信息
		.main {
			background: #ffffff;
			margin: 1.667vh;
			display: flex;
			justify-content: space-around;
			padding: 2vh 0;
			height: 14vh;
			.tt{
				width: 200px;
				white-space: nowrap;/*强制在一行显示*/
				text-overflow:ellipsis;
				overflow: hidden;/*溢出隐藏*/
				color: rgb(48, 49, 51);
				font-size: 15px;
			}
			.u-image {
				float: left;
			}

			.content {
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				display: flex;
				width: 55vw;

				.c-status {
					display: flex;
				}
			}

			.u-img {
				height: calc(14vh-80px);
				width: 80px;
				position: relative;

				img {
					height: 60px;
					width: 60px;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
	}
</style>
