<template>
  <div class="toolbar-buttons-ct">

    <el-popover ref="popoverNew" placement="bottom-start" width="600" v-model="popVisible">
      <div class="radio-group-item">
        <label class="el-form-item__label">内容类型</label>
        <el-radio-group v-model="typeRadio" size="medium">
          <el-radio-button :label="key" :key="key" v-for="(value,key) in contentTypes">{{value}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="radio-group-item" v-show="typeRadio==='Article'">
        <label class="el-form-item__label">文档格式</label>
        <el-radio-group v-model="formatRadio" size="medium">
          <el-radio-button :label="item.value" :key="item.value" v-for="item in articleFormats">{{item.label}}</el-radio-button>
        </el-radio-group>
      </div>
      <div style="text-align: right; margin: 10px">
        <!-- <el-button v-if="catalogId==0" type="primary" size="mini" @click="addContent(typeRadio)">确定</el-button> -->
        <el-button type="primary" size="medium" @click="addContent(typeRadio)" :priv="'com.zving.cms.Catalog.Content.Add.'+catalogId">确定</el-button>
      </div>
      <el-button slot="reference">
        <el-button class="add-content-btn" @click.stop="addContent" :priv="'com.zving.cms.Catalog.Content.Add.'+catalogId">
          <i class="fa fa-plus"></i>新建
        </el-button>
        <i v-if="Object.keys(contentTypes).length > 1 && catalogId > 0" class="fa fa-caret-down"></i>
      </el-button>
    </el-popover>

  </div>
</template>
<script>
export default {
  props: {
    selectedRows: {
      type: Array,
      default: function() {
        return []
      }
    },
    catalogId: {
      type: [Number, String],
      default: 0
    },
    detailContent: {
      type: Object
    },
    isShowBottomBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      articleFormats: [{ value: 'Html', label: '普通图文混合' }, { value: 'Markdown', label: 'Markdown' }],
      contentTypes: {},
      typeRadio: 'Article',
      formatRadio: 'Html',
      popVisible: false
    }
  },
  watch: {
    async catalogId(val) {
      val && this.addContentTypes()
    }
  },
  computed: {
    isDetailContent: {
      set(val) {
        this.$emit('update:detailContent', val)
      },
      get() {
        return this.detailContent
      }
    }
  },
  created() {
    this.addContentTypes()
  },
  methods: {
    async addContentTypes() {
      let resp = await axios.get(`/ui/catalogs/${this.catalogId}/contenttypes`)
      if (resp.data.status === 1) {
        this.contentTypes = resp.data.data
        if (Object.keys(resp.data.data).length > 0){
          this.typeRadio = Object.keys(resp.data.data)[0]
        }
      }
    },
    addContent() {
      this.popVisible = false
      if (this.typeRadio === 'Article' && this.formatRadio === 'Markdown') {
        let path = `/contentEditor/new?type=${this.typeRadio}${this.catalogId !== 0 ? `&cid=${this.catalogId}` : ''}&format=Markdown`
        window.open('contentEditor.html#' + path)
      } else if (this.typeRadio === 'Special') {
        this.$router.push({
          path: `/special/${this.catalogId}/new`
        })
      } else {
        let path = `/contentEditor/new?type=${this.typeRadio}${this.catalogId !== 0 ? `&cid=${this.catalogId}` : ''}`
        window.open('contentEditor.html#' + path)
      }
    }
  }
}
</script>
<style scoped>
.el-radio-group label {
  padding: 0;
}

.add-content-btn {
  padding-right: 0px;
}

.el-form-item__label {
  text-align: left;
  width: 90px;
  float: none;
  display: block;
  font-weight: 700;
}

.radio-group-item {
  margin: 0 10px;
}
.el-toolbar .el-button {
  /* font-size: 17px; */
}
</style>
