<template>
  <div>
    <div class="box">
      <div class="nakedTitle">
        <h3>外链商城</h3>
        <!--        <a class="more">MORE⇀</a>-->
      </div>
      <el-card class="mb20">
        <el-row :gutter="20">
          <el-col :lg="4" :md="6" :sm="12" v-for="n in linkList2" :key="n.noteId">
            <a :href="n.jumpUrl" target="_blank" class="mb20" style="display:block;">
              <img style="width: 100%;height: 70px;object-fit: contain;" :src="fillImgUrl_webSite(n.picUrl)"/>
            </a>
          </el-col>
        </el-row>
      </el-card>

      <div class="nakedTitle">
        <h3> 招商信息</h3>
        <a class="more" @click="goList(query1,'招商信息')">MORE⇀</a>
      </div>
      <el-row :gutter="20" class="newsColorPanel mb20">
        <el-col :lg="8" :md="8" :sm="12" v-for="(n,index) in list1" :key="index" @click="goDetail(n)">
          <el-card class="item">
            <span class="date">{{ n.belongTime }}</span>
            <h3 class="esp_2">{{ n.name }}</h3>
            <div class="more">更多阅读<span class="icon">⇀</span></div>
          </el-card>
        </el-col>
      </el-row>

      <div class="nakedTitle">
        <h3>品牌建设</h3>
        <a class="more" @click="goList(query2,'品牌建设')">MORE⇀</a>
      </div>
      <el-row :gutter="20" class="newsimgcover mb20">
        <el-col :lg="8" :md="8" :sm="12" v-for="(n,index) in list2" :key="index"
                @click="goDetail(n)">
          <div class="item shadow">
            <div class="imgbox"><img :src="fillImgUrl_webSite(n.picUrl)"></div>
            <h3 class="esp">{{ n.name }}</h3>
          </div>
        </el-col>
      </el-row>

      <div class="nakedTitle">
        <h3>商务规范及文件下载</h3>
        <a class="more" @click="goFileList">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row gutter="30">
          <el-col :lg="12" :xs="24" v-for="n in fileList" :key="n.noteId">
            <a class="file-item" target="_blank" :href="fillImgUrl_webSite(n.attacthJsonObj[0]?.url)">
              <h3 class="esp">
                <i class="icon pdf" v-if="n.attacthJsonObj[0]?.url.indexOf('pdf')>-1"></i>
                <i class="icon doc" v-else-if="n.attacthJsonObj[0]?.url.indexOf('doc')>-1"></i>
                <i class="icon xls" v-else-if="n.attacthJsonObj[0]?.url.indexOf('xls')>-1"></i>
                <i class="icon txt" v-else-if="n.attacthJsonObj[0]?.url.indexOf('txt')>-1"></i>
                <i class="icon ppt" v-else-if="n.attacthJsonObj[0]?.url.indexOf('ppt')>-1"></i>
                <i class="icon zip" v-else-if="n.attacthJsonObj[0]?.url.indexOf('zip')>-1"></i>
                <i class="icon zip" v-else-if="n.attacthJsonObj[0]?.url.indexOf('rar')>-1"></i>
                <i class="icon othe" v-else></i>
                {{ n.name }}
              </h3>
            </a>
          </el-col>
        </el-row>
      </el-card>

      <div class="nakedTitle">
        <h3>赞助商及合作机构</h3>
        <!--        <a class="more">MORE⇀</a>-->
      </div>
      <el-card class="mb20">
        <el-row :gutter="20">
          <el-col :lg="4" :md="6" :sm="12" v-for="n in linkList" :key="n.noteId">
            <a :href="n.jumpUrl" target="_blank" class="mb20" style="display:block;">
              <img style="width: 100%;height: 70px;object-fit: contain;" :src="fillImgUrl_webSite(n.picUrl)"/>
            </a>
          </el-col>
        </el-row>
      </el-card>

    </div>
  </div>


</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'

const router = useRouter()
const list1 = ref([])
const list2 = ref([])
const fileList = ref([])
const linkList = ref([])
const linkList2 = ref([])
// 招商信息
const query1 = ref({
  pageSize: 6,
  pageNum: 1,
  sortId: '1020',
  code: '80000000'
})
// 品牌建设
const query2 = ref({
  pageSize: 3,
  pageNum: 1,
  sortId: '1021',
  code: '80000001'
})
const queryFile = ref({
  pageSize: 6,
  pageNum: 1,
  sortId: '1022',
  code: '80000002'
})
const queryZZ = ref({
  pageSize: 12,
  pageNum: 1,
  sortId: '1023',
  code: '80000003'
})
const queryLink2 = ref({
  pageSize: 12,
  pageNum: 1,
  sortId: '1704746153579753473',
  code: '80000004'
})
onMounted(() => {
  getNews(query1.value, query2.value, queryFile.value, queryZZ.value, queryLink2.value)
})
const getNews = (a, b, c, d, e) => {
  getNewsListById(a).then(res => {
    list1.value = res.rows
  })
  getNewsListById(b).then(res => {
    list2.value = res.rows
  })
  getNewsListById(c).then(res => {
    fileList.value = res.rows
    for(var f of fileList.value){
      f.attacthJsonObj = JSON.parse(f.attacthJson)
    }
  })
  getNewsListById(d).then(res => {
    linkList.value = res.rows
  })
  getNewsListById(e).then(res => {
    linkList2.value = res.rows
  })
}

const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
const goList = (query, name) => {
  query.sortName = name
  router.push({
    name: 'noticeList',
    query: query
  })
}
const goFileList = () => {
  router.push({
    name: 'fileList',
    query: queryFile.value
  })
}
</script>

<style scoped>

</style>