<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="detail-content-box">
        <div class="content-box">
          <div class="back-btn" @click="$router.go(-1)">
            <div class="el-icon-arrow-left"></div>
            <div class="text">返回</div>
          </div>
          <div class="times">{{ formatDate(data.start_time) }}</div>
          <div class="titles">{{ data.title }}</div>
          <div class="article-content" v-html="data.content"></div>
          <recommend />
        </div>
      </div>
    </app-frame>
  </div>
</template>

<script>
import appFrame from '@/components/appFrame'
import recommend from '@/components/recommend'
export default {
  layout: 'normal',
  components: {
    appFrame,
    recommend
  },
  data() {
    return {
      frameParams: {
        slider: [
          {
            name: this.$t('menu.projectChild.bg'),
            path: '/project-intro/bg'
          },
          {
            name: this.$t('menu.newsChild.hot'),
            path: '/news/hot'
          }
        ]
      },
      data: {},
      listData: []
    }
  },
  async fetch() {
    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
      return res.data
    })
  },
  methods: {
    formatDate(value) {
      const date = new Date(value * 1000)
      console.log(date.getMonth())
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  img {
    width: 100%;
    height: auto !important;
    display: block;
  }
}
.is-pc {
  .detail-content-box {
    // background: #fff;
    // box-sizing: border-box;
    // margin-bottom: 100px;
    .content-box {
      padding: 50px 50px 94px;
    }
    .back-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      .el-icon-arrow-left {
        color: rgba(153, 153, 153, 1);
        font-size: 16px;
      }
      .text {
        font-size: 16px;
        color: #999999;
      }
    }
    .times {
      font-size: 16px;
      line-height: 100%;
      margin: 35px 0 16px;
      color: #999999;
    }
    .titles {
      font-size: 32px;
      font-weight: bold;
      color: #141414;
      // height: 62px;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 10px;
      // line-height: 100%;
    }
    .article-content {
      padding-top: 25px;
      font-size: 14px;
      line-height: 28px;
      color: #333333;
      img {
        display: block;
        width: 100%;
        margin-top: 40px;
      }
    }
    .recommend-content {
      border-top: 1px solid #e6e6e6;
      padding-top: 37px;
      .titles {
        display: flex;
        align-items: center;
        .line {
          width: 6px;
          height: 22px;
          background: #aa1941;
        }
        .text {
          font-size: 22px;
          color: #333333;
          margin-left: 10px;
        }
      }
      .list-box {
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
        li {
          width: 280px;
          img {
            width: 280px;
            height: 184px;
            display: block;
          }
          .dec {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 16px;
            line-height: 26px;
            color: #333333;
            margin-top: 10px;
          }
        }
      }
    }
    .more-btn {
      position: relative;
      z-index: 999;
      width: 164px;
      height: 40px;
      border: 1px solid #d3d3d3;
      border-radius: 8px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #999999;
      margin: 50px auto 0;
      cursor: pointer;
    }
  }
}
.is-h5 {
  .detail-content-box {
    // background: #fff;
    // box-sizing: border-box;
    // margin-bottom: 100px;
    .content-box {
      padding: 0.25rem 0.25rem 0.47rem;
    }
    .back-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      .el-icon-arrow-left {
        color: rgba(153, 153, 153, 1);
        font-size: 16px;
      }
      .text {
        font-size: 0.14rem;
        color: #999999;
      }
    }
    .times {
      font-size: 0.14rem;
      line-height: 100%;
      margin: 0.17rem 0 0.08rem;
      color: #999999;
    }
    .titles {
      font-size: 0.18rem;
      font-weight: bold;
      color: #141414;
      // height: 62px;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 0.05rem;
      // line-height: 100%;
    }
    .article-content {
      padding-top: 0.13rem;
      font-size: 0.12rem;
      line-height: 0.14rem;
      color: #333333;
      img {
        display: block;
        width: 100%;
        margin-top: 0.2rem;
      }
    }
    .recommend-content {
      border-top: 1px solid #e6e6e6;
      padding-top: 0.17rem;
      .titles {
        display: flex;
        align-items: center;
        .line {
          width: 0.03rem;
          height: 0.11rem;
          background: #aa1941;
        }
        .text {
          font-size: 0.16rem;
          color: #333333;
          margin-left: 0.05rem;
        }
      }
      .list-box {
        margin-top: 0.25rem;
        display: flex;
        justify-content: space-between;
        li {
          width: 1.4rem;
          img {
            width: 1.4rem;
            height: 0.92rem;
            display: block;
          }
          .dec {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 0.14rem;
            line-height: 0.13rem;
            color: #333333;
            margin-top: 0.05rem;
          }
        }
      }
    }
    .more-btn {
      position: relative;
      z-index: 999;
      width: 0.82rem;
      height: 0.2rem;
      border: 1px solid #d3d3d3;
      border-radius: 0.04rem;
      line-height: 0.2re;
      text-align: center;
      font-size: 0.14rem;
      color: #999999;
      margin: 0.25rem auto 0;
      cursor: pointer;
    }
  }
}
</style>
