<template>
  <div>
    <el-dialog :title="delMode ? '删除栏目': isChildCatalog ? '恢复子栏目 ':' 恢复栏目'" :visible.sync="isShow" @open="dialogOpen" class="recyclebin-catalog-dialog">
      <el-tree :data="catalogTrees" ref="tree" show-checkbox check-strictly :render-content="renderContent" :props="defaultProps" default-expand-all node-key="ID" highlight-current :expand-on-click-node="false"> </el-tree>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" :loading="confirmLoading"  v-show="deleteCount !== 0" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      confirmLoading: false,
      catalogTrees: [],
      deleteCount: '',
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'ID'
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    async dialogOpen() {
      this.confirmLoading = false
      let res = await axios.get('/ui/recyclebin/treecatalogdatabind', {
        params: {
          catalogID: this.catalogID,
          treeLevel: this.treeLevel
        }
      })
      this.catalogTrees = res.data.data
      this.deleteCount = res.data.deleteCount
    },
    async confirm() {
      this.confirmLoading = true
      let IDs = this.$refs.tree.getCheckedKeys()
      if (IDs.length === 0) {
        util.showErrorMessageBox('请先选择栏目')
        this.confirmLoading = false
        return
      }
      let res
      if (this.delMode) {
        res = await axios.delete(`/ui/recyclebin/${IDs}/deletereallycatalog`)
      } else {
        res = await axios.put(`/ui/recyclebin/${IDs}/restorecatalog`)
      }
      util.showResponseMessage(res.data)
      this.confirmLoading = false
      if (res.data.status === 1) {
        this.isShow = false
        this.$emit('callback')
      }
    },
    renderContent: function(createElement, { node, data, store }) {
      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', [
          ' ',
          createElement('i', { attrs: { class: 'fa fa-folder' } }),
          data.backupMemo !== 'Delete' && node.childNodes.length !== 0
            ? createElement(
              'span',
              { attrs: { style: 'color:#ff0000' } },
              ' ' + node.label
            )
            : createElement('span', ' ' + node.label + `(${data.contentCount})`)
        ])
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    catalogID: {
      default: 0
    },
    delMode: {
      type: Boolean,
      default: false
    }, // 删除标志
    treeLevel: {
      default: 10
    },
    isChildCatalog: {
      default: false
    }
  }
}
</script>

<style>
/* 在一般情况下dialog宽为450像素，在逻辑分辨率480像素以下dialog宽为90% */
.recyclebin-catalog-dialog .el-dialog {
  width: 450px;
}
@media (max-width: 480px) {
  .message-detail-dialog .el-dialog {
    width: 90%;
  }
}
</style>
