<template>
   <avue-tree :option="option1" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
     <template slot-scope="scope" slot="menu">
       <div class="avue-tree__item" @click.native="tip(scope.node,scope.data)">自定义按钮</div>
     </template>
   </avue-tree>
</template>

<script>
    export default {
        name: "residential-tree",
        data () {
              return {
                  form:{},
                  option1:{
                    title:'我是标题',
                    formOption:{
                      labelWidth:100,
                      column:[{
                          label:'自定义项',
                          prop:'test'
                      }],
                    },
                    lazy: true,
                    treeLoad: function (node, resolve) {
                      if (node.level === 0) {
                        return resolve([{ is_show: true, label: 'region', value: new Date().getTime() }]);
                      }
                      if (node.level > 2) return resolve([]);
                      setTimeout(() => {
                        const data = [{
                          label: 'leaf',
                          is_show: true,
                          value: new Date().getTime(),
                          leaf: true
                        }, {
                          is_show: true,
                          value: new Date().getTime(),
                          label: 'zone'
                        }];
        
                        resolve(data);
                      }, 500);
                    },
                    props:{
                      labelText:'标题',
                      label:'label',
                      value:'value',
                      children:'children',
                      leaf:'leaf'
                    }
                  }
              }
          },
          methods:{
            tip(node,data){
                this.$message.success(JSON.stringify(data))
            },
            del(data,done){
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$message.success('删除回调')
                done();
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
            },
            update(data,done,loading){
              this.$message.success('更新回调')
              done();
            },
            save(data,done,loading){
              this.$message.success('新增回调')
              this.form.id = new Date().getTime();
              this.form.value=new Date().getTime();
              this.form.children=[];
              done();
            },
            nodeClick(data){
              this.$message.success(JSON.stringify(data))
            }
          }
    };

</script>

<style scoped>
    .filter-tree{
    }
    .treeRight {

    }

    .treeLeft {

    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
