<template>
  <el-dropdown @command="handlePreviewOrScanCommand">
    <el-button @click="catalogPreviewClickHandler" :disabled="!catalogId">
        <i class="fa fa-search"></i>预览<i class="fa fa-caret-down" aria-hidden="true"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" :style="{'font-size':'14px'}">
        <el-dropdown-item command="preview"><i class="fa fa-search"></i>预览</el-dropdown-item>
        <el-dropdown-item command="scan"><i class="fa fa-home"></i>浏览</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  props: {
    catalogId: {
      type: [Number, String],
      default: 0,
      required: true
    },
    link: {
      type: String,
      default: '',
      required: true
    }
  },
  methods: {
    //  浏览
    catalogScanClickHandler () {
      window.open(this.link)
    },
    //  预览
    catalogPreviewClickHandler () {
      window.open(`preview.html?id=${this.catalogId}&type=catalog`)
    },
    //  预览浏览下拉列表
    handlePreviewOrScanCommand (command) {
      if (command === 'preview') {
        this.catalogPreviewClickHandler()
      }
      if (command === 'scan') {
        this.catalogScanClickHandler()
      }
    }
  }
}
</script>
<style scope>
.el-toolbar .el-button {
  /* font-size: 17px; */
}
</style>
