<template>
  <div class='auto' id="adjustTree">
    <h3 class="txtline">&nbsp;&nbsp;需要调整功能【{{data.name}}】</h3>
    <h3 class="txtline">&nbsp;&nbsp;选中功能【{{$refs.tree.selected.data.name}}】</h3>
    <tree :model="model" v-ref:tree id='defaultTreeOpen'>
      <span partial>{{row.data.name}}
      </span>
    </tree>
    <button type="button" name="button" class="btn btn-primary auto" @click="save()">保存</button>
  </div>
</template>

<script>
import * as Util from "../Util"

export default {
  title: "调整资源位置",
  props: [
    'data' // 要调整的资源
  ],
  data () {
    return {
      model: Util.f,  // 资源树的内容
    }
  },
  methods: {
    // 保存调整结果
    save () {
      if(this.data.id!=this.$refs.tree.selected.parent.data.id){
        console.log("进入保存函数")
        this.$showMessage('确定要将【'+this.data.name+'】移动到'+this.$refs.tree.selected.data.name+'的后面', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            let msg =  this.$resetpost(`rs/data/adjust/${this.$refs.tree.selected.id}/${this.data.id}`, {})
          }
        })
      }else {
        this.$showMessage("请检查调整层级！！！")
      }
    }
  }
}
</script>
<style>
  .all-checked {
    vertical-align: text-top;
    margin-left: 10px !important;
  }
  td > .glyphicon {
    cursor: pointer;
  }
  th > input[type="checkbox"], td > input[type="checkbox"] {
    cursor: pointer;
  }
  #adjustTree div{
    margin-left: 0px;
    color: #000;
  }
  #adjustTree span {
    color: #000;
  }
  #adjustTree .list-group-item {
    background-color: #fff;
    border: none;
  }
  #adjustTree .list-group-item.active,
  #adjustTree  .list-group-item.active:hover,
  #adjustTree  .list-group-item.active:focus {
    background-color: #fff;
  }

  #adjustTree .active {
    background-color: #5cb85c !important;
  }
</style>
