<template>
  <div class="flex" style="flex:1; ">
    <work-busy :is-busy="seaching"></work-busy>
    <div class="row form-horizontal select-overspread container-fluid auto" partial>
      <div novalidate class="form-inline auto" partial>
        <div class="form-group col-sm-2">
          <input type="text" class="form-control" @keydown.enter="search"
                 style="width:150px" v-model="search_str"
                 placeholder='请输入搜索'>
        </div>
        <div class="form-group col-sm-2">
          <button class="button_search button_spacing" style="width:80px;margin-left:30px;"
                  @click="search" v-el:cx>
            查询
          </button>
        </div>
        <div class="form-group col-sm-4" v-if="quanxian.includes('修改展示树')" >
          <button class="button_search button_spacing" style="margin-left:30px;"
                  @click="confirm" v-el:cx>
            添加一个根目录
          </button>
        </div>
      </div>
    </div>
    <div id="orglist">
      <tree-grid class=" list_area table_sy" style="overflow: auto" v-ref:list :model='model'>
        <template partial='head'>
          <tr>
            <th>功能名称</th>
          </tr>
        </template>
        <template partial='body'>
          <td>
            <tree-grid-item :row="row" iconsize="15px">
              <span partial>
                {{ row.data.name }}
                 <span style="float: right">
                  <button class="button_spacing button_export" v-if="row.data.type !=='型号'" @click.stop="$parent.$parent.addRes(row.data)">添加功能</button>
                  <button class="button_spacing button_clear"  @click.stop="$parent.$parent.modifyRes(row)">修改功能</button>
                  <button class="button_spacing button_delete" @click.stop="$parent.$parent.delRes(row)">删除功能</button>
                </span>
              </span>
            </tree-grid-item>
          </td>
        </template>
      </tree-grid>
    </div>
  </div>
</template>
<script>

/**
 * 构造树型结构数据
 */
let handleTree = function (data, id, parentId, children) {
  console.log(JSON.stringify(data))
  let config = {
    id: id || 'id',
    parentId: parentId || 'parent_id',
    childrenList: children || 'children'
  }
  const childrenListMap = {}
  const nodeIds = {}
  const tree = []
  for (let d of data) {
    let parentId = d[config.parentId]
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = []
    }
    nodeIds[d[config.id]] = d
    childrenListMap[parentId].push(d)
  }
  for (let d of data) {
    let parentId = d[config.parentId]
    if (nodeIds[parentId] == null) {
      tree.push(d)
    }
  }
  for (let t of tree) {
    adaptToChildrenList(t)
  }

  function adaptToChildrenList (o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]]
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c)
      }
    }
  }
  console.log(JSON.stringify(tree))

  return tree
}

export default {
  title: '功能管理',
  data () {
    return {
      model: {},
      search_str: '',
      seaching: false,
      quanxian: this.$login.r
    }
  },
  ready () {
    console.log(this.$login.r)
    this.searchData()
  },
  methods: {
    // 查找资源
    /**
     *
     * @param model 是否修改model
     * @param condition  查询条件
     * @returns {Promise<*>} 返回值为不是树状结构的数组
     */
    async searchData (model, condition) {
      let data = {
        condition: condition || '1 = 1'
      }
      this.seaching = true
      let temp = await this.$resetpost('rs/logic/query_material', {data}, {rejectMsg: null, resolveMsg: null})
      if (!model) {
        this.model = handleTree(temp.data)
      }
      this.seaching = false
      return temp.data
    },
    // 查询方法
    search () {
      let condition = this.search_str || this.search_str !== '' ? `name like '%${this.search_str}%'` : ' 1=1 '
      this.searchData(false, condition)
    },
    // 添加资源
    addRes (obj) {
      this.$dispatch('add-res', obj)
    },
    // 修改资源
    modifyRes (obj) {
      this.$dispatch('modify-res', obj)
    },
    // 删除资源
    async delRes (obj) {
      let temp = await this.searchData(true, `parent_id = ${obj.data.id}`)
      if (temp.length > 0) {
        this.$showAlert('请先删除子目录！', 'warning', 2000)
        return
      }
      this.$resetdelete(`rs/entity/t_material_info`, {id: obj.data.id}).then(res =>
        this.searchData()
      )
    },
    async confirm () {
      let model = {
        name: '一个根目录',
        parent_id: '0',
        component: null,
        create_by: '',
        depict: '',
        type: '普通模式'
      }
      await this.$resetpost('rs/entity/t_material_info', model).then(res =>
        this.searchData()
      )
    }
  },
  computed: {},
  watch: {},
  events: {}

}
</script>
<style>
#orglist div {
  margin-left: 0;
  color: #000;
}

#orglist span {
  color: #000;
}
</style>

