<template>
  <el-dropdown :disabled="!contentId" @command="viewContent" class='btn-txt-link'>
    <el-button disbaled @click="browse(btn.url)" type="button" :disabled="!contentId">
      <span>
        {{btn.name}}
        <i class="fa fa-caret-down"></i>
      </span>
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="preview" :disabled="!contentId">
        <i class="fa fa-eye"></i>预览</el-dropdown-item>
      <el-dropdown-item command="browse" :disabled="!viewLink">
        <i class="fa fa-bolt fa-fw"></i>浏览</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  props: {
    contentId: {
      type: [String, Number]
    },
    status: {
      type: [String, Number]
    },
    link: {
      type: String
    }
  },
  data() {
    return {
      previewLink: '',
      viewLink: '',
      btn: {
        class: '',
        name: '预览',
        type: '',
        url: this.previewLink
      }
    }
  },
  watch: {
    contentId() {
      this.init()
    },
    status(){
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    browse(url) {
      window.open(url)
    },
    async init() {
      if (!this.link) {
        if (this.contentId) {
          let resp = await axios.get(`/ui/contentcore/contentpublish/${this.contentId}`)
          this.viewLink = resp.data || ''
        }
      }
      if (this.status !== 30) {
        this.btn.type = 'preiview'
      } else {
        this.btn.type = 'browse'
      }
      this.previewLink = `preview.html?id=${this.contentId}&type=content`
      this.btn.url = this.btn.type === 'preiview' ? this.previewLink : this.viewLink
      this.btn.name = this.btn.type === 'preiview' ? '预览' : '浏览'
    },
    viewContent(type) {
      if (this.status !== 30) {
        if (type !== 'preview') {
          type = 'preview'
        }
      }
      let currentLink = type === 'preview' ? this.previewLink : this.viewLink
      this.btn = {
        class: type === 'preview' ? 'fa fa-eye' : 'fa fa-bolt fa-fw',
        name: type === 'preview' ? '预览' : '浏览',
        type: type,
        url: currentLink
      }
      window.open(currentLink)
    }
  }
}
</script>
<style scoped>
  .btn-txt-link a {
    color: inherit
  }
  .el-toolbar .el-button {
    /* font-size: 17px; */
  }
</style>
