<template>
 <!-- 复制dialog -->
  <el-dialog title="选择栏目" :visible.sync="isVisible" @open="dialogOpen" class="copy-catalog-dialog">
    <div class="dialog-body">
      <el-toolbar>
        <el-radio-group v-model="copyParams.type" class="toobar-style">
          <el-radio :label="1">独立复制</el-radio>
          <el-radio :label="2">映射</el-radio>
          <el-radio :label="3">内部链接</el-radio>
          <el-radio :label="4">标题新闻</el-radio>
        </el-radio-group>
      </el-toolbar>
      <el-checkbox-group v-model="targetCatalogId"  class="catalog-tree">
        <el-tree :render-content="renderContent" :show-checkbox="false" :data="catalogTrees"  :props="catalogProps" default-expand-all
        node-key="ID" highlight-current :expand-on-click-node="false" @node-click="clickCatalog" ref="moveCatalogTrees" v-loading="loading" >
        </el-tree>
       </el-checkbox-group>
    </div>
    <div slot="footer">
      <el-button @click="isVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="handlerLoading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import util from '@src/common/util.js'
export default {
  props: ['visible', 'contentId', 'currentCatalogId'],
  data() {
    return {
      catalogTrees: [],
      targetCatalogId: [],
      copyParams: {
        ID: this.contentId,
        catalogIds: '',
        currentCatalogId: this.currentCatalogId,
        type: '1'
      },
      catalogProps: { children: 'children', label: 'name' },
      handlerLoading: false,
      loading: true
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.handlerLoading = false
      this.getCatalogs()
    },
    async getCatalogs() {
      this.loading = true
      let resp = await axios.get('/ui/catalog/sitecatalog', {pageIndex: 0, pageSize: 10000})
      if (resp.data.status === 1) {
        this.catalogTrees = resp.data.data
        this.loading = false
      }
    },
    changeCatalog(val) {
      this.targetCatalogId = val
    },
    clickCatalog(e) {
      !this.targetCatalogId.includes(e.ID) && this.targetCatalogId.push(e.ID)
    },
    async confirm() {
      if (!this.copyParams.type) {
        this.$alert('请选择复制类型!')
        return
      }
      if (!this.targetCatalogId.length) {
        this.$alert('请先选择栏目！')
        return
      }
      this.handlerLoading = true
      this.copyParams.catalogIds = this.targetCatalogId.join(',')
      this.copyParams.ID = this.contentId
      let resp = await axios.put('/ui/contentcore/contents', this.copyParams)
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.handlerLoading = false
        this.isVisible = false
      }
    },
    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-checkbox', {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)
        ])
      }
    }
  }

}
</script>
<style>
.copy-catalog-dialog .el-dialog {
  width: 420px;
}
@media (max-width: 480px) {
  .copy-catalog-dialog .el-dialog {
    width: 96%;
  }
}

</style>
<style scoped>
.toobar-style {
  margin-left: 16px;
}
.catalog-tree {
  height: 86%;
  width: 100%;
  overflow: auto;
}

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