<template>
  <el-card class="mt20">
    <div slot="header" class="clearfix">
      <span>{{department.department}} {{department.department?'-':''}} {{categorys[type]}}</span>
      <el-button class="more-btn" type="text" @click="$emit('return')" v-if="more"><<返回</el-button>
      <el-button class="more-btn" type="text" @click="handleOpenMore(type)" v-else>更多>></el-button>
    </div>
    <div v-for="(o,index) in list" :key="o.id" class="text item">
      <div style="display: inline-block;width: 100%;"  >

        <!-- <el-link target="_blank" :download="o.filename"  :href="'/'+o.filename" :underline="false" v-if="o.isOpen">
          <span class="oneline" >
            【{{o.isOpen?'公':'私'}}】 {{ (index+1)}} 、 {{o.title|filterTitle}}
          </span>
        </el-link> -->


        <span @click="downloadFile(o)"  style="color: #606266;" >
           <span class="oneline" >
               【{{o.isOpen?'公':'私'}}】 {{o.title|filterTitle}}
           </span>
        </span>


        <span class="fr" style="color: #b4b4b4;">{{o.createAt }}</span>
        <span style="clear: both;"></span>
      </div>
    </div>
  </el-card>
</template>

<script>
  import data  from '@/pages/data/data.js'
  export default {
    props: {
      department: {
        type: Object,
        default: ()=>{department:''}
      },
      type:{
        type: String,
        default:"laws"
      },
      more:{
        type: Boolean,
        default:false
      },
      list:{
        type: Array,
        default:()=>[]
      }
    },
    data() {
      return {
        categorys:data.categorys
      };
    },
    filters:{
      filterTitle(val){
        if( val.length > 35) {
          return val.substr(0,32)+"..."
        }else{
          return val
        }
      }
    },
    methods: {
      handleOpenMore( type ){
        this.$emit("more", type)
      },
      downloadFile( item){
        let query= {articalId: item.articalId }
        this.$router.push( {path: '/file-info', query})
        // this.$emit("download", type)
      }
    }
  }

</script>

<style>
  .el-card__body .text{
    margin: 5px 0;
  }
  .el-card{
    color: #1890ff;
  }
  .el-card__header{
    padding: 15px 20px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .more-btn{
    float: right;
    padding: 5px 0;
    color: #999;
    font-size: 16px;
  }

  .oneline {
    cursor:hand;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .oneline:hover{
    cursor: pointer;
    font-weight: 900;
    color: #1890FF;
  }
</style>
