<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?.created_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 Vue, {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>