<template>
  <menu-swiper lefts="" rights="" :mois="false">
    <view class="home">
        <head-nav :leftis="true" titleis="新闻资讯详情" :rightis="false" :sureis="false"></head-nav>
        <view class="container">
            <view class="texts">
              <view class="title">{{ arrObj.title }}</view>
              <view class="con">
                <view class="author">作者：{{ arrObj.author }}</view>
                <view class="time">{{ arrObj.datePosted }}</view>
              </view>
              <view class="picimg">
                <image :src="arrObj.fileurl" class="pic"></image>
              </view>
              <view class="det" v-html="arrObj.content"></view>

              <!-- <view class="det">
                航联传播主办的民航趋势论坛将于2023年9月19日-20日重磅回归，全方位解读航空业的发展方向，共同探讨行业增长的最佳路径。
                2023年全球航空业运量有望在今年恢复到2019年的87.8%、净利润达到98亿美元；2040年预计全球航空旅客流量将实现翻倍，突破80亿人次大关。同时，航空货运发展也出现新的趋势。
                今年的巴黎航展上飞机订单量达到历史新高。中国国产大飞机C919投入商业运营，中国航空业发展进入新的阶段。此外，航空业正在发生着革命性的巨变，绿色航空、减排、SAF等可持续发展议题成为行业的主流，同时，以体验为重的新的消费趋势已经出现，元宇宙、
              </view> -->
            </view>
        </view>
  
  
  
    </view>
  </menu-swiper>
  </template>
  
  <script setup lang="ts">
    // import { uuid } from '../../utils';
    import { ref,reactive } from 'vue';
    import { request } from '@/utils/request';
    import {
      onLoad,
    } from '@dcloudio/uni-app';

    interface Person {
      title: string,
      newsDesc: string,
      datePosted: string,
      fileurl: string,
      content: string,
      author: string,
    }

    const arrObj: Person = reactive({
      title: '',
      newsDesc: '',
      datePosted: '',
      fileurl: '',
      content: '',
      author: '',
    })

    onLoad((options:any) => {
      getData(options.id);
    });

    function tapNavigateTo(_page:any) {
      uni.navigateTo({
        url: `./${_page}`
      });
    }

    function getData(id:any){
      uni.showLoading({
        mask: true,
      });
      request({
        method: 'post',
        url: 'news-selectOneNews',
        data: {
          id: id
        },
      }).then(res => {
        if(res.code == 0){
          let obj = res.data;

          arrObj.title = obj.title;
          arrObj.newsDesc = obj.newsDesc;
          arrObj.datePosted = obj.datePosted;
          arrObj.content = obj.content;
          arrObj.author = obj.author;

          if(obj.appNewsFileRecordList.length > 0){
            obj.appNewsFileRecordList?.map(item => {
              if(item.fileflag == '0'){
                arrObj.fileurl = item.fileurl;
              }
            });
          }
        }
        uni.hideLoading();
      }).catch(res => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        uni.hideLoading();
      });
    }
  
  </script>
  
  <!-- <style lang="scss" scoped> -->
  <style lang="less" scoped>
    .home{
      height: 100%;
      background-color: #ffffff;
    }
    .bj{
      background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);
      border-radius: 0rpx 0rpx 32rpx 32rpx;
      padding-bottom: 125rpx;
    }
    .container{
      padding: 0rpx 32rpx;
    }
    // 
    .head{
      .container{
        display: flex;
        justify-content: space-between;
        font-size: 36rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        padding: 10rpx 32rpx;
        background: linear-gradient(226deg, #168AFF 0%, #0E57FF 100%);
        .pic{
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
    // 
    .texts{
      padding-top: 100rpx;
      padding-bottom: 100rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #444D54;
      .title{
        font-size: 34rpx;
        font-weight: 500;
        margin-bottom: 16rpx;
      }
      .con{
        font-size: 24rpx;
        color: #808080;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
      }
      .pic{
        border-radius: 16rpx;
        margin-bottom: 32rpx;
        width: 100%;
      }
      .det{
        line-height: 40rpx;
      }
    }
    /deep/ p{
      img{
        width: 100%;
      }
    }
  </style>