<template>
  <div class="main">
    <div class="main-body">
      <div class="xl_main mt15 mar-B20" v-loading="loading">
        <div class="n-tit">
          <h3>{{info.title}}</h3>

          <h4>
            {{info.createAt|toDatetime}} &nbsp;&nbsp;
            <span class="ml10"><i class="el-icon-view"></i> {{info.viewCount}}</span>
            <span class="ml10"><i class="el-icon-download"></i> {{info.downloadCount}}</span>
          </h4>
        </div>


       <el-form :inline="true" class="p20" label-width="80px" label-position="left">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属部门">
                  <span class="pl10 nowrap span-tit">{{info.department }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="文件分类">
                  <span class="pl10 nowrap span-tit">{{categorys[info.category] }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="发布人">
                  <span class="pl10 nowrap span-tit">{{info.username||'超管' }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="发布时间">
                  <span class="pl10 nowrap span-tit">{{info.publishTime|toDatetime }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="是否公开">
                  <span class="pl10 nowrap span-tit">{{info.isOpen?'是':'否' }}</span>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="我的权限">
                  <span class="pl10 nowrap span-tit">{{owners[isLeader]}}</span>
              </el-form-item>
            </el-col>

          </el-row>

       </el-form>

       <div class="mt10">
         <h2> 文章简介 </h2>
         <div class="content mt10 p20">
           <div>{{info.brief}} </div>
         </div>
       </div>

        <div class="p20">
          <el-button v-if="!isLike" icon="el-icon-star-off" @click="likeArtical"> 收藏</el-button>
          <el-button v-else icon="el-icon-star-on" type="info" @click="unLikeArtical">取消</el-button>



          <el-button  icon="el-icon-download" v-if="isLeader>0 || info.isOpen" @click="download"> 下载</el-button>
          <el-button  icon="el-icon-download" v-else @click="applyDownload">申请下载</el-button>
        </div>


      </div>
    </div>


    <div style="height: 60px;"></div>
  </div>
</template>

<script>
  import IHeader from "./components/IHeader";
  import IFooter from "./components/IFooter";
  import {toDatetime } from '@/utils/date.js'
  import data from '../data/data.js'
  import { getArticalInfo, likeArtical, unLikeArtical} from '@/api/article.js'
  import {downloadFile, downloadArtical, applyArtical} from '@/api/article.js'

  import {download} from '@/utils/download.js'
  import { mapGetters } from "vuex";

  export default {
    name: 'application',
    components: {
      IHeader,
      IFooter
    },
    filters: {
      toDatetime
    },
    data() {
      return {
        loading:false,
        articalId: 0,
        isLeader:0,
        recommend: [],
        apply_list: [],
        isLike: 0,
        owners: data.owners,
        categorys:data.categorys,
        info: {}
      }
    },
    computed: {
    	...mapGetters("user", ["userDepartments"])
    },
    created() {
      this.articalId = +this.$route.query.articalId || 0;
      if (this.articalId) {
        this.getArticalInfo()
      }
    },
    methods: {
      download(){
        let articalId = this.articalId
        if( this.isLeader >0 ){
          download( `/api/artical/downloadFile/${articalId}`)
        }else{
          this.$message.successMsg("无权限下载", 1)
        }
      },
      applyDownload(){
        let param ={articalId: this.articalId}
        this.loading = true;
        applyArtical( param ).then( res=>{
          if( res.code == 200){
            this.$message.successMsg("申请成功", 1)
          }
          this.loading = false;
        }).catch( ()=>{
          this.loading = false
        })
      },
      likeArtical(){
        let param ={articalId: this.articalId}
        this.loading = true;
        likeArtical( param ).then( res=>{
          if( res.code == 200){
            this.$message.successMsg("收藏成功", 1)
            this.isLike = 1
          }
          this.loading = false;
        }).catch( ()=>{
          this.loading = false
        })
      },
      unLikeArtical(){
        let param ={articalId: this.articalId}
        this.loading = true;
        unLikeArtical( param ).then( res=>{
          console.log("res", res)
          if( res.code == 200){
            this.$message.successMsg("取消成功", 1)
            this.isLike = 0
          }
          this.loading = false;
        }).catch( ()=>{
          this.loading = false
        })
      },
      getArticalInfo() {
        let param = {
          articalId: this.articalId
        }
        getArticalInfo(param).then(res => {
          if (res.code == 200) {
            this.info = res.data.info;
            for( let i in this.userDepartments){
              if( this.userDepartments[i].departmentId == this.info.departmentId){
                this.isLeader = this.userDepartments[i].isLeader;
              }
            }
            this.recommend = res.data.recommend || [];
            this.apply_list = res.data.apply_list || [];
            this.isLike = res.data.isLike || 0;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .xl_main {
    width: 960px;
    padding: 0px 20px;
  }



  .mar-B20 {
    margin-bottom: 20px;
  }

  .mar-T15 {
    margin-top: 15px;
  }

  .n-tit {
    text-align: center;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
  }

  .n-tit h3 {
    font-size: 22px;
    font-weight: bold;
    padding-top: 25px;
    text-align: center;
    line-height: 36px;
  }

  .box1 {
    margin-top: 20px;
    padding: 0px 36px 18px 36px;
    font-size: 16px;
    color: #000000;
  }

  p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  h5 {
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .xl_btn {
    display: inline-block;
    width: 60px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    margin: 0 10px;
  }
</style>
