<template>
  <Card title="通道" v-bind="$attrs">
    <template #extra>
      <c-button type="link" size="small" @click="clientList">新增</c-button>
    </template>

    <template v-for="item in items" :key="item">
      <CardGrid class="!md:w-1/1 !w-full" @click="goPage(item)">
        <span class="flex">
          <Icon :icon="item.icon" :color="item.color" size="30" />
          <span class="text-lg ml-4">{{ item.title }}</span>
        </span>
        <div class="flex mt-2 h-10 text-secondary"> {{ item.name }} </div>
        <div class="flex justify-between text-secondary">
          <span>{{ item.group }}</span>
          <span>{{ item.id }}</span>
        </div>
      </CardGrid>
    </template>
  </Card>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import { Icon } from '@jdlinker/ui';
  import { list } from '../IotDeviceAccessOpcua_api';
  import { useMessage } from '@jdlinker/func';
  import opcData from '../index.vue';

  export default defineComponent({
    components: { Card, CardGrid: Card.Grid, Icon },
    setup() {
      const items = ref(clientList({}));
      const $message = useMessage();

      async function clientList(e) {
        // items.value = groupItems;
        const result = await list(e);
        items.value = result.records;
      }
      function goPage(e) {
        opcData.value = e;
        $message.createMessage.success('data=' + JSON.stringify(e));
      }

      return {
        items,
        clientList,
        list,
        $message,
        goPage,
        opcData
      };
    }
  });
</script>
