<template>
  <a :href="material_url">
    <div class="bc-material-file" data-weiling-mobile-ui-bc-material-file>
      <div class="material-icon-wrap">
        <WlPic :src="image_url" fit="cover" />
      </div>
      <div class="material-content">
        <p class="title" :class="title_class">
          {{ title }}
        </p>
        <p class="subtitle" v-if="subtitle">
          {{ subtitle }}
        </p>
      </div>
    </div>
  </a>
</template>

<script lang="ts">
export default {
  name: "BCMaterialFile",
};
</script>

<script lang="ts" setup>
import { computed } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

type TProps = {
  image_url: string;
  title: string;
  subtitle?: string;
  image_size?: string;
  material_id?: string;
  material_source_type?: string;
  corp_id?: string;
  agent_id?: string;
  href?: string;
  domain?: string;
  sid?: string;
};
const props = withDefaults(defineProps<TProps>(), {
  image_size: "0.44rem",
  domain: "",
  sid: "",
});
const title_class = computed(() => {
  return props.subtitle ? "title-line-1" : "title-line-2";
});
const material_url = computed(() => {
  if (props.href) return props.href;
  if (
    props.material_source_type &&
    props.material_id &&
    props.agent_id &&
    props.corp_id
  ) {
    return `${props.domain}/h5/monitorFile/index.html?material_id=${props.material_id}&corp_id=${props.corp_id}&agent_id=${props.agent_id}&source_type=${props.material_source_type}&sid=${props.sid}`;
  }
  return "javascript:void(0)";
});
</script>

<style lang="scss">
.bc-material-file[data-weiling-mobile-ui-bc-material-file] {
  padding: j(10);
  border-radius: j(8);
  width: 100%;
  box-sizing: border-box;
  @extend %flex-middle;
  .material-icon-wrap {
    width: v-bind(image_size);
    height: v-bind(image_size);
    border-radius: j(8);
    overflow: hidden;
    margin-right: j(9);
    flex-shrink: 0;
  }
  .material-content {
    .title {
      font-size: j(15);
      color: rgba(24, 25, 26, 1);
    }
    .title-line-1 {
      @include textEllipsis(1);
    }
    .title-line-2 {
      @include textEllipsis(2);
    }
    .subtitle {
      font-size: j(13);
      color: var(--wl-text-color-secondary-2);
      margin-top: j(5);
      @include textEllipsis(1);
    }
  }
}
</style>
