<template>
  <div>
    <el-tree :data="list" :props="props1" :load="loadNode1" lazy :expand-on-click-node="false"
             :render-content="renderContent" node-key="id">
    </el-tree>
  </div>
</template>

<script type="text/jsx">
import ElRow from 'element-ui/packages/row/src/row'

export default {
  components: {ElRow},
  data () {
    return {
      params: null,
      props1: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      list: [],
      name: this.$parent.listname,
      listurl: '',
      removeurl: '',
      tip: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
  },
  created () {
    switch (this.name) {
      case 'department':
        this.listurl = '/department/list'
        this.removeurl = '/department/remove'
        this.tip = '是否删除组织机构？'
        break
      case 'auth':
        this.listurl = '/auth/list'
        this.removeurl = '/auth/remove'
        this.tip = '是否删除该权限？'
        break
      case 'dictionary':
        this.listurl = '/dict/list'
        this.removeurl = '/dict/remove'
        this.tip = '是否删除该字典？'
        break
    }
    this.getList()
  },
  methods: {
    getList () {
      let that = this
      if (this.name != 'dictionary') {
        this.params = {parentId: 0}
      } else {
        this.params = {value: 0}
      }
      this.$http({
        method: 'post',
        url: this.listurl,
        options: {
          noParam: true
        },
        data: this.params
      }).then(data => {
        if (data.success) {
          if (that.list.length == 0) {
            that.list = data.data
            that.list.forEach(function (item) {
              item.type = that.name
              if (!item.children) {
                item.leaf = true
              }
            })
          }
        }
      })
    },
    loadNode1 (node, resolve) {
      let that = this
      if (this.name != 'dictionary') {
        this.params = {parentId: node.data.id}
      } else {
        this.params = {value: node.data.value}
      }
      if (node.level > 0 && node.data.children && typeof (node.data.children) == 'string') {
        this.$http({
          method: 'post',
          url: this.listurl,
          options: {
            noParam: true
          },
          data: this.params
        }).then(data => {
          if (data.success) {
            node.children = data.data
            node.children.forEach(function (item) {
              item.type = that.name
              if (!item.children) {
                item.leaf = true
              }
            })
            return resolve(node.children || [])
          }
        })
      }
    },
    renderContent (h, {node, data, store}) {
      return (
        <div class="m-b-xs container"
          style="width:100%;flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;text-align:center">
          <div title={data.name} style="display:inline-block;width:10%;text-align:left;">{data.name}</div>
          {data.type != 'dictionary' ? <div title={data.status == 'NORMAL' ? '正常' : '异常'}
            style="display:inline-block;width:10%">{data.status == 'NORMAL' ? '正常' : '异常'}</div> : ''}
          {data.type != 'dictionary'
            ? <div title={data.gmtModify} style="display:inline-block;width:20%">{data.gmtModify}</div> : ''}
          {data.type == 'auth'
            ? <div title={data.priority} style="display:inline-block;width:5%">{data.priority}</div> : ''}
          {data.type != 'dictionary'
            ? <div title={data.remark} style="display:inline-block;width:25%">{data.remark}</div> : ''}
          {data.type == 'dictionary'
            ? <div title={data.value} style="display:inline-block;width:60%">{data.value}</div> : ''}

          <el-button disabled={data.disAdd} style="font-size: 14px;" size="mini" type="primary"
            on-click={() => this.handleCreate(1, data)}>新增
          </el-button>
          <el-button disabled={data.disModify} style="font-size: 14px;" size="mini" type="success"
            on-click={() => this.handleCreate(2, data)}>编辑
          </el-button>
          <el-button disabled={data.disRemove} style="font-size: 14px;" size="mini" type="danger"
            on-click={() => this.remove(data)}>删除
          </el-button>
          {data.type != 'dictionary' ? <el-button type="warning" size="mini" style="font-size: 14px;"
            on-click={() => this.handleDetail(node, data)}>详情</el-button> : ''}
        </div>
      )
    },
    handleCreate (flag, data) {
      this.$emit('add', flag, data)
    },
    handleDetail (data) {
      this.$emit('edit', data)
    },
    handleServer (data) {
      this.$emit('server', data)
    },
    Reset () {
      this.list = []
      this.getList()
    },
    remove (data) {
      this.$confirm(this.tip, '提示', {
        confirmButtonClass: 'el-button--danger',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'post',
          url: this.removeurl,
          data: {
            id: data.id
          }
        }).then(data => {
          if (data.success) {
            this.$message.success({
              message: data.message,
              type: 'success'
            })
            this.Reset()
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
  .el-tree-node__content {
    padding: 5px 0 !important;
  }

  .container div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
