<template>
  <div class="app-container">
    <el-row justify="center">
      <el-col :lg="18" :sm="24">
        <el-card v-if="form.isOld=='1'" class="mt20 mb20">
          <iframe
            id="newsIframe" :src="`./source${form.jumpUrl}`" width="100%" height="0" frameborder="none"
            scrolling="no"
          />
        </el-card>
        <el-card v-else class="mt20 mb20" :body-style="{padding:'30px 60px'}">
          <h3 class="title">
            <span v-if="form.publishType">
              <span v-for="(t,index) in form.publishType.split(',')" :key="index" class="jstype">{{ t }}</span>
            </span>

            {{ form.name }}</h3>
          <div class="nInfo">
            <span>{{ form.belongTime }}</span>
            <span v-if="form.source">{{ form.source }}</span>
            <span v-if="form.author">发布人：{{ form.author }}</span>
          </div>
          <el-divider />
          <div class="content" v-html="form.content" />

          <!-- 视频-->
          <div v-if="attachmentMp4.length>0" @contextmenu.prevent="youji">
            <video-player v-for="(f,index) in attachmentMp4" :key="index" class="videoPlay mb20" controls :src="fillImgUrl(f.url)" />
          </div>
          <div v-if="attachmentFile.length>0" class="mt20">
            <!-- 附件-->
            <p class="fwb mt20">附件下载：</p>
            <p v-for="(f,index) in attachmentFile" :key="index" class="fwb">
              {{ index + 1 }}、
              <a @click="download(f)">{{ f.name }}</a>
              <!--              <a :href="fillImgUrl(f.url)" target="_blank">{{ f.name }}</a>-->
            </p>

          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { note } from '@/api/system/homePage'
import { useRoute } from 'vue-router'
import _ from 'lodash'

const form = ref({})
const route = useRoute()
// const hasMp4 = ref(false)
// const fileList = ref([])
const attachmentFile = ref([])
const attachmentMp4 = ref([])
const { proxy } = getCurrentInstance()
onMounted(() => {
  initData()
})
async function initData() {
  const res = await note(route.query.id)
  form.value = res.data
  if (form.value.attacthJson) {
    // fileList.value = JSON.parse(form.value.attacthJson)
    // hasMp4.value = _.some(fileList.value, (f) => {
    //   return f.url.indexOf('.mp4') > -1
    // })
    const attachment = JSON.parse(form.value.attacthJson)
    attachmentFile.value = _.filter(attachment, (a) => a.url.toLowerCase().indexOf('.mp4') === -1) || []
    attachmentMp4.value = _.filter(attachment, (a) => a.url.toLowerCase().indexOf('.mp4') !== -1) || []
  }
  console.log(res)
}

async function download(f) {
  // const res = await getFile({ fileUrl: f.url })
  proxy.download('/upload/getFile', {
    fileUrl: f.url
  }, f.name)
}

function youji() {
}

</script>

<style lang="scss" scoped>
.videoPlay{width: 100%;aspect-ratio: 16/9;height: 400px;}
.title {
  text-align: center;
  font-size: 24px;
}

.nInfo {
  text-align: center;

  span {
    border-right: 1px solid #E2E5E6;
    padding: 0 15px;
    font-size: 14px;
    line-height: 1;
    color: #95A1A6;
  }

  span:last-child {
    border: none;
  }
}

.content {
  text-align: justify;

  p {
    img {
      max-width: 100%;
      margin: auto;
    }
  }

  img {
    max-width: 100%;
    margin: auto;
  }
}

.newsLine {
  .item {
    display: flex;
    position: relative;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px dashed #EEEEEE;
    padding: 30px 0;

    .date {
      width: 60px;
      height: 60px;
      text-align: center;
      background: #FAFAFA;
      margin: 0 10px;

      .day {
        color: var(--el-color-primary);
        transform: scaleX(0.7);
        font-weight: bold;
        font-size: 24px;
      }

      p {
        font-size: 14px;
        margin: 0;
        transform: scaleX(0.7);
        font-weight: bold;
        color: #7B7F83;
      }
    }

    .item-body {
      flex: 1;

      h3 {
        padding: 0 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        line-height: 1.6;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #000000;
        margin: 0
      }
    }
  }

  .item:hover {
    background: rgba(173, 24, 31, 0.03);

    .date {
      background: #AD181F;

      .day {
        color: #fff;
      }

      p {
        color: #fff;
      }
    }

    .item-body {
      h3 {
        color: var(--el-color-primary);
      }
    }

    a {
      filter: none
    }
  }
}

h2 {
  padding: 8px 0 0 40px;
  font-size: 20px;
}

.newIcon {
  background: url("@/assets/v1/news/new.png") no-repeat left;
  background-size: 40px;
}

.hotIcon {
  background: url("@/assets/v1/news/hot.png") no-repeat left;
  background-size: 30px;
}

.firstItem {
  border-bottom: 1px dashed #EEEEEE;
  padding: 10px;
  cursor: pointer;

  .imgbox {
    aspect-ratio: 16/9
  }

  h3 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 12px 0;
  }
}

.forWei {
  display: none;
}

@media (max-width: 500px) {
  .forWei {
    height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    display: block;
    background: #fff;
    padding: 1px 15px;

    .title {
      text-align: left;
    }

    .nInfo {
      text-align: left;

      span {
        padding: 0;
        margin-right: 10px;
      }
    }
  }
  .forPc {
    display: none;
    font-size: 17px;
  }
}

</style>