<template>
	<view class="content">
		<view class="uni-status-height"></view>
		<view class="userData" v-if="userData">
			<view>{{userData.orgName||'用户名'}}</view>
			<view @click="toQuit">退出<u-icon name="arrow-right" color="#55aaff"></u-icon></view>
		</view>
		<view class="card-box">
			<view class="grid-box">
				 <view @click="toRuku">
					 <text class="iconfont icon-ruku"></text>
					 <text class="label">入库</text>
				 </view>
				 <view @click="toChuku">
					 <text class="iconfont icon-chukuguanli"></text>
					 <text class="label">出库</text>
				 </view>
			</view>
			<view class="grid-box">
				<view @click="toPandian">
					 <text class="iconfont icon-IMSpandianguanli"></text>
					 <text class="label">库存盘点</text>
				</view>
				 <view @click="toRecord">
					 <text class="iconfont icon-lishijilu"></text>
					 <text class="label">操作记录</text>
				 </view>
			</view>
			<!-- <view class="grid-box">
				 <view @click="toSeting">
					 <text class="iconfont icon-xianshi"></text>
					 <text class="label">显示设置</text>
				 </view>
				 <view @click="toSeting">
					 <text class="iconfont icon-lishijilu"></text>
					 <text class="label">操作记录</text>
				 </view>
			</view> -->
		</view>
		<!-- 选择出库类型 -->
		<u-action-sheet
				:show="showOutType"
				:actions="outTypeList"
				title="请选择出库类型"
				@close="showOutType = false"
				@select="outTypeSelect"
		>
		</u-action-sheet>
	</view>
</template>

<script>
	import { supplierList, sparePartsPutTypeList, checkWarehouseList, warehouseCascadeList, logout } from '@/config/api.js'
	export default {
		data() {
			return {
				showOutType: false,
				outTypeList:[
					{
						name: "销售出库",
						value: 0
					},
					{
						name: "连锁调出",
						value: 1
					},
					{
						name: "店内调出",
						value: 2
					},
				],
				czCode: '',
				type: ''
			}
		},
		onLoad() {
			this.baseData()
		},
		computed: {
			userData() {
				return this.$store.state.vuex_user
			}
		},
		methods: {
			// 退出登录
			toQuit(){
				logout().then(res => {
					if(res.status == 200){
						this.$store.state.vuex_token = ''
						this.$store.state.vuex_user = ''
						uni.redirectTo({
							url: "/pages/login/index"
						})
					}
				})
			},
			// 同步基础数据
			async baseData(){
				// 供应商
				const supplier = await supplierList() 
				this.$store.state.vuex_supplierList = supplier.data || []
				// 入库类型
				const sparePartsPutType = await sparePartsPutTypeList()
				this.$store.state.vuex_sparePartsTypeList = sparePartsPutType.data || []
				// 盘点仓库列表
				const checkWarehouse = await checkWarehouseList()
				this.$store.state.vuex_checkWarehouseList = checkWarehouse.data || []
				// 仓库仓位列表
				const warehouse = await warehouseCascadeList()
				this.$store.state.vuex_warehouseList = warehouse.data || []
			},
			// 新建入库
			toRuku(){
				 uni.navigateTo({
				 	url: "/pages/stockIn/add"
				 })
			},
			// 出库
			toChuku(){
				this.showOutType = true
			},
			outTypeSelect(item){
				this.showOutType = false
				console.log(item)
				const url = ['/pages/stockOut/salesOut/list','/pages/stockOut/chainTransferOut/list','/pages/stockOut/storeTransferOut/list']
				uni.navigateTo({
					url: url[item.value]
				})
			},
			// 新建盘点
			toPandian(){
				uni.navigateTo({
					url: "/pages/stockPan/add"
				})
			},
			// 数据操作
			toRecord(){
				uni.navigateTo({
					url:"/pages/record/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		.userData{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			> view{
				display: flex;
				align-items: center;
				&:last-child{
					color: #55aaff;
				}
			}
		}
		.card-box{
			border: 1px solid #eee;
			border-radius: 20upx;
			margin: 20rpx 40rpx;
			background: #fff;
		}
		.grid-box{
			display: flex;
			justify-content: space-around;
			padding:0;
			> view{
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				border: 1px solid #eee;
				.iconfont{
					font-size: 120upx;
					padding: 20upx 0;
				}
				.label{
					font-size: 32upx;
					text-align: center;
					padding: 0 0 24upx 0;
				}
				.icon-ruku{
					color: #0055ff;
				}
				.icon-chukuguanli{
					color: #ff5500;
				}
				.icon-IMSpandianguanli{
					color: #00aa00;
				}
				.icon-xianshi{
					color: #55aaff;
				}
				.icon-caozuozhucebiao{
					color: #55aa7f;
				}
				.icon-lishijilu{
					color: #55557f;
				}
				&:active{
					opacity: 0.8;
				}
			}
			.nob{
				border: 0;
				box-shadow:none;
			}
		}
		.uni-status-height{
			height: $uni-status-height;
		}
	}
</style>
