<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';


import {
  Button as TButton,
  Link as TLink,
  Space as TSpace,
  Switch as TSwitch,
  Tag as TTag
} from 'tdesign-vue-next';

import { message } from '#/adapter/tdesign';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceListByPage } from '#/api/core/device';
import { toObject } from '#/enum';

import { useGridSchema, useSearchFormSchema } from './data';
import Form from './form.vue';

const [FormModel, formModelApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [Grid, GridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useSearchFormSchema(),
    showCollapseButton: false,
    submitButtonOptions: {
      content: '查询',
    },
    submitOnChange: true,
    submitOnEnter: true,
  },
  gridOptions: {
    minHeight: 600,
    columns: useGridSchema(),
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await getDeviceListByPage({
            current: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        },
      },
    },
    treeConfig: {
      parentField: 'parentId',
      rowField: 'id',
      childrenField: 'children',
      showIcon: true,
      expandAll: true,
    },
  },
  // 完全移除分隔条
  separator: false,
  // 你也可以使用下面的代码来移除分隔条
  // separator: { show: false },
  // 或者使用下面的代码来改变分隔条的颜色
  // separator: { backgroundColor: 'rgba(100,100,0,0.5)' },
});

const addEvent = () => {
  formModelApi
    .setData({
      pointId:
        GridApi.formApi.getFieldComponentRef('pointId').getValue() ?? undefined,
    })
    .open();
};
const addChildEvent = (row) => {
  formModelApi
    .setData({
      parentId: row.id,
      pointId: row.pointId,
    })
    .open();
};
const editEvent = (row) => {
  formModelApi
    .setData({
      ...row,
      card: row.cardId ? cardOptionsMap.value[row.cardId] : undefined,
    })
    .open();
};
const onRefresh = () => {
  GridApi.reload();
};

const pointOptionsMap = computed(() => {
  return toObject(
    GridApi.formApi.getFieldComponentRef('pointId')?.getOptions() ?? [],
    'value',
    'label',
  );
});
const productOptionsMap = computed(() => {
  return toObject(
    GridApi.formApi.getFieldComponentRef('productIds')?.getOptions() ?? [],
    'value',
    'label',
  );
});
const cardOptionsMap = computed(() => {
  return toObject(
    GridApi.formApi.getFieldComponentRef('cardId')?.getOptions() ?? [],
    'value',
    'label',
  );
});
onMounted(() => {
  const route = useRoute();
  GridApi.formApi.setFieldValue('pointId', route.query.pointId);
});
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="设备列表">
      <template #toolbar-tools>
        <TButton class="mr-2" theme="primary" @click="addEvent">
          新增设备
        </TButton>
      </template>
            <template #status="{ row }">
            <TTag :theme="row.status ? 'success' : 'danger'">
            {{ row.status ? '在线':'离线' }}
            </TTag>
          </template>
      
      <template #pointId="{ row }">
        {{ pointOptionsMap[row.pointId] }}
      </template>

      <template #productId="{ row }">
        {{ productOptionsMap[row.productId] }}
      </template>

      <template #cardId="{ row }">
        {{ cardOptionsMap[row.cardId] }}
      </template>

      <template #actions="{ row }">
        <TSpace>
          <TLink  theme="primary" @click="editEvent(row)">编辑</TLink>
          <TLink  theme="primary" @click="addChildEvent(row)">
            增加子设备
          </TLink>
        </TSpace>
      </template>
    </Grid>

    <FormModel @success="onRefresh" />
  </Page>
</template>
