<template>
  <ns-drawer
    v-model:visible="visible"
    :width="800"
    class="custom-class"
    title=" "
    destroyOnClose
    :ok="btnClick"
    :cancel="() => (visible = false)"
    placement="right">
    <div class="drawerContainer">
      <ns-tree-api v-bind="config" @select="treeSelect" />
      <a-transfer
        v-model:target-keys="targetKeys"
        :data-source="dataSource"
        style="height: 100%; width: 66%"
        :listStyle="listStyle"
        show-search
        :render="(item) => item.title"
        :filter-option="filterOption" />
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';
  import { editCalTreeConfig } from './config';
  import { group } from '/@/api/deviceManage';
  import { http } from '/nerv-lib/util/http';
  const emit = defineEmits(['sure']);
  const props = defineProps({ params: Object });
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  const config = computed(() => {
    return editCalTreeConfig(result);
  });
  const visible = ref(false);
  const dataSource = ref([]);
  const listStyle = {
    height: '100%',
    width: '100%',
  };
  const targetKeys = ref([]);
  const currentId = ref('');

  const clearData = () => {
    dataSource.value = [];
    targetKeys.value = [];
    currentId.value = '';
  };
  const toggle = () => {
    visible.value = !visible.value;
    clearData();
    visible.value && getData(currentId.value);
  };

  onMounted(() => {});

  const filterOption = (inputValue: string, option: any) => {
    return option?.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1;
  };

  const btnClick = () => {
    if (!currentId.value) {
      NsMessage.warn('请先选择公司');
      return;
    }

    http
      .post(group.saveComputeList, {
        ...props.params,
        groupListId: props.params?.id,
        saveOrgId: currentId.value,
        saveDeviceInfoIds: targetKeys.value,
      })
      .then(() => {
        emit('sure');
        NsMessage.success('操作成功');
        toggle();
      });
  };
  function treeSelect(
    selectedKeys: never[],
    e: {
      selected: boolean;
      selectedNodes: { props: { dataRef: any } }[];
      node: any;
      event: any;
    },
  ) {
    console.log(selectedKeys, e);
    const {
      dataRef: { title },
    } = e.node;
    currentId.value = selectedKeys[0];
    getData(currentId.value);
  }
  const getData = (id) => {
    http
      .post(group.queryEditCompute, {
        orgId: result,
        queryOrgId: id,
        ...props.params,
        // energyType: props.params.energyType,
      })
      .then((res) => {
        dataSource.value = res.data.deviceInfos?.map((item) => {
          item['title'] = item.deviceName;
          item['key'] = item.id.toString();
          return item;
        });
        targetKeys.value = res.data.linkDeviceInfos?.map((item) => {
          return item.id.toString();
        });
      });
  };
  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
</style>
