<template>
  <div>
    <div class="article-list" v-for="(item, idx) in items" :key="idx" @click="jumpDetail(item)">
      <div class="article-info">
        <div class="article-info-title one-line-ellipsis">
          <span  class="titleContent"  >
            {{ item.title }}
          </span>
        </div>
        <div class="art-head two-line-ellipsis">
          <div class="article-info-summary">
            {{item.summary}}
          </div>
          <div class="art-img" v-if="item.coverurl">
            <img :src="fileBaseUrl + item.coverurl" alt="">
          </div>
        </div>
      </div>
       <div class="article-info-date">
            <authorInfo :aid="item.sysCreateAid" :avatar="item.avatar" :name="item.sysCreateBy" :sex="item.sex" :info="item.orgInfo"></authorInfo>
            <interactBar :data="item" :type="2" :shares="false" :views="false"></interactBar>
      </div>
    </div>
    <el-dialog title="编辑文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
      <editItems v-if="diagSync" :jumpLimit="false" :editForm="editForm" @success="saveSuccess"></editItems>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import interactBar from '@/components/Portal/interactBar.vue';
import apiArticle from '@/api/modules/article.js';
import editItems from '@/components/Article/editItems.vue';
import authorInfo from '@/components/Portal/authorInfo.vue';
export default {
  components: {
    interactBar,editItems,authorInfo
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  name: 'articleItems',
  props: {
    items: {
      //name,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
      shareShow: false,
      diagSync:false,
      editForm:{
        id:''
      }
    };
  },

  filters:{
    sysCreateTimeFilter(item){
      return item.split(' ')[0]
    }
  },
  mounted() {
    console.log(this.items)
  },
  methods: {
    classFilter(status){
      switch(status){
        case 1:{
          return {text:'【草稿】',className:'article-status1'}
        };
        // #999999
        case 2:{
          return {text:'【待审核】',className:'article-status2'}
          // #FFB30F
        };
        case 3:{
          return {text:'【未通过】',className:'article-status3'}
          // #E62E38
        };
        case 9:{
          return {text:'【已发布】',className:'article-status9'}

// #2AB28B
        };
         case 8:{
          return {text:'【已下架】',className:'article-status8'}

// #2AB28B
        };

      }
    },
    jumpDetail(row){
      if(row.status == 9){
         this.$router.push({path:'/article/detail',query:{id:row.id}})
      //  window.open(this.webBaseUrl + '/article/detail?id='+row.id)
      } else {
        this.editForm=row
        this.diagSync=true
         // window.open(this.webBaseUrl + '/article/add?id='+row.id)
      }
    },
    editItem(id) {
      // window.open('/article/add?id='+id)
      // this.$router.push({
      //   path:'/article/add',
      //   query:{
      //     id
      //   }
      // })
      this.editForm.id = id;
      this.diagSync = true;
    },
    saveSuccess(){
       this.$emit('update',true);
      this.diagSync = false;
    },
    delItem(item) {

      this.$confirm('您确定要删除所选文章吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          apiArticle.del(item.id).then(res => {
              if (res.status == 200) {
                this.$emit('update',true)
                this.$message.success('删除成功');
                //发送删除事件
                let event = {
                  key: "DeleteArticle",//后台的事件key  发布文章且审核通过
                  title: "删除文章",//事件的标题
                  parameters:"",//用户自定义参数 name:value,name:value
                  content: "删除文章",//事件的内容
                  source:'page',
                  objId: item.id,//关联的id
                  objType: "2",//关联的类型
                  objInfo: item.title,
                  aid: this.userInfo.aid, //当前登录人的id
                  aname: this.userInfo.name,//当前人的姓名
                  status: 1 //状态，直接写1
                }
                this.$store.dispatch("userTrigger", event);


              }else{
                this.$message.error('删除失败:'+res.message);
              }
            }).catch(err => {
              this.$message.error('删除失败');
            });
        }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.two-line-ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}
.one-line-ellipsis {
  display: -webkit-box;
   white-space: pre-wrap;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}
 .article-info-date {
  display: flex;
  justify-content: space-between;
  ::v-deep .interact-bar-btn{
    min-width: 70px !important;
    text-align: right;
  }
      .del{
         color: #8590A6;
         font-size: 14px;
      }
      .edit{
         color: #8590A6;
      }
      button{
        color: #8590A6;
        font-size: 14px;
      }
    }
.one-line-ellipsis {
    width: 100%;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
   overflow: hidden;

}
.two-line-ellipsis{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  box-sizing: border-box;
}
.article-status1 {
  padding: 3px;
  color: #666;
}
.article-status8{
  padding: 3px;
  color: #ccc;

}
.article-status2 {
  padding: 3px;
  color: #FFB30F;
}
.article-status3 {
  padding: 3px;
  // border: 1px dotted #E62E38;
  color: #E62E38;
}
.article-status5 {
  padding: 3px;
  // border: 1px dotted #2AB28B;
  color: #2AB28B;
}
.article-status9 {
  padding: 3px;
  // border: 1px dotted #588AFC;
  color: #588AFC;
}
.article-list {
   position: relative;
  margin: 0px 0;
 border-bottom: 1px solid #E8E8E8;
  padding: 32px 0;
  cursor: pointer;

}

.article-info {
  .article-info-title {
    color: #333;
    width: 100%;
    font-size: 18px;
    margin-top: 7px;
    .titleContent{
      cursor: pointer;
      font-size: 16px;
      color: #333333;
      font-weight: 600;
    }

  }
  .art-head{
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    .article-info-summary {
      flex: 1;
      color: #333333;
      margin-left: 5px;
      margin-top: 26px;
      font-size: 14px;
    }
    .art-img{
      width: 192px;
      height: 109px;
      margin-left: auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .article-info-tools {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .article-info-tools-auth {
      display: flex;
      align-items: center;

      font-size: 13px;
      color: #999999;
      span{
        font-size: 13px;
        color: #7b7b7b;
        margin-left:5px;
      }
      .article-time{
        margin-left: -5px;
		    border:0px;
        span{
          font-size: 14px;
        }
      }
    }
  }
}
</style>
