<template>
 <!-- 复制dialog -->
  <el-dialog title="选择栏目" :visible.sync="isVisbile" class="move-catalog-dialog">
    <div class="dialog-body">
      <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"
          v-loading="loadCatalogList" class="catalog-tree">
        </el-tree>
      </el-radio-group>
    </div>
    <div slot="footer">
      <el-button @click="isVisbile = false">取 消</el-button>
      <el-button type="primary" @click="confirmCatalogClick" :loading="handlerLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['visible', 'contentId', 'currentCatalogId'],
  data() {
    return {
      selectCatalogTrees: [],
      handlerLoading: false,
      loadCatalogList: true,
      targetCatalog: '',
      catalogProps: { children: 'children', label: 'name' }
    }
  },
  computed: {
    isVisbile: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getCatalogs()
    this.loadCatalogList = false
  },
  methods: {
    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.currentCatalogId !== data.ID && createElement('el-radio', {props: { label: data.ID }}, ''),
          createElement('i', { attrs: { class: 'fa fa-folder' } }), //  createElement('span' node.label)
          this.currentCatalogId !== data.ID ? createElement('span', node.label) : createElement('span', {attrs: {style: 'color:#b9b9ce'}}, node.label)
        ])
      }
    },
    async getCatalogs() {
      this.moveTreeLoading = true
      let resp = await axios.get('/ui/catalog/sitecatalog', {
        pageIndex: 0,
        pageSize: 10000
      })
      if (resp.data.status === 1) {
        this.selectCatalogTrees = resp.data.data
        this.moveTreeLoading = false
      }
    },
    copyHandleNodeClick(val) {
      this.targetCatalog = val ? val.ID : ''
    },
    getSelectCatalogIds() {
      return this.targetCatalog
    },
    async confirmCatalogClick() {
      if (!this.targetCatalog) {
        this.$alert('请先选择一条记录')
        return
      }
      if (this.currentCatalogId === this.targetCatalog) {
        this.$alert('不能选择当前栏目')
        return
      }
      let resp = await axios.put(`/ui/contentcore/contents/${this.contentId }/move`, {
        catalogIds: this.targetCatalog,
        type: 'move',
        currentCatalogId: this.currentCatalogId
      })
      if (resp.data.status === 1) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.handlerLoading = false
        this.moveTreeLoading = false
        this.myMoveCatalogShow = false
        this.$emit('refreshlist', this.contentId)
      } else {
        this.$alert(resp.data.message || '操作失败')
      }
    }
  }
}
</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: 99%;
  width: 100%;
  overflow: auto;

}

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

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