<!-- 资料item -->
<template>
  <div
    class="file_item"
    :class="{
      disabled: disabled || sub_type_not_allow,
      'need-opacity': sub_type_not_allow,
    }"
  >
    <div class="flex-row">
      <div class="file_logo">
        <img :src="material.material_logo" alt="" />
        <div class="flex-center">
          <p v-if="!sub_type_not_allow">已选择</p>
        </div>
      </div>
      <div class="file_info">
        <p class="name" ref="refName">
          {{ material.material_name }}
        </p>
        <p class="size">
          {{ size }}
        </p>
      </div>
    </div>
    <div class="view_count">浏览量{{ statis.view_count }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { sizeTostr } from "@mobileUI/utils";
interface Props {
  data: object;
  disabled?: boolean;
  sub_type_not_allow?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {},
  disabled: false,
  sub_type_not_allow: true,
});
const refName: any = ref(null);
const statis = computed(() => {
  return props.data?.statis;
});
const material = computed(() => {
  return props.data?.material || {};
});
const size = computed(() => {
  if (props.data?.material?.material_type == 1) {
    return props.data.material.material_subtitle;
  } else {
    return sizeTostr(props.data?.material?.material_size);
  }
});
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}

.file_item {
  width: 100%;
  display: flex;
  flex-direction: column;

  .file_logo {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 6px;
    margin-right: 8px;
    flex-shrink: 0;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    div {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #ffffff;
      font-size: 13px;
      background-color: var(--wl-mask-color);
    }
  }

  .file_info {
    flex: 1;
    overflow: hidden;

    .name {
      width: 100%;
      font-size: 15px;
      color: var(--wl-text-color-title-1);
      word-break: break-all;
      line-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .size {
      margin-top: 6px;
      font-size: 13px;
      color: var(--wl-text-color-secondary-2);
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }

  .view_count {
    color: var(--wl-text-color-placeholder);
    font-size: 13px;
    margin-top: 6px;
  }
}

.disabled {
  .file_logo div {
    opacity: 1;
  }

  .file_info .name {
    color: var(--wl-text-color-secondary-2);
  }
}

.need-opacity {
  opacity: 0.4;
}

.flex-row {
  display: flex;
}

.flex-center {
  @extend %flex-middle-center;
}
</style>
