<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="filter-container">
          <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add()">添加</el-button>
          <el-button type="primary" class="filter-item" icon="el-icon-edit" @click="btn_edit()">编辑</el-button>
          <el-button type="primary" class="filter-item" icon="el-icon-delete" @click="btn_delete()">删除</el-button>
        </div>
        <el-alert :closable="false" title="地区管理" type="success"/>
          <el-tree
            node-key="id"
            :props="defaultProps"
            :load="loadNode"
            highlight-current
            lazy
            @node-click="treeNodeClick"
          >
          </el-tree>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getAreaTree, deleteAreaTree, getAreaTreeChildNode } from '@/api/systemSetup/roleSetting/areaManagement'
import addOrEdit from './component/addOrEdit'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
export default {
  components: {
    Pagination
  },
  data() {
    return {
      defaultProps: {
        label: 'text',
        children: 'zones',
        id: "id",
        parentId: "parentid",
        isLeaf: 'leaf',
      },
      keyword: '',
      treeclickId: 0,
      defaultExpandAll: false,
      expandOnNode: false,
      loading: false,
      node_had: '',
      resolve_had: '',
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      }
    }
  },
  created() {
  },
  mounted: function() {
  },
  methods: {
    //添加
    btn_add() {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: '' } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '90%'],
        shadeClose: false,
        title: '添加地区分类'
      })
    },
		//编辑
    btn_edit() {
      if (this.treeclickId === 0) {
        this.$message({
          message: '请选择一行编辑！',
          type: 'warning'
        })
        return
      }
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: this.treeclickId } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '90%'],
        shadeClose: false,
        title: '编辑地区分类'
      })
    },
    //删除
    btn_delete() {
      if (this.treeclickId === 0) {
        this.$message({
          message: '没有可删除的选项！',
          type: 'warning'
        })
      } else {
        this.deleteType(this.treeclickId)
      }
    },
    //删除
    deleteType(ids) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAreaTree(ids).then(response => {
            if (response.state.toLowerCase() === 'success') {
              this.requestNewData()
              this.clearTreeclickId()
              this.$message.success('删除成功!')
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    treeNodeClick(data) {
      this.treeclickId = data.id
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve;//同上，把node.level == 0的resolve也存起来
        this.loadtreeData(resolve)
      }
      if (node.level >= 1) {
        this.getChildByList(node, resolve)
        return resolve([]);
      }
    },
    loadtreeData (resolve) {
      let params = {
        pid: '1'
      }
      getAreaTreeChildNode(params).then(response => {
        if (response.state.toLowerCase() === 'success') {
          let areaTreelists = response.data
          resolve(areaTreelists)
        }
      })
    },
    getChildByList (node, resolve) {
      let params = {
        pid: node.data.id,
      }
      getAreaTreeChildNode(params).then(response => {
        if (response.state.toLowerCase() === 'success') {
          let areaTreelists = response.data
          resolve(areaTreelists)
        }
      })
    },
    requestNewData() {
      this.node_had.childNodes = [];//把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.resolve_had);//再次执行懒加载的方法
    },
    clearTreeclickId() {
      this.treeclickId = 0
    }
  }
}
</script>

<style lang="scss" scoped>
// .el-tree-node.is-current > .el-tree-node__content {
//   background-color: #c2d6ea !important;
// }
</style>
