<template>
<div>
  <el-button v-show="!dimDialog.show" class="button-new-dim" size="small" @click="dimDialog.show=true"><i class="fa fa-plus"></i></el-button>
  <el-tag
    v-for="dim in dimsCatalogs"
    :key="dim"
    closable
    :disable-transitions="false"
    @close="handleTagClose(dim)"
    >
    {{dim}}
  </el-tag>
  <el-dialog title="选择栏目" :visible.sync="dimDialog.show" :append-to-body="true" class="copy-catalog-dialog">
    <div class="dialog-body" v-loading="dimDialog.loading">
      <el-row>
        <el-col :span="8" style="text-align:center;">维度视图：
        </el-col>
        <el-col :span="16">
          <el-select placeholder="维度视图" style="width:100%;" v-model="dimensionID" @change="changeClickHandler">
            <el-option v-for="dimension in dimensions" :key="dimension.ID" :label="dimension.name" :value="dimension.ID">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-checkbox-group v-model="dimsCatalogs"  class="catalog-tree">
          <el-tree :show-checkbox="true" :data="catalogTrees"  :props="defaultProps" default-expand-all
          node-key="key" highlight-current :expand-on-click-node="false" @node-click="clickCatalog" ref="ctree">
          </el-tree>
        </el-checkbox-group>
      </el-row>
    </div>
    <div slot="footer">
      <el-button @click="dimDialog.show = false">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="dimDialog.loading">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import CatalogTree from '@src/components/catalogTree/CatalogTree.vue'

export default {
  props: {
    content: {
      type: Object,
      default: _ => ({})
    }
  },
  components: {
    'catalog-tree': CatalogTree
  },
  data() {
    return {
      catalogTrees: [], // 内容类型树形数据
      catalogID: 0,
      dimensionID: 1,
      dimensions: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      show: false,
      confirmLoading: false,
      dimsCatalogs: [],
      dimDialog: {
        show: false,
        loading: false
      },
      loadNode: async function(parentNode) {
        let res = await axios.get(`/ui/dimensions/${this.dimensionID}/catalogstree`, {
          params: {
            parentID: parentNode.ID
          }
        })

        return res.data.data
      }
    }
  },
  computed: {
    mContent: {
      set(val) {
        this.$emit('update:content', val)
      },
      get() {
        return this.content
      }
    }
  },
  async created() {
    await this.getDimensions()
    await this.getCatalogTree()
  },
  methods: {
    // set为true自动设置栏目id，false缓存上次栏目
    async getDimensions() {
      let res = await axios.get('/ui/dimensions', {params: {onlydim: 'Y'}})
      this.dimensions = res.data.data
      this.dimensionID = this.dimensions ? this.dimensions[0].ID : 0
    },
    handleNodeClick(data) {
      this.catalogID = data.ID
    },
    async getCatalogTree() {
      let res = await axios.get(`/ui/dimensions/${this.dimensionID}/catalogs`)
      this.catalogTrees = res.data.data
      if (this.catalogTrees.length === 0) {
        this.catalogID = 0
        return
      }
      this.catalogID = this.catalogTrees[0].ID
      this.handleNodeClick(this.catalogTrees[0])
      this.$refs['ctree'].setCurrentNode(this.catalogID)
    },
    changeClickHandler(value) {
      this.dimensionID = value
      this.getCatalogTree()
    },
    handleTagClose(dim) {
      this.mContent.dims.splice(this.mContent.dims.indexOf(dim), 1)
    },
    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.catalogIds !== data.ID && createElement('el-checkbox', {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)
        ])
      }
    },
    confirm() {

    },
    clickCatalog() {

    }
  }
}
</script>

<style scoped>
.button-new-dim {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-style: dashed;
}
.input-new-dim {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.copy-catalog-dialog .el-dialog {
  width: 420px;
}
@media (max-width: 480px) {
  .copy-catalog-dialog .el-dialog {
    width: 96%;
  }
}
.catalog-tree {
  height: 86%;
  width: 100%;
  overflow: auto;
}

.dialog-body {
  height: 400px;
  width: 100%;
  border: 1px solid #eee;
}
.el-checkbox-group{
  font-size:12px;
}
</style>
