<template>
  <div class="main">
    <div style="padding: 16px">
      <div class="head">
        <el-checkbox
          v-model="checked"
          @change="handleCheckChange"
        ></el-checkbox>
        <el-tag size="mini" type="primary" v-if="data.isPublish === 1"
          >已发布</el-tag
        >
        <el-tag size="mini" type="info" v-else>未发布</el-tag>
      </div>
      <div class="content" @click="cardClick(data)">
        <img
          v-if="data.icon && data.icon.indexOf('data:image') !== -1"
          :src="data.icon"
          alt=""
          srcset=""
          style="width: 40px; height: 40px"
        />

        <div
          class="app-icon__wrap"
          v-else
          :style="{background: data.iconColor}"
        >
          <i :class="data.icon || 'el-icon-s-home'" class="app-icon"></i>
        </div>
        <div class="title" :title="data.name">{{ data.name }}</div>
      </div>
    </div>
    <div class="toolbar">
      <span @click="handleCommand('modify')">修改</span>
      <span @click="handleCommand('copy')">复制</span>

      <span v-if="data.isPublish === 0" @click="handleCommand('publish')"
        >发布</span
      >
      <span v-if="data.isPublish === 1" @click="handleCommand('view')"
        >查看发布</span
      >
      <div>
        <el-dropdown @command="handleCommand"
          ><span class="el-dropdown-link">
            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!--            <el-dropdown-item command="modify">修改应用信息</el-dropdown-item>-->
            <el-dropdown-item command="auth">授权</el-dropdown-item>
            <el-dropdown-item command="copy">复制</el-dropdown-item>
            <el-dropdown-item command="tag">标签</el-dropdown-item>
            <el-dropdown-item command="export">导出</el-dropdown-item>
            <el-dropdown-item command="remove">删除</el-dropdown-item>
            <el-dropdown-item command="update" v-if="data.type !== 1"
              >更新</el-dropdown-item
            >
          </el-dropdown-menu></el-dropdown
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppItem',
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      checked: false,
    }
  },
  methods: {
    handleCommand(command) {
      this.$emit('command', {command, data: this.data})
    },
    handleCheckChange(checked) {
      this.$emit('check-change', checked)
    },
    cardClick(data) {
      this.$emit('card-click', data)
    },
    refresh() {
      this.checked = false
    },
    handleChecked(checked) {
      this.checked = checked
      this.handleCheckChange(checked)
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  width: 255px;
  height: 180px;
  position: relative;
  .head {
    display: flex;
    justify-content: space-between;
  }
  .content {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    .app-icon__wrap {
      width: 40px;
      height: 40px;
      position: relative;
      border-radius: 5px;

      .app-icon {
        font-size: 24px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .title {
      margin-top: 5px;
      overflow: hidden;
      white-space: nowrap;
      width: 200px;
      text-overflow: ellipsis;
      text-align: center;
    }
  }

  .toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: #e8eaef 1px solid;
    width: 230px;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    font-size: 12px;

    span {
      cursor: pointer;
    }
  }

  ::v-deep {
    .el-dropdown {
      font-size: 12px;
    }
  }
}
</style>
