<template>
  <el-row v-loading="loading" :gutter="20">
    <el-col v-for="item in list" :key="item.id" :span="8" class="card-col">
      <el-card :body-style="{ padding: '15px 0 0 0' }" shadow="hover">
        <div class="card-conainer">
          <div class="card-head">
            <el-link :underline="false" @click="$emit('del', item)">删除</el-link>
          </div>
          <div class="card-center">
            <image-preview :src="item.picture" :width="60" :height="60"/>
            <!-- <el-avatar
              class="icon"
              :src="'/dev-api/'+item.picture"
              fit="cover"
              :size="100"
            /> -->
            <div class="content ml20">
              <div class="card-title">{{item.appName}}</div>
              <div class="time">{{item.createTime}}</div>
            </div>
          </div>
          <p class="desc">{{item.appDesc}}</p>
        </div>
        <div class="card-foot">
          <el-button class="card-btn" @click="$emit('update', item)">编辑</el-button>
          <el-divider class="card-divider" direction="vertical"></el-divider>
          <el-button class="card-btn" @click="$emit('enter', item)">进入</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defImg: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.card-col {
  margin-bottom: 20px;
}
.card-conainer {
  padding: 0 20px;
  .card-head {
    display: flex;
    justify-content: flex-end;
  }
  .card-center {
    display: flex;
    .el-image {
      width: 60px;
      border-radius: 50%;
    }
    .content {
      flex: 1;
      display: flex;
      flex-flow: column;
      justify-content: space-evenly;
    }
    .card-title {
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #707070;
    }
    .time {
      font-size: 14px;
      color: #666;
    }
  }
  .desc {
    font-size: 14px;
    color: #999;
    height: 38px;
    display: -webkit-box; /* 兼容webkit内核浏览器 */
    -webkit-line-clamp: 2; /* 最多显示两行 */
    -webkit-box-orient: vertical; /* 设置或限制在一个块状元素显示的内容的排列方式 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
}
.card-foot {
  display: flex;
  border-top: 1px solid #DCDFE6;
  .card-btn {
    flex: 1;
    border: none;
    border-radius: 0;
    height: 50px;
  }
  .card-divider {
    height: 50px;
    margin: 0;
  }
}
</style>