<template>
  <div class="guns-layout">
    <div class="guns-layout">
      <div class="guns-layout">
        <guns-split-layout>
          <div class="guns-layout-sidebar width-100 p-t-12">
            <div class="sidebar-content">
              <list-type-tree
                :isInitSelect="false"
                @defaultSelect="defaultSelect"
                @selectNull="selectNull"
                @treeSelect="treeSelect"
              ></list-type-tree>
            </div>
          </div>
          <template #content>
            <WorkflowModelList ref="WorkflowModelListRef" :readable="props.readable" />
          </template>
        </guns-split-layout>
      </div>
    </div>
  </div>
</template>

<script setup name="MidWorkFlowModel">
import { onMounted, ref } from 'vue';
import ListTypeTree from '../../app/list/components/list-type/list-type-tree.vue';
import WorkflowModelList from './components/model-list.vue';

defineOptions({
  name: 'MidWorkFlowModel'
});

const props = defineProps({
  // 是否禁用
  readable: {
    type: Boolean,
    default: false
  }
});

// ref
const WorkflowModelListRef = ref();

onMounted(() => {});

// 默认选中分类
const defaultSelect = data => {
  WorkflowModelListRef.value.where.businessCategoryId = data.businessCategoryId;
  WorkflowModelListRef.value.reload();
};

const selectNull = () => {
  WorkflowModelListRef.value.where.businessCategoryId = '';
  WorkflowModelListRef.value.reload();
};

// 左侧树选中
const treeSelect = (selected, metadata) => {
  if (selected) {
    WorkflowModelListRef.value.where.businessCategoryId = metadata.node.businessCategoryId;
  } else {
    WorkflowModelListRef.value.where.businessCategoryId = '';
  }
  WorkflowModelListRef.value.reload();
};
</script>

<style scoped lang="less"></style>
