<template>
  <view class="work-container">

    <!-- 宫格组件 -->
    <uni-section title="常用功能"  v-show="auth.hasPermi('invest:accountDealRecord:list')"  type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item v-for="(item, index) in commonGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
        <view class="grid-item-box">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text">{{ item.text }}</text>
          </view>
      </uni-grid-item>
      </uni-grid>
    </view>

    <!-- 宫格组件 -->
    <uni-section title="基础信息" v-show="auth.hasPermi('invest:bankcard:list')"  type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item v-for="(item, index) in baseGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
        <view class="grid-item-box">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text">{{ item.text }}</text>
          </view>
      </uni-grid-item>
      </uni-grid>
    </view>
          <!-- 宫格组件 -->
          <uni-section title="账单管理" v-show="auth.hasPermi('invest:installmentHistory:list')"  type="line"></uni-section>
          <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item v-for="(item, index) in billGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
        <view class="grid-item-box">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text">{{ item.text }}</text>
          </view>
      </uni-grid-item>
      </uni-grid>
    </view>
      <!-- 宫格组件 -->
       <uni-section title="记账管理" v-show="auth.hasPermi('invest:accounts:list')" type="line"></uni-section>
          <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item v-for="(item, index) in accountGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
        <view class="grid-item-box">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text">{{ item.text }}</text>
          </view>
      </uni-grid-item>
      </uni-grid>
    </view>
          <!-- 宫格组件 -->
          <uni-section title="心路历程" v-show="auth.hasPermi('invest:heartJourney:list')" type="line"></uni-section>
          <view class="grid-body">
      <uni-grid :column="4" :showBorder="false">
        <uni-grid-item v-for="(item, index) in heartJourneyGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
        <view class="grid-item-box">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text">{{ item.text }}</text>
          </view>
      </uni-grid-item>
      </uni-grid>
    </view>
  </view>

      
</template>

<script setup>
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作

// 也可以使用下面的方式
	import { ref } from "vue";
  const commonGridList=ref([
        { path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list'  },
        { path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'paperclip', permission: 'invest:accountDealRecord:list'  },
        { path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'reload', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'arrow-left', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'chatboxes', permission: 'invest:accountDealRecord:list'  },
        { path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'auth-filled', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户记账', icon: 'tune', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/accounts/commonList', text: '记账账户', icon: 'staff', permission: 'invest:accounts:list'  },
        { path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'list', permission: 'invest:creditCardBill:list'   },
        { path: '/pages/work/bill/onlineLendHistory/list', text: '网贷账单', icon: 'settings', permission: 'invest:installmentHistory:list'  },
        { path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'bars', permission: 'invest:installmentHistory:list'  },
        { path: '/pages/work/bill/creditQueryRecord/list', text: '征信查询记录', icon: 'search', permission: 'invest:creditQueryRecord:list'  }
      ])
  const baseGridList=ref([
        { path: '/pages/work/base/posmachine/list', text: 'pos机管理', icon: 'shop-filled', permission: 'invest:posmachine:list' },
        { path: '/pages/work/base/creditCard/list', text: '信用卡管理', icon: 'wallet', permission: 'invest:bankcard:list'  },
        { path: '/pages/work/base/debitCard/list', text: '储蓄卡管理', icon: 'wallet-filled', permission: 'invest:bankcard:list'  },
        { path: '/pages/work/base/lend/list', text: '借贷账户管理', icon: 'upload', permission: 'invest:bankcard:list'  },
        { path: '/pages/work/base/stocks/list', text: '股票账户管理', icon: 'calendar', permission: 'invest:futureStocks:list'  },
        { path: '/pages/work/base/futures/list', text: '期货账户管理', icon: 'paperplane-filled', permission: 'invest:futureStocks:list'  }
      ])
      const billGridList=ref([
        { path: '/pages/work/bill/futuresBill/list', text: '期货账单', icon: 'map', permission: 'invest:futureStocksBill:list'  },
        { path: '/pages/work/bill/stocksBill/list', text: '股票账单', icon: 'paperplane', permission: 'invest:futureStocksBill:list'  },
        { path: '/pages/work/bill/onlineLendHistory/list', text: '网贷账单', icon: 'settings', permission: 'invest:installmentHistory:list'  },
        { path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'list', permission: 'invest:creditCardBill:list'  },
        { path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'bars', permission: 'invest:installmentHistory:list'  },
        { path: '/pages/work/bill/peopleLendHistory/list', text: '人情账单', icon: 'staff-filled', permission: 'invest:installmentHistory:list'  },
        { path: '/pages/work/bill/creditQueryRecord/list', text: '征信查询记录', icon: 'search', permission: 'invest:creditQueryRecord:list'  }
      ])
      const accountGridList=ref([
        { path: '/pages/work/accounts/accounts/list', text: '记账账户', icon: 'staff', permission: 'invest:accounts:list'  },
        { path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'reload', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'arrow-left', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'auth-filled', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'chatboxes', permission: 'invest:accountDealRecord:list'  },
        { path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户记账', icon: 'tune', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/lendTransferRecord/list', text: '借贷账户记账', icon: 'link', permission: 'invest:accountsTransferRecord:list'  },
        { path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'paperclip', permission: 'invest:accountDealRecord:list'  }
      ])
      const heartJourneyGridList=ref([
      { path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list'  }
      ])
	function navigateTo(path) {
    uni.navigateTo({
        url: path
      });
	}
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 22rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>
