<template>
  <el-button @click="handleClick" :disabled="isDisabled" :type="buttonType">
 <!-- 复制dialog -->
 <i class="fa fa-paper-plane" ></i>发布
  <el-dialog title="选择栏目" :visible.sync="show" :append-to-body="true" class="move-catalog-dialog" v-if="!catalogId||catalogId==rootCatalogId">
    <div class="dialog-body" v-loading="dataLoading">
      <dim-select :dim-info="{'enable':true,'contentType':contentType}" @callback="callback"></dim-select>
      <el-radio-group v-model="targetCatalog" class="dialog-body">
        <el-tree :render-content="renderContent" :show-checkbox="false" :data="selectCatalogTrees" :props="catalogProps" default-expand-all
          node-key="ID" highlight-current :expand-on-click-node="false" @node-click="copyHandleNodeClick" ref="moveCatalogTrees"
          class="catalog-tree">
        </el-tree>
      </el-radio-group>
    </div>
    <div slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="handlerLoading">确 定</el-button>
    </div>
  </el-dialog>
  </el-button>
</template>

<script>
import util from '@src/common/util.js'
import Privilege from '@src/common/privilege.js'
import DimSelect from '@src/components/DimSelect.vue'
export default {
  components: {
    'dim-select': DimSelect
  },
  props: {
    contentId: {
      type: [String, Number]
    },
    catalogId: {
      type: [String, Number],
      default: ''
    },
    rootCatalogId: {
      type: [String, Number],
      default: ''
    },
    buttonType: {
      type: String,
      default: 'text'
    },
    contentType: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isDisabled() {
      if (this.disabled) {
        return this.disabled
      }
      if (this.catalogId === this.rootCatalogId) {
        return false
      } else {
        return !Privilege.hasPriv('com.zving.cms.Catalog.Content.Publish.' + this.catalogId)
      }
    }
  },
  data() {
    return {
      selectCatalogTrees: [],
      show: false,
      handlerLoading: false,
      dataLoading: true,
      targetCatalog: '',
      catalogProps: { children: 'children', label: 'name' }
    }
  },
  created() {
  },
  methods: {
    callback(val) {
      this.selectCatalogTrees = val
    },
    renderContent: function (createElement, { node, data }) {
      // if (parseInt(data.ID) === 0 || parseInt(data.branchInnerCode) === 0 || data.ID === 'site') {
      //      return createElement('span' [
      //        createElement('i' { attrs: { class: 'fa fa-desktop' } }),
      //        createElement('span' node.label),
      //     ])
      //   } else {
      return createElement('span', [
        this.allowSelected(data) && createElement('el-radio', {props: { label: data.ID }}, ''),
        createElement('i', { attrs: { class: 'fa fa-folder' } }),
        this.catalogIds !== data.ID ? createElement('span', node.label) : createElement('span', {attrs: {style: 'color:#b9b9ce'}}, node.label)
      ])
      // }
    },
    allowSelected(data) {
      return this.catalogId !== data.ID && (data.contentType === '' || this.contentType === data.contentType)
    },
    async getCatalogs() {
      this.dataLoading = true
      let resp = await axios.get('/ui/catalog/sitecatalog', {
        pageIndex: 0,
        pageSize: 10000
      })
      if (resp.data.status === 1) {
        this.selectCatalogTrees = resp.data.data
        this.dataLoading = false
      }
    },
    copyHandleNodeClick(val) {
      this.targetCatalog = val ? val.ID : ''
    },
    getSelectCatalogIds() {
      return this.targetCatalog
    },
    async confirm() {
      if (!this.targetCatalog) {
        this.$alert('请先选择一条记录')
        return
      }
      let id = this.contentId
      let catalogId = this.targetCatalog
      let resp = await axios.put(`/ui/draft/person/${id}/pub/${catalogId}`)
      if (resp.data.status === 1) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.handlerLoading = false
        this.show = false
        this.$emit('refresh-content', this.contentId)
      } else {
        this.$alert(resp.data.message || '操作失败')
      }
    },
    async publish(id, type) {
      let resp = await axios.put(`/ui/contentcore/contentpublish/${id}/${type}`, {catalogID: this.catalogId})
      util.showResponseMessage(resp.data)
      resp.data.status === 1 && this.$emit('refresh-content', this.contentId)
    },
    handleClick () {
      if (!this.catalogId || this.catalogId === this.rootCatalogId) {
        this.show = true
        this.getCatalogs()
      } else {
        this.publish(this.contentId, 'pub')
      }
    }
  }
}
</script>
<style>
.move-catalog-dialog .el-dialog {
  width: 420px;
}
@media (max-width: 480px) {
  .move-catalog-dialog .el-dialog {
    width: 96%;
  }
}
</style>
<style scoped>
.catalog-tree {
  height: 80%;
  width: 100%;
  overflow: auto;
}

.dialog-body {
  height: 400px;
  width: 100%;
  border: 1px solid #eee;
}

.el-radio-group{
  font-size:12px;
}
</style>
