<template>
  <div ref="menuSearch">
    <Card
      class="menu-check"
      :style="menuCheckStyle"
    >
      <p slot="title">
        {{ $t('菜单选择') }}
      </p>
      <div
        slot="extra"
        style="margin-top: -2px;"
      >
        <Button
          v-if="!onModal"
          size="small"
          type="warning"
          style="margin-right: 16px; padding: 0 18px;"
          @click.native="add"
        >
          {{ $t('新增') }}
        </Button>
        <Button
          ref="search"
          size="small"
          type="warning"
          style="padding: 0 18px;"
          :loading="loading.search"
          @click.native="search"
        >
          {{ $t('查询') }}
        </Button>
      </div>
      <div class="menu-check-content">
        <div style="position: relative;">
          <Form
            :model="searchForm"
            :label-width="90"
            inline
          >
            <div>
              <FormItem
                prop="menuCode"
                :label="$t('菜单编码') + '：'"
              >
                <Input
                  v-model.trim="searchForm.menuCode"
                  size="small"
                  clearable
                ></Input>
              </FormItem>
            </div>
            <div>
              <FormItem
                prop="menuName"
                :label="$t('菜单名称') + '：'"
              >
                <Input
                  ref="searchName"
                  v-model.trim="searchForm.menuName"
                  size="small"
                  clearable
                ></Input>
              </FormItem>
            </div>
            <div>
              <FormItem
                prop="actionUrl"
                :label="$t('前端模块') + '：'"
              >
                <Input
                  ref="actionUrl"
                  v-model.trim="searchForm.actionUrl"
                  size="small"
                  clearable
                ></Input>
              </FormItem>
            </div>
          </Form>
        </div>
        <div
          class="menu-tree-wrp"
          :style="menuTreeStyle"
        >
          <MenuTree
            ref="menuTree"
            :onlyMenu="onlyMenu"
            :delItem="delItem"
            @on-select-change="select"
            @searchFinish="loading.search = false"
          ></MenuTree>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import MenuTree from '../menuTree/MenuTree.vue';
export default {
  components: {
    MenuTree
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    valid: {
      type: String,
      default: ''
    },
    onModal: {
      type: Boolean,
      default: false
    },
    onlyMenu: {
      type: Boolean,
      default: false
    },
    delItem: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      loading: {
        search: false
      },
      searchForm: {
        menuCode: '',
        menuName: '',
        actionUrl: ''
      },
      menuCheckStyle: '',
      menuTreeStyle: 'top: 110px;',
      menuData: null
    };
  },
  created() {
    this.$emit('SetTitle', this.title);
    this.$emit('SetPageActions', [{
      text: '确定',
      type: 'warning',
      action: 'save',
      handle: () => {
        this.save();
      }
    }]);
  },
  mounted() {
    try {
      if (this.onModal) {
        this.menuCheckStyle = `height: ${window.innerHeight - this.$refs.menuSearch.offsetTop - 200}px`;
      } else {
        this.menuCheckStyle = `height: ${window.innerHeight - this.$refs.menuSearch.offsetTop - 30}px`;
      }
    } catch (err) {}
  },
  methods: {
    select(list, data) {
      if (!list.length) {
        this.menuData = null;
      } else {
        this.menuData = data;
        this.$emit('select', data);
      }
    },
    search() {
      this.$emit('search');
      this.loading.search = true;
      this.$refs.menuTree.search(this.searchForm);
    },
    add() {
      let params = {};
      if (this.$refs.menuTree) {
        const data = this.$refs.menuTree.getSelectedNodes();
        if (data.length) {
          params = data[0];
        }
      }
      this.$emit('add', params);
    },
    save() {
      if (!this.menuData) {
        this.$Message.error(this.valid || this.$t('请选择一项数据'));
      } else {
        this.$emit('Close', this.menuData);
      }
    },
    getMenu(val) {
      this.$refs.menuTree.reload(val);
    }
  }
};

</script>
<style lang="less">
.menu-check {
  .menu-check-content {
    position: absolute;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    .menu-tree-wrp {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      overflow: auto;
    }
    .ivu-form-item {
      width: 100%;
      padding-right: 20px;
    }
  }
  .ivu-form-item {
    margin-bottom: 0;
  }
}
</style>
