<template>
  <div class="manual">
    <Row type="flex">
      <Col flex="240px">
        <ManualClassify @change="handleChange" />
      </Col>
      <Divider type="vertical" style="height: 100%; margin: 0 20px;" />
      <Col flex="1">
        <ManualList :manual-classify="manualClassify" />
      </Col>
    </Row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Row, Col, Divider } from 'ant-design-vue';
import ManualClassify from "./components/manual-classify.vue";
import ManualList from "./components/manual-list.vue";

export default defineComponent({
  name: 'manual',
  components: { Row, Col, Divider, ManualClassify, ManualList },
  setup() {
    const manualClassify = ref<number>();

    const handleChange = (val: number) => {
      manualClassify.value =  val;
    };

    return { 
      manualClassify, 
      handleChange
    };
  }
});
</script>
<style lang="less" scoped>
  .manual {
    width: 100vw;
    height: 100vh;
    padding: 20px;
    overflow: auto;
    .ant-row {
      height: 100%;
    }
  }
</style>
