<template>
  <view>
    <Navbar title="工作台" canBack></Navbar>
    <view class="container flex flex-direction align-center justify-center">
      <view class="insightCss margin-tb-xl padding flex justify-between align-center" @click="handleClick('insight')">
        <u-image width="60rpx" height="60rpx" src="/static/images/icon/insight.png" shape="circle"></u-image>
        <view class="text-xxl text-bold text-white">市场洞察平台</view>
        <u-icon name="arrow-right" color="#fff"></u-icon>
      </view>
      <view class="chargeCss margin-tb-xl padding flex justify-between align-center" v-if="validate()"
        @click="handleClick('charge')">
        <u-image width="60rpx" height="60rpx" src="/static/images/icon/charge.png" shape="circle"></u-image>
        <view class="text-xxl text-bold text-white">市场化收费工具</view>
        <u-icon name="arrow-right" color="#fff"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {

    },
    data() {
      return {

      }
    },
    computed: {

    },
    onLoad() {
      if (!this.validate()) {
        this.handleClick('insight');
        // setTimeout(()=>{
        //    uni.switchTab({
        //      url: '/pages/market/index'
        //    })
        // },500)
      }
    },
    methods: {
      // 验证是否需要显示工具菜单
      validate() {
        let toolPermissions = ['schsf:mcVisit:list', 'schsf:mcIgnition:list', 'schsf:mcConstruction:list']
        console.log(this);
        // 假设 this.$checkPermi 是一个返回布尔值的方法
        let hasPermission = toolPermissions.some(permission => {
          return this.$checkPermi([permission]);
        });
        return hasPermission
      },
      handleClick(workName) {
        console.log(workName);
        this.$store.dispatch('setTab', {
          data: workName
        });
        let tabList = this.$store.state.tabbar.list
        let urls = tabList[0].pagePath
        console.log("跳转", urls);
        setTimeout(() => {
          uni.switchTab({
            url: `/${urls}`
          })
          console.log(this.$store.state);
        }, 500)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    height: calc(100vh - 100rpx);
  }

  .insightCss {
    width: 80%;
    height: 150rpx;
    background: linear-gradient(to right, #6DE6CE, #5566E2);
    border-radius: 80rpx;
  }

  .chargeCss {
    width: 80%;
    height: 150rpx;
    background: linear-gradient(to right, #FFCE02, #EE6202);
    border-radius: 80rpx;
  }
</style>
