<template>
  <div class="news-detail">
    <div class="dialog-form-detail flex flex-r flex-wrap">
      <div class="flex flex-r" style="width: 100%">
        <div class="detail-label flex flex-align-center">新闻标题</div>
        <div class="detail-value flex flex-align-center">
          {{ dialogFormDetail.newsTitle }}
        </div>
      </div>

      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">是否置顶</div>
        <div class="detail-value flex flex-align-center">
          <dict-tag :options="is_state" :value="dialogFormDetail.isTop" />
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">是否显示</div>
        <div class="detail-value flex flex-align-center">
          <dict-tag :options="is_state" :value="dialogFormDetail.isShow" />
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">发布时间</div>
        <div class="detail-value flex flex-align-center">
          <span>{{ dialogFormDetail.publishTime }}</span>
        </div>
      </div>

      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">新闻类型</div>
        <div class="detail-value flex flex-align-center">
          <dict-tag :options="news_type" :value="dialogFormDetail.newsType" />
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">创建人</div>
        <div class="detail-value flex flex-align-center">
          <span>{{ dialogFormDetail.createBy }}</span>
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">创建时间</div>
        <div class="detail-value flex flex-align-center">
          <span>{{ dialogFormDetail.createTime }}</span>
        </div>
      </div>
    </div>
     
    <div class="detail-title1">首页图片</div>
    <div v-if="pictureList.length">
      <el-image
        style="width: 100px; height: 100px; margin-right: 10px"
        v-for="item in pictureList"
        :key="item"
        :src="item"
        :zoom-rate="1.2"
        :preview-src-list="pictureList"
        :initial-index="4"
        fit="cover"
      />
    </div>
    <empty v-else emptyText="" :width="100" :height="100"></empty>
    <div class="detail-title1">新闻内容</div>
    <div class="news-content" v-html="dialogFormDetail.newsContent"></div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const is_state = proxy.fixDict["isState"]; //是否字典
const { news_type } = proxy.useDict("news_type");

// 组件参数
const props = defineProps({
  dialogFormDetail: {
    type: Object,
    default() {
      return {};
    },
  },
});

const pictureList = computed(() => {
  var data = [];
  if (props.dialogFormDetail.picture && props.dialogFormDetail.picture.length) {
    data = props.dialogFormDetail.picture
      .filter((item) => item.refField == "home.picture")
      .map((item) => {
        {
          return item.url;
        }
      });
  }
  return data;
});
</script>

<style scoped lang="scss">
.news-content {
  :deep img {
    display: table;
    margin: auto;
  }
  :deep video {
    display: table;
    margin: auto;
    max-width: 350px;
  }
}
</style>