<template>
  <view class="pages tn-bg-gray--light">
	  <tn-nav-bar fixed>报表中心</tn-nav-bar>
	  <view  :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<!--  <tn-grid :col="col">
			  <tn-grid-item :style="{width: gridItemWidth}">
			    <view class="" >
			      <view class="tn-margin" @click="toPage(1)">123</view>
			    </view>
			  </tn-grid-item><tn-grid-item :style="{width: gridItemWidth}">
              <view class="" >
                <view class="tn-margin" >456</view>
              </view>
            </tn-grid-item>
		  </tn-grid> -->
		  
		  
		  <view class='nav-list'>
		    
		    <block v-for="(content_item, content_index) in list" :key="content_index" >
		      <navigator
		        open-type="navigate"
		        hover-class='none'
		        :url="content_item.url"
		        class="tn-padding nav-list-item tn-shadow  tn-flex tn-flex-direction-column tn-flex-col-center  tn-bg-white"
		      >
		        <view class="icon" 
					:class="[
					  getRandomCoolBg(content_index)
					]">
		          <view :class="['tn-icon-' + content_item.icon,]" ></view>
		        </view>
		        <view class="nav-link">
		          <view class='title'>{{ content_item.title }}</view>
		        </view>
		      </navigator>
		    </block>
		    
		  </view>
	  </view>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
        col: 3,
		list:[
			{url:'/pages/reportCenter/report1',title:'产品入库汇总报表',icon:'home-totop'},
			{url:'/pages/reportCenter/report2',title:'返工返修汇总报表',icon:'set'},
			{url:'/pages/reportCenter/report3',title:'报废汇总报表',icon:'prohibit'},
		]
      }
    },
	onShow(){
	},
    computed: {
      // 兼容小程序
      // #ifdef MP-WEIXIN
      gridItemWidth() {
        return 100 / this.col + '%'
      },
      // #endif
    },
    methods: {
      getRandomCoolBg() {
        return this.$tn.color.getRandomCoolBgClass()
      },
    }
  }
</script>

<style lang="scss" scoped>
	.pages{
		min-height: 100vh;
	}
	.nav-list {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 30rpx 12rpx 0rpx;
	  justify-content: space-between;
	  
	  /* 列表元素 start */
	  .nav-list-item {
	    border-radius: 12rpx;
	    width: 45%;
	    margin: 0 18rpx 40rpx;
	    background-size: cover;
	    background-position: center;
	    position: relative;
	    z-index: 99;
	    
	    
	    
	    /* 元素标题 start */
	    .nav-link {
	      font-size: 32rpx;
	      text-transform: capitalize;
	      padding: 0 0 10rpx 0;
	      position: relative;
	      
	      .title {
	        // color: #FFFFFF;
	        margin-top: 20rpx;
	        text-align: center;
	      }
	    }
	    /* 元素标题 end */
	    
	    /* 元素图标 start */
	    .icon {
	      font-variant: small-caps;
	      width: 90rpx;
	      height: 90rpx;
	      line-height: 90rpx;
	      margin: 0;
	      padding: 0;
	      display: inline-flex;
	      text-align: center;
	      justify-content: center;
	      vertical-align: middle;
	      font-size: 50rpx;
	      color: #FFFFFF;
	      white-space: nowrap;
	      opacity: 0.9;
	      background-color: rgba(0, 0, 0, 0.05);
	      background-size: cover;
	      background-position: 50%;
	      border-radius: 5000rpx;
	    }
	    /* 元素图标 end */
	  }
	  }
</style>