<template>
	<view class="home-wrap">
		<view class="title-wrap">
			<view class="title-header">
				<view class="title-item" v-for="(item,index) in titleData" :key="index">
					<text class="item-text">{{item.name}}</text>
					<text class="item-nub">{{item.value}}</text>
				</view>
			</view>
			<view class="apploct-wrap">
				<view class="applict-title">
					<view class="icon-title">

					</view>
					<text class="aplition-name">应用管理</text>
				</view>
				<view class="app-wrap">
					<view class="app-item" v-for="(item,index) in appData" :key="index">
						<navigator :url="item.path" hover-class="navigator-hover">
							<view class="icon-wrap" :style="{background:item.bgColor}">
								<view class="icon-imag" :style="{'background-image':'url('+item.iconUrl+')'}">

								</view>
							</view>
							<text class="icon-text">{{item.name}}</text>
						</navigator>
					</view>
				</view>
			</view>

		</view>
		<view class="ground-wrap">
			<view class="ground-title">
				<view class="ground-icon"></view>
				<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex' @ed='ed'
					:stylesData="{padding:'0 0 0 80rpx'}" @onSelected='dateChange'></ren-dropdown-filter>
				<view class="left-btn" @click="moreView()">
					<view class="left-text">更多</view>
					<view class="right-icon"></view>
				</view>
			</view>
			<view class="list-wrap" v-if="groundData.length>0">
				<view class="list-item" v-for="(item,index) in groundData" :key="index">
					<view class="list-data">
						<text class="text-label">单据编号：</text>
						<text class="text-cont">{{item.id_instock}}</text>
					</view>
					<view class="list-data">
						<text class="text-label">供应商：</text>
						<text class="text-cont">{{item.lykf}}</text>
					</view>
					<view class="list-data">
						<text class="text-label">商品数量：</text>
						<text class="text-cont">{{item.qty}}</text>
					</view>
					<view class="list-data">
						<text class="text-label">单据时间：</text>
						<text class="text-cont">{{item.rq}}</text>
					</view>
					<view class="status-text">{{item.flag}}</view>
				</view>
			</view>
			<view class="empty-view" v-if="groundData.length==0">
				暂无数据
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		listData
	} from "./list.js";
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		components: {

		},
		mounted() {
			this.getDataList({
				type: "NotOut"
			});
		},
		computed: {
			...mapState(['groundData'])
		},
		data() {
			return {
				listData: listData,
				filterData: [
					[{
						text: '待上架',
						value: 'NotOut'
					}, {
						text: '已上架',
						value: 'YesOut'
					}]
				],
				defaultIndex: [0],
				titleData: [{
					name: "待上架",
					value: 15
				}, {
					name: "待出库",
					value: 15
				}],
				appData: [{
						iconUrl: "../../static/shangjia.png",
						name: "上架确认",
						bgColor: "#6163AF",
						path: "/pages/grounding/grounding"
					},
					{
						iconUrl: "../../static/jianhuo.png",
						name: "出库拣货",
						bgColor: "#3789EA",
						path: "/pages/outbound/outbound"
					},
					{
						iconUrl: "../../static/pandian.png",
						name: "库存盘点",
						bgColor: "#2CE4BF",
						path: "/pages/Inventory/Inventory"
					},
					{
						iconUrl: "../../static/jiansuo.png",
						name: "商品检索",
						bgColor: "#FFB867",
						path: "/pages/query/query"
					},
					{
						iconUrl: "../../static/xiaohao.svg",
						name: "商品消耗",
						bgColor: "#94BE5B",
						path: "/pages/consume/consume"
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			...mapActions(['getGroundData']),
			//跳转更多页面
			moreView() {
				uni.navigateTo({
					url: '/pages/grounding/grounding',
					success: function(res) {}
				});
			},
			dateChange(slectd) {
				this.getDataList({
					type: slectd[0][0].value
				});
			},
			// 获取数据
			getDataList(data) {
				this.getGroundData(data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-wrap {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: #F1F1F1;

		.title-wrap {
			width: 100%;
			height: 480rpx;
			background-color: #4749A1;

			.title-header {
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: space-around;

				.title-item {
					width: 120rpx;
					height: 100%;
					text-align: center;
					padding-top: 36rpx;

					.item-text {
						width: 100%;
						color: rgba(255, 255, 255, 0.58);
						font-size: 32rpx;
					}

					.item-nub {
						width: 100%;
						color: #fff;
						display: inline-block;
						margin-top: 20rpx;
						font-size: 56rpx;
						font-family: PingFangSC-semiBold;
					}
				}
			}
		}


		.apploct-wrap {
			width: 95%;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 45rpx;
			padding: 10rpx;
			box-sizing: border-box;

			.applict-title {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #CECDCE;

				.icon-title {
					width: 48rpx;
					height: 48rpx;
					background-image: url('../../static/apploction.svg');
				}

				.aplition-name {
					font-size: 32rpx;
					margin-left: 20rpx;
					font-family: PingFangSC-semiBold;
				}
			}

			.app-wrap {
				width: 100%;
				margin-top: 25rpx;
				display: flex;
				flex-wrap: wrap;

				.app-item {
					width: 25%;
					height: 170rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.icon-wrap {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon-imag {
							width: 60rpx;
							height: 60rpx;
							background-size: 100% 100%;
						}
					}

					.icon-text {
						font-size: 24rpx;
						font-family: PingFangSC-semiBold;
					}
				}
			}
		}

		.ground-wrap {
			width: 95%;
			margin: 0 auto;
			border-radius: 20rpx;
			background-color: #fff;
			margin-top: 200rpx;
			min-height: 900rpx;

			.ground-title {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #ccc;
				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				position: relative;

				.ground-icon {
					width: 48rpx;
					height: 48rpx;
					background-image: url("../../static/far.svg");
					background-size: 100% 100%;
					z-index: 51;
				}

				.left-btn {
					width: 120rpx;
					height: 48rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -24rpx;
					z-index: 51;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right-icon {
						width: 48rpx;
						height: 48rpx;
						background-image: url('../../static/aright.svg');
						background-size: 100% 100%;
					}

					.left-text {
						font-size: 30rpx;
					}
				}
			}

			.list-wrap {
				width: 100%;
				background-color: #fff;
				height: auto;

				.list-item {
					width: 100%;
					height: 260rpx;
					border-bottom: 1px solid #ccc;
					padding: 20rpx 20rpx 20rpx 50rpx;
					box-sizing: border-box;
					position: relative;

					.list-data {
						width: 70%;
						height: 40rpx;
						line-height: 40rpx;
						margin-top: 10rpx;

						.text-label {
							color: rgba(16, 16, 16, 1);
							font-size: 28rpx;
							font-family: PingFangSC-medium;
						}

						.text-cont {
							color: rgba(16, 16, 16, 1);
							font-size: 28rpx;
							font-family: PingFangSC-regular;
						}
					}

					.status-text {
						width: 100rpx;
						height: 40rpx;
						position: absolute;
						right: 20rpx;
						top: 30rpx;
						font-family: PingFangSC-semiBold;
						font-size: 28rpx;
						color: rgba(71, 73, 161, 0.86);
					}
				}
			}

			.empty-view {
				width: 100%;
				height: 300rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				color: #818181;
				font-size: 30rpx;
			}
		}

	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}

	uni-page-wrapper {
		width: 100%;
		height: 100%;
	}

	uni-page {
		width: 100%;
		height: 100%;
	}
</style>