<template>
  <view class="uni-padding-wrap uni-common-mt" >
	  
	  <view class="grid-body">
	      <uni-grid :column="3" :showBorder="false" @change="changeGrid1">
	        <uni-grid-item :index="1" style="line-height: 100px;margin-top:100px;margin-left:37.5%;width: 100%;">
	          <view class="grid-item-box">
	            <uni-icons custom-prefix="iconfont" type="icon-tongguo" size="30"></uni-icons>
	            <text class="text">合格品报工</text>
	          </view>
	        </uni-grid-item>
	        <uni-grid-item :index="2" style="line-height: 100px;margin-left:37.5%;width: 100%;">
	    	  <view class="grid-item-box">
	    		<uni-icons custom-prefix="iconfont" type="icon-shenhebutongguo" size="30"></uni-icons>
	    	    <text class="text">不良品报工</text>
	    	  </view>
	    	</uni-grid-item>
	    	<uni-grid-item :index="3" style="line-height: 100px;margin-left:37.5%;width: 100%;">
	    	  <view class="grid-item-box">
	    	    <uni-icons custom-prefix="iconfont" type="icon-tubiaozhizuomoban-134" size="30"></uni-icons>
	    	    <text class="text">报废品报工</text>
	    	  </view>
	    	</uni-grid-item>
	      </uni-grid>
	    </view>
	  </view>
   <!-- <u-button type="primary" @click="$tab.navigateTo('/pages/mes/jobReport/pass')">合格品报工</u-button>
	
	<u-button style="margin-top:100px; background-color:#ffff00;" @click="$tab.navigateTo('/pages/mes/jobReport/defect')">不良品报工</u-button>
	
	<u-button style="margin-top:100px;;" type="warn" @click="$tab.navigateTo('/pages/mes/jobReport/scrap')">报废品报工</u-button>
    </view> -->
<!--  </view> -->
</template>

<script>
  export default {
    onLoad: function() {
    },
	methods: {
		changeGrid1(e) {
		  console.log(e.detail.index);
		  		if (e.detail.index == 1) {
		  			this.$tab.navigateTo('/pages/mes/jobReport/pass');
		  		} else if (e.detail.index == 2) {
		  			this.$tab.navigateTo('/pages/mes/jobReport/defect');
		  		} else if (e.detail.index == 3) {
		  			this.$tab.navigateTo('/pages/mes/jobReport/scrap');
		  		} 
		}
	}
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
