<template>
  <Card
    ref="resourceSearch"
    class="resource-check ems-components-new"
    :style="resCheckStyle"
  >
    <p slot="title">{{$t('资源选择')}}</p>
    <div class="resource-check-content">
      <div style="position: relative;">
        <Form
          ref="searchForm"
          :model="searchForm"
          :label-width="90"
          inline
        >
          <div>
            <FormItem
              ref="code"
              prop="code"
              :label="`${$t('资源编码')}：`"
            >
              <Input
                v-model.trim="searchForm.code"
                size="small"
                style="width: calc(100% - 90px)"
                clearable
              ></Input>
            </FormItem>
          </div>
          <div>
            <FormItem
              ref="name"
              prop="name"
              :label="`${$t('资源名称')}：`"
            >
              <Input
                v-model.trim="searchForm.name"
                size="small"
                style="width: calc(100% - 90px)"
                clearable
              ></Input>
            </FormItem>
          </div>
          <div>
            <FormItem
              ref="ref"
              prop="ref"
              label="REF："
            >
              <Input
                v-model.trim="searchForm.ref"
                size="small"
                style="width: calc(100% - 90px)"
                clearable
              ></Input>
              <Button
                ref="search"
                size="small"
                type="warning"
                icon="md-search"
                style="margin-left: 10px; height: 24px;"
                :loading="loading.search"
                @click.native="search()"
              >
                {{$t('查询')}}
              </Button>
              <Button
                v-if="showAdd"
                ref="add"
                size="small"
                type="warning"
                icon="md-add"
                style="margin: 5px 10px;"
                @click.native="add"
              >
                {{$t('新增')}}
              </Button>
            </FormItem>
          </div>
        </Form>
        
      </div>
      <div
        class="resource-tree-wrp"
        :style="resourceTreeStyle"
      >
        <ResourceTree
          ref="resourceTree"
          :treeData="resourceTree"
          @select="select"
        ></ResourceTree>
      </div>
    </div>
  </Card>
</template>
<script>
import { queryResourceTree } from '../server.js';
import Three from '../../util/getResourceTree.js';
import ResourceTree from './ResourceTree.vue';
export default {
  components: {
    ResourceTree
  },
  props: {
    showAdd: {
      type: Boolean,
      default: false
    },
    onSelectInput: {
      type: Boolean,
      default: false
    },
    isMenuMange: { // 是否菜单中使用
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: {
        search: false
      },
      searchForm: {
        code: '',
        name: '',
        ref: ''
      },
      resourceTreeStyle: '',
      resCheckStyle: '',
      defaultTree: [],
      resourceTree: [],
      treeData: null,
      backup: null,
      filterList: [],
      filterIdList: {},
      paramsData: {}
    };
  },
  created() {
    if (this.isMenuMange) this.searchForm.types = '01,02';
    this.resourceTree = JSON.parse(JSON.stringify(this.defaultTree));
    this.search();
  },
  mounted() {
    try {
      if (this.onSelectInput) {
        this.resourceTreeStyle = 'top: 110px';
        this.resCheckStyle = `height: ${window.innerHeight - this.$refs.resourceSearch.$el.offsetTop - 180}px`;
      } else {
        this.resourceTreeStyle = 'top: 140px';
        this.resCheckStyle = `height: ${window.innerHeight - this.$refs.resourceSearch.$el.offsetTop - 55}px`;
      }
    } catch (err) {}
  },
  methods: {
    select(data) {
      this.$emit('select', data);
    },
    // 新增
    add() {
      this.$emit('add');
    },

    // 查看对象中是否存在空值
    isEmptyObject(obj) {
      let flag = true;
      for(var key in obj){
        if(obj[key]) return false;
      }
      return flag;
    },

    /*
    * 树资源初始化
    * currentNodeId | 当前需要展开的节点path
    * isSearch | 是否搜索
    */
    search(currentNodeId = [], thisNode = '') {
      this.loading.search = true;
      queryResourceTree(this.searchForm).then(res => {
        if (res.statusCode === '0') {
          this.loading.search = false;
          const tree = new Three(res.dataResult, {
            sort: true,
            onSelectInput: this.onSelectInput,
            noMatchDisabled: this.onSelectInput ? '02' : null,
            currentNodeId,
            isSearch: !this.isEmptyObject(this.searchForm),
            thisNode
          });
          this.resourceTree = tree.json;
        } else {
          this.$Message.error(res.msg || '网络错误！');
        }
      }).catch(() => {
        this.loading.search = false;
        this.$Message.error('网络错误！');
      });
    },
    // 刷新树
    reload(currentNodeId = '', thisNode = '') {
      const nodeId = currentNodeId.split('/');
      nodeId.pop();
      this.search(nodeId, thisNode);
      // this.setSelectClass(nodeId)
    },
    // 获取选中的树节点
    getSelectedNodes() {
      return this.$refs.resourceTree.getSelectedNodes();
    },

    // 设置选中样式
    // setSelectClass(nodeId) {
    //   this.thisNode = nodeId;
    // }
  }
};

</script>
<style lang="less">
.resource-check {
  width: 100%;
  float: left;
  background: #fff;
  .resource-check-content {
    position: absolute;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    .resource-tree-wrp {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      overflow: auto;
    }
    .ivu-form-item {
      width: 100%;
    }
  }
  .ivu-form-item {
    margin-bottom: 0;
  }
  .ivu-form-item-error {
    margin-bottom: 0;
  }
  .ivu-tree-empty {
    padding-top: 15px;
    text-align: center;
  }
}
</style>
