<template>
  <div class="mx-5">
    <div
      class="wrap22 flex items-center"
      @click="
        $router.push({
          path: 'NewsDetail',
          query: { uuid: info?.uuid, type: 'news' },
        })
      "
    >
      <div class="box1 flex-col flex-grow justify-between overflow-hidden">
        <span class="info8">{{ info?.title }}</span>
        <span class="info10">{{ info?.desc }}</span>
        <div class="layer4 flex pr-12">
          <span class="info9 mr-2">{{ info?.writer }}</span>
          <span class="word24 flex-shrink-0">{{
            $format(info?.update_at, "YYYY-MM-DD")
          }}</span>
        </div>
      </div>
      <div class="box2 ml-4 flex-shrink-0">
        <img class="w-full h-full object-cover" :src="url" alt="" />
      </div>
    </div>
    <!-- <div class="wrap23 flex-col"></div> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { getImageSrcFromFileHash } from "@/service/FileService/index";
export default defineComponent({
  props: {
    info: {
      type: Object,
    },
  },
  setup(props) {
    const url = ref("");
    url.value = getImageSrcFromFileHash(
      (props.info as { file_name: string })?.file_name
    );
    return {
      url,
    };
  },
});
</script>
<style scoped>
.wrap22 {
  height: 88px;
  justify-content: space-between;
  margin: 21px 0 0;
}

.box1 {
  /* z-index: auto; */
  height: 88px;
}

.info8 {
  /* z-index: 205; */
  display: block;
  overflow-wrap: break-word;
  color: rgba(27, 31, 55, 1);
  font-size: 14px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangSC-Medium;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info10 {
  /* z-index: 205; */
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.1679999977350235px;
  font-family: PingFangSC-Medium;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer4 {
  /* z-index: auto; */
  height: 25px;
  margin-top: 13px;
  justify-content: space-between;
}

.info9 {
  /* z-index: 206; */
  height: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word24 {
  /* z-index: 207; */
  height: 25px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(141, 146, 175, 1);
  font-size: 12px;
  letter-spacing: 0.14399999380111694px;
  line-height: 25px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box2 {
  /* z-index: 209; */
  /* position: relative; */
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  /* background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd7b6ced5c00064ccb38620d2a9de003cbd2e2688ac377f17fc74f6fba4dadd11) -1px
    0px no-repeat; */
  margin-top: 3px;
}

.pic3 {
  width: 80px;
  height: 80px;
  /* position: absolute;
  z-index: 210;
  top: 0;
  left: 0; */
}

.wrap23 {
  height: 1px;
  border: 1px solid #e7e7e7;
  margin-top: 10px;
}
</style>
