<template>
    <div class="clearfix">      
    <div class="published-cell">
        <div class="checkbox">
            <el-checkbox></el-checkbox>
        </div>
        <div class="activity-image-panel">
            <span class="status-text">{{status_text}}</span>
            <img :src="article.imgs"/>
        </div>
        <div class="activity-info-panel">
            <h3 class="title">
                 <a>{{article.title}}</a>
            </h3>
            <!-- <div class="statistics">
                阅读：{{article.real_read_num}} 丨 评论：{{article.comment_num}} 丨 点赞：{{article.star_num}}
            </div> -->
             <div>
               <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                 <el-button
                   size="mini"
                   type="primary"
                   icon="el-icon-edit-outline"
                   @click="$router.push('/articles/editArticle/'+article.id)">
                 </el-button>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="删除" placement="top">
                 <el-button
                   size="mini"
                   type="danger"
                   icon="el-icon-delete"
                   @click="deleteArticle()">
                 </el-button>
               </el-tooltip>
             </div>
        </div>
        <div class="activity-time-panel">
            <span class="center">酷医演示中心</span>
            <span class="time">2019-06-08</span>
        </div>
    </div>
</div>
</template>

<script>
  import { parseTime } from "@/utils"
    export default {
        name: "published_cell",
         props: {
            article: {
            type: Object,
            required: true,
        }
    },
        data(){
          return{
            show:false,
          }
        },
      computed:{
        status_text: function() {
          if (this.article.article_status== 1) {
            return "已发布"
          } else if (this.article.article_status == 2) {
            return "草稿"
          }else{
            return "未通过"
          }
        },
        start_time: function() {
          return parseTime(this.article.ctime, "{y}-{m}-{d} {h}-{i}")
        },
      },
      methods:{
         deleteArticle(){
           this.$emit("delete")
         },
      
     }
    }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
   .published-cell {
    padding: 20px 15px;
    border: none;
    border-bottom: 1px solid #e5e8ea;
    float: left;
    margin: 0;
    width: 100%;
    border-radius: 0;
    position: relative;

    .activity-image-panel {
        width: 155px;
        height: 122px;
        border: 1px #dee2e5 solid;
        display: flex;
        justify-content: center;
        position: relative;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        overflow: hidden;
        float: left;

        .status-text {
            position: absolute;
            font-size: 12px;
            color: #fff;
            top: 14px;
            left: 3px;
            -webkit-transform: rotate(316deg);
            transform: rotate(316deg);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
    .activity-image-panel::before {
        border-top: 28px solid #5bd18b;
        border-right: 28px solid transparent;
        border-bottom: 28px solid transparent;
        border-left: 28px solid #5bd18b;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        display: block;
        content: "";
    }

    .activity-info-panel {
        padding: 7px 20px;
        width: 60%;
        float: left;

        .title {
            padding-bottom: 5px;
            margin-bottom: 15px;
            a {
                color: #495060;
                font-size: 20px;
                max-width: 100%;
                font-weight: 500;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
            }
        }

        .statistics {
            color: #a8b3ba;
            font-size: 15px;
            justify-content: space-between;
            line-height: 30px;
        }
    }

    .activity-time-panel {
        float: right;
        padding: 7px 0;

        .time {
            font-size: 15px;
            color: #a8b3ba;
        }
    }
    .center{
        font-size:15px;
        color: #a8b3ba;
    }
    .checkbox{
        float:left;
        position: relative;
        left:-10px;
    }
}
</style>
