<template>
  <div>
    <!-- 首页导航 -->
    <Navs></Navs>
    <!-- content -->
    <section class="content">
      <!-- swiper -->
      <div class="content_cont">
        <!-- 全局搜索 -->
        <search></search>
        <div class="header">
          <div class="left">资讯详情</div>
          <div class="right">
            <img :src="imgurl.pos" alt />
            <span>当前位置：</span>
            <span @click="$router.push('/')">首页</span>
            >
            <span @click="$router.go(0)">资讯详情</span>
          </div>
        </div>
        <!-- 主内容 -->
        <div class="mainCont">
          <div class="mainCont_left">
            <!--  资讯列表详情-->
            <div v-if="articleDetails">
              <div class="title">{{articleDetails.title}}</div>
              <div>来源：{{articleDetails.source}} | 发布时间：{{articleDetails.create_time}}</div>
              <span v-html="articleDetails.content"></span>
              <br />
              <div class="uploadFJ" v-if="articleDetails.fujian">
                附件下载：
                <a
                  :href="articleDetails.fujian"
                  :download="ComputedFujian(articleDetails.fujian)"
                >{{ComputedFujian(articleDetails.fujian)}}</a>
              </div>
            </div>
          </div>
          <div class="mainCont_right">
            <div class="right2">
              <div class="title">24小时热文</div>
              <div class="content">
                <div
                  v-for="(item,index) in twentyFourtimeData"
                  :key="index"
                  @click="$router.push({path:'/'}),$router.push({path:'/listDetails',query:{id:item.id}}),$router.go(0)"
                >
                  <img :src="item.url" alt />
                  <div>
                    <div class="top" :title="item.title">{{item.title}}</div>
                    <div class="bottom" :title="item.content">{{item.content}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>

<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'index',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        list1: require('../../../static/dataList/list1.png')
      },
      // 咨询列表数据
      dataLists: [
        {
          title: '五大行入局区块链，区块链革命正在到来',
          content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
          url: require('../../../static/dataList/list1.png')
        },
        {
          title: '五大行入局区块链，区块链革命正在到来',
          content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
          url: require('../../../static/dataList/list1.png')
        },
        {
          title: '五大行入局区块链，区块链革命正在到来',
          content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
          url: require('../../../static/dataList/list1.png')
        },
        {
          title: '五大行入局区块链，区块链革命正在到来',
          content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
          url: require('../../../static/dataList/list1.png')
        },
        {
          title: '五大行入局区块链，区块链革命正在到来',
          content: '在互联网时代，在金融技术发展日新月异的时代，在金融边缘创新不断向中心地带侵蚀并不断融入其中的新金融时代在传统金融不断信息化、网络化、数字化时代，金融已经远远突破了资金融通的传统内涵，金融技术已经将金融信息与金融科技高度融合，技术成为驱动金融发展的底层力量，成为一个大趋势。在互联网时代，驱动金融发...',
          url: require('../../../static/dataList/list1.png')
        }
      ],
      // 分页配置
      pageConfiguration: {
        // 每页显示条数
        oneSize: 5,
        // 数据总条数
        countSize: 36,
        // 总页数
        countPage: 1
      },
      // 24小时热闻数据
      twentyFourtimeData: [
        {
          url: require('../../../static/index/timeLZ.png'),
          title: '这是标题',
          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        },
        {
          url: require('../../../static/index/timeLZ.png'),
          title: '这是标题',
          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        },
        {
          url: require('../../../static/index/timeLZ.png'),
          title: '这是标题',
          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        },
        {
          url: require('../../../static/index/timeLZ.png'),
          title: '这是标题',
          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        },
        {
          url: require('../../../static/index/timeLZ.png'),
          title: '这是标题',
          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
        }
      ],
      // 资讯数据
      articleDetails: null
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 查看详情
    watchDetails () {
      this.$router.push({
        path: '/listDetails'
      })
    },
    // 24小时热闻
    hotArticle () {
      this.$axios({
        method: 'GET',
        url: 'index/index/hot-article',
        params: {
        }
      }).then(res => {
        // console.log(res, '24小时热闻')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let objuu = {
              url: item.thumb,
              title: item.title,
              content: item.desc,
              id: item.id
            }
            arrts.push(objuu)
          })
          this.twentyFourtimeData = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 咨询详情
    articleDetail () {
      this.$axios({
        method: 'GET',
        url: 'article/article/article-detail',
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        console.log(res, '资讯详情')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.articleDetails = res.data.data[0]
        }
      }).catch((fail) => {
        console.log(fail)
      })
    }
  },
  computed: {
    // 计算字符串
    computedStr () {
      return (str) => {
        let Strs = ''
        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
        return Strs
      }
    },
    // 计算附件
    ComputedFujian () {
      return (url) => {
        let splitStrBefore = url.split('/')
        return splitStrBefore[splitStrBefore.length - 1]
      }
    }
  },
  mounted () {
    // 咨询详情
    this.articleDetail()
    // 24小时热闻
    this.hotArticle()
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .content_cont {
    width: 84.25rem;
    & > .header {
      width: 84.25rem;
      height: 4.25rem;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      & > .left {
        // margin-left: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.125rem;
        color: #000000;
      }
      & > .right {
        // margin-right: 1.5rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #8fa3ae;
        & > img {
          width: 1rem;
          height: 1.25rem;
          margin-right: 0.45rem;
        }
        & > span:nth-child(n + 3):hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
    // border: 1px solid red;
    & > .swipersty {
      width: 100%;
      height: 33.25rem;
    }
    & > .mainCont {
      // margin-top: 3.125rem;
      margin-bottom: 3.125rem;
      width: 100%;
      // border: 0.0625rem solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      & > .mainCont_left {
        // border: 0.0625rem solid red;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        background-color: #fff;
        width: 55.625rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        & > div {
          margin: 3.75rem;
          width: 51.75rem;
          // height: 23.75rem;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          font-size: 1.125rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: 2rem;
          letter-spacing: 0rem;
          color: #666666;
          & > .title {
            font-size: 1.25rem;
            font-weight: bold;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0rem;
            color: #333333;
          }
          & > .uploadFJ {
            width: 96%;
            height: 5rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            & > a {
              color: #52b6e3;
              cursor: pointer;
            }
          }
          & > div {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
          }
        }
      }
      & > .mainCont_right {
        width: 27.375rem;
        & > .right2 {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
          & > .title {
            width: 24.875rem;
            height: 3.75rem;
            font-size: 1.5rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0.3125rem;
            color: #000000;
            border-bottom: 0.0625rem solid #dbdbdb;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          }
          & > .content {
            width: 24.875rem;
            & > div {
              width: 100%;
              height: 7.625rem;
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              align-items: center;
              & > img {
                width: 7.25rem;
                height: 5.125rem;
              }
              & > div {
                width: 16rem;
                height: 5.125rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                & > .top {
                  font-size: 1.125rem;
                  font-weight: normal;
                  font-stretch: normal;
                  // line-height: 23px;
                  letter-spacing: 0rem;
                  color: #333333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1; /* 省略号在第几行 */
                  -webkit-box-orient: vertical;
                }
                & > .bottom {
                  width: 16rem;
                  font-size: 1rem;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 1.5rem;
                  letter-spacing: 0rem;
                  color: #666666;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2; /* 省略号在第几行 */
                  -webkit-box-orient: vertical;
                }
              }
            }
            & > div:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
