<template>
  <el-button @click="handleClick" :disabled="!contentIds" :size="size" :type="buttonType" :priv="'com.zving.cms.Catalog.Content.Move.'+catalogIds">
 <!-- 复制dialog -->
 <i class="fa fa-paper-plane" ></i>{{buttonName}}
  <el-dialog title="选择栏目" :visible.sync="show" :append-to-body="true" class="move-catalog-dialog">
    <div class="dialog-body" v-loading="dataLoading">
      <dim-select :dim-info="{'enable':true,'contentType':contentType,'type':'Default,Link'}" @callback="callback"></dim-select>
      <el-input class="catalog-filter" placeholder="输入关键字进行过滤"  v-model="filterText"></el-input>
      <el-radio-group v-model="targetCatalogID" class="catalog-list-wrap">
        <el-tree :render-content="renderContent" :show-checkbox="false" :data="selectCatalogTrees" :props="catalogProps" default-expand-all :filter-node-method="filterNode"
          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 DimSelect from '@src/components/DimSelect.vue'
export default {
  components: {
    'dim-select': DimSelect
  },
  props: {
    contentIds: {
      type: [String, Number]
    },
    catalogIds: {
      type: [String, Number]
    },
    buttonType: {
      type: String,
      default: 'info'
    },
    size: {
      type: String,
      default: ''
    },
    buttonName: {
      type: String,
      default: '转移'
    },
    contentType: {
      type: String,
      default: ''
    },
    isEditContent: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectCatalogTrees: [],
      show: false,
      handlerLoading: false,
      dataLoading: true,
      targetCatalogID: '',
      targetCatalog: {},
      catalogProps: { children: 'children', label: 'name' },
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.moveCatalogTrees.filter(val)
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    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.catalogIds !== data.ID && (data.contentType === '' || this.contentType === data.contentType)
    },
    async getCatalogs() {
      this.dataLoading = true
      let resp = await axios.get('/ui/catalog/bindcopycontenttree', {
        params: {
          pageIndex: 0,
          pageSize: 10000,
          contentType: this.contentType,
          type: 'Default,Link'
        }
      })
      if (resp.data.status === 1) {
        this.selectCatalogTrees = resp.data.data
        this.dataLoading = false
      }
    },
    copyHandleNodeClick(val) {
      this.targetCatalogID = val && this.catalogIds !== val ? val.ID : ''
      this.targetCatalog = val && this.catalogIds !== val ? val : {}
    },
    getSelectCatalogIds() {
      return this.targetCatalogID
    },
    async confirm() {
      if (!this.targetCatalogID) {
        this.$alert('请先选择一条记录')
        return
      }
      if (this.catalogIds === this.targetCatalogID) {
        this.$alert('不能选择当前栏目')
        return
      }
      if (this.contentIds === 'new'){
        this.$emit('refresh-content', this.targetCatalog)
        this.show = false
      } else {
        this.handlerLoading = true
        let resp = await axios.put(`/ui/contentcore/contents/${this.contentIds}/move`, {
          catalogIds: this.targetCatalogID,
          catalogId: this.catalogIds,
          type: 'move'
        })
        if (resp.data.status === 1) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.filterText = ''
          this.handlerLoading = false
          this.show = false
          if (this.isEditContent){
            this.$emit('refresh-content', this.targetCatalog)
          } else {
            this.$emit('refresh-content', this.contentIds)
          }
        } else {
          this.handlerLoading = false
          this.$alert(resp.data.message || '操作失败')
        }
      }
    },
    handleClick () {
      this.show = true
      this.getCatalogs()
    }
  }
}
</script>
<style>
.move-catalog-dialog .el-dialog {
  width: 420px;
}
@media (max-width: 480px) {
  .move-catalog-dialog .el-dialog {
    width: 96%;
  }
}
.move-catalog-dialog .catalog-filter.el-input {
  padding: 5px;
}
</style>
<style scoped>
.dialog-body {
  height: 450px;
  width: 100%;
  border: 1px solid #eee;
}
.catalog-list-wrap {
  width:100%;
  height: 348px;
  overflow: auto;
}

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