<template>
  <PageContainer :pageHeaderRender="false">
    <JCard>
      <Tabs :activeKey="activeKey" @change="changeTabs">
        <TabPane key="1" tab="基础配置">
          <Base v-if="activeKey === '1'" :id="props.id" v-model:value="id" @change="typeChange" @close="close" />
        </TabPane>
        <TabPane key="2" tab="关联场景联动">
          <Scene :id="props.id" />
        </TabPane>
        <TabPane key="3" tab="告警记录">
          <Log v-if="activeKey === '3'" :id="props.id" :type="type" />
        </TabPane>
      </Tabs>
    </JCard>
  </PageContainer>
</template>

<script lang="ts" setup>
  import Base from './Base/index.vue';
  import Scene from './Scene/index.vue';
  import Log from './Log/indev.vue';
  import { onlyMessage } from '@jdlinker/utils';
  import { ref } from 'vue';
  import { PageContainer, Tabs, TabPane, Card as JCard } from 'linker-ui-components';

  const emit = defineEmits(['close']);
  const props = defineProps({
    id: {
      type: String,
      defult: ''
    }
  });

  const id = ref(props.id);
  const type = ref();

  // const route = useRoute();
  const changeTabs = (e: any) => {
    if (id.value) {
      activeKey.value = e;
    } else {
      onlyMessage('请先保存基础配置', 'error');
    }
  };
  const activeKey = ref('1');

  const typeChange = (_type: string) => {
    type.value = _type;
  };
  const close = () => {
    emit('close');
  };
</script>
<style lang="less" scoped>
  .ant-card {
    margin: 10px;
    .ant-card-body {
      padding: 24px;
    }
  }
</style>
