daikins/.svn/pristine/d1/d1eaa98fc945cce0af7fd65b8d57f55c39773142.svn-base

<!-- 外部情报 > 情报详情 -->
<script setup lang="ts">
import AppBlock from '@/components/AppBlock.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
import DetailNews from './DetailNews.vue'
import DetailNew from './DetailNew.vue'
import DetailNew1 from './DetailNew1.vue'
import { getArticleDetail,faqDetail,demandDetail,trendsDetail} from '@/api/daikin/base'
import HomeHead from '@/views/home/components/HomeHead.vue'
import { useDate } from '@/views/home/hooks/useDate'
const { push } = useRouter()
const route = useRoute()
const { day, week } = useDate()
const SideNews = [
  { key: 'IntelligenceOutside', name: '社外情报' },
  { key: 'IntelligenceWithin', name: '社内情报' },
]
const types = ref()
const state = ref<any>({})
async function getData() {
  const { id ,type} = route.params
  if (!id||!type) return
  types.value = type
  // console.log(types.value)
  if(type==1){
    const { data } = await faqDetail({id})
    state.value = data
  }
  else if(type==2){
    const { data } = await demandDetail({id})
    state.value = data
  }
  else{
      const { data } = await trendsDetail({id} )
      data.tagColor = data.tag === '紧急' ? '#e60e0e' : '#2cba06'
      data.content = unescapeHTML(data.content)
      state.value = data
    }
  }


function unescapeHTML(html: string) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.documentElement.textContent;
}

getData()
const goBack=()=>{
  history.back()
}
</script>

<template>

  <div class="page">
    <HomeHead class="top">
        <!-- <template #content>
            <HomeHeadSearch />
        </template> -->
    </HomeHead>
    <div class="back" @click="goBack">返回首页</div>

    <div class="h-full  flex  ml30px">
        <div class="font-600 flex items-end mt30px">
            <div class="text-36px">详情</div>
            <div class="text-18px ml40px mr25px">{{ day }}</div>
            <div class="text-18px">{{ week }}</div>
        </div>
    </div>
    <div class="page-wrap  h-834px mt60px" style="grid-template-columns: 1fr">
      <div class="page-main" style="padding: 0 30px;">
        <AppBlock class="h-full">
          <div class="overflow-y-auto h-full">
            <div class="px46px py40px">
              <DetailNews v-if="types==3"
                :title="state.title"
                :content="state.content"
                :publishTime="state.publishTime"
                :tag="state.tag"
                :tagColor="state.tagColor"
                :source="state.source"
                :chatVOList="state.chatVOList"
              />
              <DetailNew v-if="types==2" :dataList="state"/>
              <DetailNew1 v-if="types==1" :dataList="state"></DetailNew1>
            </div>
          </div>
        </AppBlock>
      </div>
      <!-- <div class="page-side" v-for="item in SideNews" :key="item.key">
        <AppBlock class="h-400px">
          <div class="box h-full">
            <div class="box-title flex items-center" @click="push({ name: item.key })">
              <span class="flex-1">{{ item.name }}</span>
              <span>❯</span>
            </div>
            <div class="box-content overflow-y-auto px22px">
              <div class="py13px line" v-for="i in 15" :key="i">
                 <AppNewsBox
                  class="!lh-2em"
                  labelText="New"
                  labelColor="#2cba06"
                  text="FY22年度集团新年方针:领先时代的变化开创崭新的未来变化开崭新的未来变化开e 创崭新的未来"
                  date="2023-05-22"
                /> 
              </div>
            </div>
          </div>
        </AppBlock>
      </div>-->
    </div>

</div>
</template>

<style scoped lang="less">
.back{
  position: absolute;
  top: 25px;
  left: 25px;
  color: #fff;
  // z-index: 500;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
}
.top {
    right: 30px;
    top: 0px;
}
.page {
  width: 100%;
  // height: 100px;
  font-family: 'PingFang SC';
  user-select: none;

  background-image: url('@/assets/images/bg.jpg');
  background-color: #000;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;

  line-height: 1;
    .page-wrap {
      display: grid;
      grid-template-columns: 1fr 314px;
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 30px;
      grid-row-gap: 30px;

      .page-main {
        height: 830px;
        grid-area: 1 / 1 / 3 / 2;
      }
      .page-side {
        height: 100%;
        grid-area: 1 / 2 / 2 / 3;
        &:last-of-type {
          height: 300px;
          grid-area: 2 / 2 / 3 / 3;
        }
      }
    }


}
.main {
  background-image: url('@/assets/images/bg-rs-main.svg');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto;
}

.box {
  --title-h: 58px;

  border: 0;
  .box-title {
    height: var(--title-h);
    color: #fff;
    background-color: #537deb;
    font-size: 18px;
    font-weight: 600;
    padding: 0 24px;
    cursor: pointer;
  }
  .box-content {
    height: 100%;
    max-height: calc(100% - var(--title-h));
  }
}
.line {
  border-bottom: 1px solid #eef3fb;
}
</style>