<template>
  <!-- <div class="app-detail-page" :style="{padding}">
    <ViewTotalCard :info="data.total" class="app-detail-left" />
    <div class="app-detail-right" :class="rightClass" v-if="data.list?.length">
      <ViewTotalCard v-for="item in data.list" :key="item.id" :info="item" />
    </div>
  </div> -->
  <div class="app-detail-page" :style="{padding,background: nobg ? 'transparent' : '#f8f9fa'}" >
    <ViewTotalCard :info="data.total" class="app-detail-left" />
    <div class="app-detail-right" :class="rightClass" v-if="data.list?.length">
      <ViewTotalCard v-for="item in data.list" :key="item.id" :info="item" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import ViewTotalCard from './totalCard.vue';
import { toNumber } from 'lodash-es';
const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  height: {
    type: String,
    default: '110',
  },
  nobg: {
    type: Boolean,
    default: false,
  },
});
const padding = computed(() => {
  const top = (toNumber(props.height) - 56)/2
  return `${top}px 16px ${top}px 0px`
});
const rightClass = computed(() => {
  return {
    'app-detail-mindata': props.data?.list?.length < 3,
  };
});
</script>

<style lang="less" scoped>
.app-detail-page {
  display: flex;
  background: #f8f9fa;
  position: relative;
  height: 100%;
}
.app-detail-right {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-left: 40px;
  flex: 3;
  cursor: pointer;
}
.app-detail-mindata {
  flex: 2;
}
/*  修改滚动条样式*/
.app-detail-right::-webkit-scrollbar {
  display: none;
  width: 12px;
  height: 3px;
  /**/
}
.app-detail-right::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.app-detail-right::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 5px;
}
.app-detail-right::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.app-detail-right::-webkit-scrollbar-corner {
  background: #bfbfbf;
}
</style>
