<template>
  <!-- <div class="fullScreen">

  </div> -->
  <div class="mainView">
    <bread-crumb />
    <div class="articleInfo">
      <div class="infoBox">
        <el-form label-width="120">
          <el-form-item
            label="标    题："
            class="titleForm"
            v-if="contentDEl.newsTitle"
          >
            <span>{{ contentDEl.newsTitle }}</span>
          </el-form-item>
          <el-form-item label="新闻来源：" v-if="contentDEl.newsSource">
            <span>{{ contentDEl.newsSource }}</span>
          </el-form-item>
          <el-form-item label="发布时间" v-if="contentDEl.publishTime">
            <span>{{ getDateDEl(contentDEl.publishTime) }}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="article">
      <h2>{{ contentDEl.newsTitle }}</h2>
      <div class="times" v-if="contentDEl.publishTime">
        发布时间：{{ contentDEl.publishTime }}
      </div>
      <div class="content" v-html="contentDEl.newsContent"></div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { useRouter, useRoute } from 'vue-router'
import BreadCrumb from '@/components/breadcrumbModule/index.vue'
import { ref, onMounted } from 'vue'
import { IMGXWdetail } from '@/api/Important.js'
import uils from '@/utils/utils'
const router = useRouter()
const route = useRoute()
onMounted(() => {
  content({ id: route.query.id })
})
// 粮食局信息文章内容
const contentDEl = ref({})
const content = async (v) => {
  const { data } = await IMGXWdetail(v)
  contentDEl.value = []
  console.log(data)
  contentDEl.value = data
}
const length = router.currentRoute.value.matched.length - 1
router.currentRoute.value.matched[length].meta.title = '图片新闻'
const getDateDEl = (v) => {
  const formattedDate = uils.getDate('YYYY-MM-DD', v)
  return formattedDate
}
</script>
<style scoped lang="less">
.articleInfo {
  background: #f5faff;
  padding: 30px;
  display: flex;
  margin-bottom: 23px;
  border: 1px #e7e9eb solid;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .infoBox {
    width: 990px;
    padding: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 1px solid #d7e9fa;
    background: #ebf4fd;
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep(.el-form) {
      overflow: hidden;
      .el-form-item {
        width: 50%;
        float: left;
        .el-form-item__label {
          font-size: 16px;
          line-height: 32px;
          padding-left: 0px;
          font-weight: bold;
        }
        .el-form-item__content {
          font-size: 16px;
        }
      }
      .titleForm {
        width: 100%;
      }
    }
  }
}
.article {
  padding: 20px 30px;
  border: 1px solid #e3e3e3;
  background: #f5faff;
  h2 {
    font-size: 33px;
    color: #138ee7;
    font-weight: bold;
    text-align: center;
    margin: 35px 0 25px 0;
  }
  .times {
    padding-bottom: 17px;
    text-align: center;
    font-size: 14px;
    color: #969696;
    border-bottom: 1px solid #e7e9eb;
  }
  .content {
    background: #ffff;
    max-height: 940px;
    margin: 40px auto;
    overflow: auto;
    padding: 30px 35px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // flex-direction: column;
  }

  .fileDownload {
    // padding: 30px 35px;
    margin: 0 auto;
    font-size: 16px;
    p {
      color: #606266;
      margin-bottom: 5px;
    }
    .title {
      color: #606266;
      margin-bottom: 5px;
    }

    .fileName {
      margin: 8px 0 8px 24px;
      a {
        cursor: pointer;
        color: #409eff;
      }
    }
  }
}

/* 滚动条轨道样式 */
::-webkit-scrollbar {
  width: 10px;
  margin-left: 20px;
  background-color: transparent;
  /* 设置滚动条宽度 */
}

/* 滚动条滑块样式 */
:hover::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #2d66a5;
}

/* 滚动条轨道hover状态样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f1f1f1;
  /* 设置轨道hover状态时的背景颜色 */
}

/* 滚动条滑块hover状态样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* 设置滑块hover状态时的背景颜色 */
}
</style>
