<template name="jingangarea">
  <view class="class_ification">
    <view v-for="(i, index) in props?.item" :key="`items_${index}`" class="items"
      @click="goToPage(getJingangArea(i?.path)?.url)">
      <view class="items_icon">
        <image :src="`/static/svg/${getJingangArea(i?.path)?.icon}`" mode="widthFix" />
        <view v-if="i?.key && useModel?.IndexCount?.value?.[getJingangArea(i?.path)?.key]" class="badge">
          {{ useModel?.IndexCount?.value?.[getJingangArea(i?.path)?.key] || 0 }}
        </view>
      </view>
      <view class="label">{{ getJingangArea(i?.path)?.label }}</view>
    </view>
  </view>
  <!-- <view class="class_ification"> -->
  <!-- <view id="myScrollView" ref="scroll_view_div"> -->
  <!-- <view v-for="(i, index) in list" :key="`items_${index}`" class="items" @click="goToPage(i?.url)">
      <view class="items_icon">
        <image :src="`/static/svg/${i.icon}`" mode="widthFix" />
      </view>
      <view class="label">{{ i.label }}</view>
    </view>
  </view> -->
  <!-- <scroll-view type="custom" scroll-x @scroll="handleScroll">
    </scroll-view> -->
  <!-- <hs-scroll-indicator :scroll_view="scroll_view" /> -->
  <!-- </view> -->
</template>
<script setup lang="ts">
import getUserLogin from '@/common/libraries/userUserLogin'
import useModel from '../model'
const props = defineProps([
  'item'
])
const goToPage = (url?: string) => {
  if (url) {
    uni.navigateTo({
      url: !getUserLogin?.getLoginStatus() ? '/pages/login' : url || ''
    })
  } else {
    uni.showModal({
      title: '提示',
      content: '该功能暂未开放，敬请期待',
      confirmColor: '#0082FA',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
}
const list = [
  {
    label: '房屋缴费',
    icon: 'house_icon.svg',
    url: '/CUSTOMER/list_house/index',
    key: ""
  },
  {
    label: '新增工单',
    icon: 'workorder_icon.svg',
    url: '/ME/work_order_home/index',
    key: ""
  },
  {
    label: '任务中心',
    icon: 'task_icon.svg',
    url: '/INDEX/task/list/index',
    key: 'houseWorkOrderCount'
  }, {
    label: '打卡考勤',
    icon: 'CheckInIcon.svg',
    url: '/ME/attendance/my_schedules/index',
    key: ""
  },

  {
    label: '水印相机',
    icon: 'WatermarkCamera.svg',
    url: '/INDEX/watermark_camera/index',
    key: ""
  },
  {
    label: '客户管理',
    icon: 'user_icon.svg',
    url: '/CUSTOMER/list_user/index',
    key: ""
  },
  {
    label: '住户登记',
    icon: 'household_registration.svg',
    url: '/CUSTOMER/bind_house_form/index',
    key: ""
  },
  {
    label: '仪表抄表',
    icon: 'meter_reading_icon.svg',
    url: '/pages/public/asset_houses/index?type=meter',
    key: ""
    // url: '/ME/instrument/list/index'
  },
  // {
  //   label: '数据看板',
  //   icon: 'performance_icon.svg',
  //   url: '/pages/data_oard/index'
  // },
  // {
  //   label: '知识问答',
  //   icon: 'knowledge_icon.svg',
  //   url: '/ME/knowledge_qa/index'
  // },
  {
    label: '突发事件',
    icon: 'emergency_icon.svg',
    url: '/ME/emergency/list/index',
    key: "emergencyEventCount"
  },
  {
    label: '项目公告',
    icon: 'announcement.svg',
    url: '/ME/announcement/list/index',
    key: "unread_count"
  }
]

const getJingangArea = (idx: number) => {
  return list[idx]
}

</script>
<style lang="scss" scoped>
.class_ification {
  color: #3d3d3d;
  // margin: 0 30rpx;
  padding: 0 10rpx;
  display: flex;
  flex-wrap: wrap;

  // justify-content: space-between;
  // white-space: nowrap;
  .items {
    text-align: center;
    font-size: 24rpx;
    width: 20%;
    // display: inline-block;
    // margin-left: 30rpx;
    padding-top: 30rpx;

    .items_icon {
      height: 100rpx;
      width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      position: relative;

      image {
        height: 100%;
        width: 100%;
      }

      .badge {
        position: absolute;
        background-color: #f5222d;
        color: #fff;
        padding: 3rpx;
        border-radius: 100rpx;
        top: -15rpx;
        min-width: 35rpx;
        right: -15rpx;
        font-size: 23rpx;
      }
    }

    // &:first-child {
    //   image {
    //     height: 40rpx;
    //     width: 40rpx;
    //   }
    // }
    .label {
      padding: 15rpx 0 0 0;
    }
  }
}
</style>
