<template>
  <view class="class_ification">
    <scroll-view type="custom" scroll-x @scroll="handleScroll">
      <view class="class_ification_scroll">
        <template v-for="(i, index) in auth?.data?.config?.companyAction" :key="`items_${index}`">
          <view class="items" v-if="i?.is_show" @click="goToPage(i)">
            <view class="icon_image">
              <image :src="i.icon?.[0]?.url || ''" mode="heightFix" lazy-load="false" />
              <view class="badge" v-if="!index && useModel?.countBills?.value">
                {{ useModel?.countBills?.value }}
              </view>
            </view>
            <view class="label">{{ i.name }}</view>
          </view>
        </template>
      </view>
    </scroll-view>
    <hs-scroll-indicator :scroll_view="scroll_view" />
  </view>
</template>
<script setup lang="ts">
import { getIsHouseExist } from '@/common/libraries/IsHouseExist'
import useModel from '../model'
import { ref } from 'vue'
import { useWeAppAuthStore } from '@/common'
const auth = useWeAppAuthStore()
const scroll_view = ref<any>({})
const handleScroll = (e: any) => {
  scroll_view.value = e.detail
}
const goToPage = async (i?: { skip_url?: string }) => {
  if (!getIsHouseExist(i)) return
  if (i?.skip_url) {
    uni.navigateTo({ url: i?.skip_url })
  } else {
    uni.showModal({
      title: '提示',
      content: '该功能在当前项目暂未开放，敬请期待',
      confirmColor: '#0082FA',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
}


</script>
<style lang="scss" scoped>
.class_ification {
  color: #3d3d3d;
  margin: 0 30rpx;
  border-radius: 12rpx;
  white-space: nowrap;
  .class_ification_scroll {
    padding-top: 30rpx;
  }
  .items {
    text-align: center;
    font-size: 24rpx;
    display: inline-block;
    color: #333;
    width: 20%;
    .icon_image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 28rpx;
      margin: 0 auto;
      position: relative;
      .badge {
        position: absolute;
        background-color: #f5222d;
        color: #fff;
        padding: 3rpx;
        border-radius: 100rpx;
        top: -15rpx;
        min-width: 35rpx;
        right: -15rpx;
        font-size: 23rpx;
      }
    }
    image {
      width: 100%;
      height: 100%;
    }
    .label {
      padding: 15rpx 0 0 0;
    }
  }
}
</style>
