<template>
  <ns-drawer
    v-model:visible="visible"
    size="large"
    class="custom-class"
    title="编辑"
    :ok="btnClick"
    :cancel="() => (visible = false)"
    placement="right">
    <div class="drawerContainer">
      <ns-tree-api v-bind="treeConfig" @select="treeSelect" />
      <a-transfer
        v-model:target-keys="targetKeys"
        :data-source="mockData"
        style="height: 100%; width: 66%"
        :listStyle="listStyle"
        show-search
        :filter-option="filterOption"
        :render="(item) => item.title" />
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';
  import { treeConfig } from './config';

  const visible = ref(false);
  const mockData = ref([]);

  const listStyle = {
    height: '100%',
    width: '100%',
  };
  const targetKeys = ref<string[]>([]);
  const toggle = () => {
    visible.value = !visible.value;
  };

  onMounted(() => {
    getMock('上海公司');
  });

  const filterOption = (inputValue: string, option: MockData) => {
    return option.description.indexOf(inputValue) > -1;
  };

  const btnClick = () => {
    visible.value = false;
    NsMessage.success('编辑成功');
  };
  function treeSelect(
    selectedKeys: never[],
    e: {
      selected: boolean;
      selectedNodes: { props: { dataRef: any } }[];
      node: any;
      event: any;
    },
  ) {
    console.log(selectedKeys, e);
    const {
      dataRef: { title },
    } = e.node;

    getMock(title);
  }
  const getMock = (company) => {
    const keys = [];
    const mData = [];
    for (let i = 0; i < 60; i++) {
      const data = {
        key: i.toString(),
        title: `A00${i + 1}总用电量(${company})`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        keys.push(data.key);
      }
      mData.push(data);
    }
    mockData.value = mData;
    targetKeys.value = keys;
  };
  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
</style>
