<template>
  <div>
    <div class="item" v-for="item in list" :key="item.noticeId" @click="one=item;one.show=true;">
        <div :title="item.noticeTitle">{{ item.noticeTitle }}</div>
        <div :title="item.createTime">{{ item.createTime.toDate("yyyy-MM-dd HH:mm:ss").format("MM/dd") }}</div>
    </div>
    <div class="item" v-for="i in props.len - list.length" :key="i">
    </div>
    <el-dialog draggable :title="one.noticeTitle" v-model="one.show" width="1000px">
      <div style="min-height: 40vh;">
        <div v-html="one.noticeContent"></div>
        <div style="padding: 1rem; line-height: 2; text-align: right;">{{ one.createBy }} <br/>{{ one.createTime }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { listNotice } from "@/api/system/notice";



const props = defineProps({
  id:{
    type:String,
    required:true
  },
  len:{
    type:Number,
    default:6
  }
});



const list = ref([]);

onMounted(async()=>{
  let queryParams =  {
    pageNum: 1,
    pageSize: props.len,
    status: 0,
    noticeType:props.id,
    orderByColumn:"create_time",
    isAsc:"desc"
  }
  let r = await listNotice(queryParams);
  list.value = r.rows;
});

const one = ref({});


</script>

<style  lang="scss" scoped>
.item {
  border-bottom: dotted 1px #0001;
  display: grid;
  grid-template-columns: 1fr 4em;
  font-size: var(--el-font-size-base,14px);
  color:#000a;
  box-sizing: content-box;
  padding-top: .3em;
  height: 2em;
  line-height: 2em;
  cursor: pointer;
  transition: all .5s;

  


  &>:nth-child(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &::before {
      content: "◈";
      margin-right: .5em;
    }
  }

  &>:nth-child(2) {
    opacity: .7;
    font-size: .9em;
    text-align: center;
    position: relative;
    top:.1em;
  }
  &:hover {
      color:var(--el-color-primary-dark-2);
  }
}
</style>