<template>
  <el-dialog
    title="选取文章封面"
    v-model="visible"
    :append-to-body="true"
    class="article-cover-select-dialog"
  >
    <ul v-if="images.length > 0">
      <li
        v-for="url in images"
        :key="url"
        :class="{ selected: selected === url }"
        @click="selected = url"
      >
        <img :src="url" alt="文章封面选取"/>
      </li>
      <!-- 补充差缺项，实现规整的3列 -->
      <li v-for="i in images.length % 3 === 0 ? 0 : (3 - images.length % 3)" :key="i"></li>
    </ul>
    <EmptyTip v-else description="文中暂无图片可选择"/>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" :disabled="selected == null" @click="confirm">确认选择</el-button>
    </template>
  </el-dialog>
</template>

<script>

export default {
  name: 'ArticleCoverSelect',
  data () {
    return {
      visible: false,
      images: [],
      selected: null
    }
  },
  methods: {
    /**
     * 打开窗口
     *
     * @param images 图片URL集
     */
    open (images) {
      this.images = images
      this.selected = null
      this.visible = true
    },
    // 确认
    confirm () {
      if (this.selected == null) {
        this.$tip.warning('请先选择封面！')
        return
      }
      this.visible = false
      this.$emit('confirm-select', this.selected.split('=')[1])
    }
  }
}
</script>

<style lang="scss">
.article-cover-select-dialog {
  width: 980px !important;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    li {
      flex-shrink: 0;
      width: 285px;
      height: 200px;
      background-color: var(--background-color);
      padding: 10px;
      margin-bottom: 10px;
      border: 2px solid transparent;
      transition: all ease .15s;
      border-radius: 10px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all ease .3s;
      }
      &.selected {
        border-color: var(--color-primary);
        &:hover {
          border-color: var(--color-primary);
        }
      }
      &:hover {
        border-color: #eee;
        img {
          transform: scale(1.1);
        }
      }
      &:empty {
        cursor: default;
        background-color: transparent;
        &:hover {
          border-color: transparent;
        }
      }
    }
  }
}
</style>
