<template>
  <div>
    <el-dialog :title="title" :visible.sync="isShow" class="copy-resources-dlg" @open="beforeDialogOpen">
      <el-tree
        :data="copyTree"
        :show-checkbox="showCheckBox"
        node-key="ID"
        highlight-current
        default-expand-all
        :check-strictly="true"
        :render-content="renderContent"
        :expand-on-click-node="false"
        ref="copyTree"
        class="padding-top-bottom mini"
        v-loading="dataLoading"
        :props="defaultProps">
      </el-tree>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    show: Boolean,
    showCheckBox: Boolean,
    selectIds: Array,
    title: String
  },
  data() {
    return {
      dataLoading: false,
      copyTree: [], //  栏目树
      defaultProps: {
        //  树节点默认配置
        children: 'children',
        label: 'name'
      },
      clientHeight: '',
      clientWidth: '',
      submitLoading: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.loadCopyContentTree()
      this.clientHeight = document.documentElement.clientHeight - 350
      this.clientWidth = document.documentElement.clientWidth - 250
    },
    // 树节点渲染
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store },
        status: true
      }
      return util.renderTreeContent(params)
    },
    async loadCopyContentTree() {
      this.dataLoading = true
      let opts = { type: 'Default,Link' }
      let res = await axios.get('/ui/catalog/bindcopycontenttree', {
        params: opts
      })
      this.dataLoading = false
      this.copyTree = res.data.data
    },
    // 提交复制栏目
    async confirm() {
      let catalogIDs = this.$refs.copyTree.getCheckedKeys()
      if (!catalogIDs || catalogIDs.length === 0) {
        this.$emit('dialog', '请选择要复制的栏目')
        return
      }
      let resourcesID = this.selectIds
      if (!resourcesID || resourcesID.length === 0) {
        this.$emit('dialog', '请选择需要复制的资源文件')
        return
      }
      this.submitLoading = true
      try {
        let res = await axios.put(
          `/ui/catalogresources/${resourcesID.join()}/copy`,
          {
            catalogIDs: catalogIDs.join()
          }
        )
        this.submitLoading = false
        if (res.data.status === 1) {
          this.$emit('update:show', false)
          this.$emit('callback')
        }
        util.showMessage(res)
      } catch (e) {
        this.submitLoading = false
        util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style>
.copy-resources-dlg .el-dialog{
  width:30%;
}
@media (max-width: 480px) {
  .copy-resources-dlg .el-dialog {
    width: 96%;
  }
}
</style>
