<template>
  <div>
    <BasicModal
      :maskClosable="false"
      v-bind="$attrs"
      width="55rem"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <div v-if="isViewDetail">
        <Attribute v-show="activeKey === '1'" ref="AttrRef" />
        <Service v-show="activeKey === '2'" ref="ServiceRef" />
        <Events v-show="activeKey === '3'" ref="EventsRef" />
      </div>
      <div v-if="!isViewDetail">
        <div>
          <Typography>
            <TypographyParagraph>
              <blockquote style="background: #f2f2f2">{{ blockContent }}</blockquote>
            </TypographyParagraph>
          </Typography>
        </div>
        <Tabs type="card" v-model:activeKey="activeKey" :size="size">
          <TabPane :disabled="attrDisable" forceRender key="1" tab="属性">
            <Attribute v-show="activeKey === '1'" ref="AttrRef" />
          </TabPane>
          <TabPane :disabled="serveiceDisable" forceRender key="2" tab="服务">
            <Service v-show="activeKey === '2'" ref="ServiceRef" />
          </TabPane>
          <TabPane
            :disabled="eventDisable"
            forceRender
            key="3"
            v-show="activeKey === '3'"
            tab="事件"
          >
            <Events v-show="activeKey === '3'" ref="EventsRef" />
          </TabPane>
        </Tabs>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Tabs, TabPane, Typography, TypographyParagraph } from 'ant-design-vue';
  import Attribute from './cpns/Attribute.vue';
  import Service from './cpns/Service.vue';
  import Events from './cpns/Events.vue';
  import { mockData } from '../physical/cpns/components/mock';

  defineEmits(['register']);
  const attrDisable = ref(false);
  const serveiceDisable = ref(false);
  const eventDisable = ref(false);
  const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
通知，如告警，需要被及时处理。`;
  const activeKey = ref('1');
  const size = ref('small');
  const AttrRef = ref<InstanceType<typeof Attribute>>();
  const ServiceRef = ref<InstanceType<typeof Service>>();
  const EventsRef = ref<InstanceType<typeof Events>>();
  const isUpdate = ref(false);
  const isViewDetail = ref('');
  const isText = ref('');
  const dType = ref('');
  const allData: any = reactive({
    properties: [],
    events: [],
    services: [],
    productKey: '',
    _ppk: {},
  });

  const setAttrFormData = (data: {}) => AttrRef.value?.setFormData(data);
  const setServiceFormData = (data: {}) => ServiceRef.value?.setFormData(data);
  const setEventsFormData = (data: {}) => EventsRef.value?.setFormData(data);
  const enums = {
    attr: setAttrFormData,
    service: setServiceFormData,
    events: setEventsFormData,
  };
  function action(val, data) {
    let F = enums[val];
    F(data);
  }
  const dynamicData = (t, a, s, e) => {
    switch (t) {
      case 'attr':
        activeKey.value = '1';
        action(t, a);
        attrDisable.value = false;
        serveiceDisable.value = true;
        eventDisable.value = true;
        break;
      case 'service':
        activeKey.value = '2';
        action(t, s);
        attrDisable.value = true;
        serveiceDisable.value = false;
        eventDisable.value = true;
        break;
      case 'events':
        activeKey.value = '3';
        action(t, e);
        attrDisable.value = true;
        serveiceDisable.value = true;
        eventDisable.value = false;
        break;
    }
  };
  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    handleCancel(false);
    isUpdate.value = data.isUpdate;
    isViewDetail.value = data.isView;
    isText.value = data.isText;
    dType.value = data.record?.dType;
    if (!unref(isViewDetail)) {
      const title = !unref(isUpdate) ? '编辑物模型' : '新增物模型';
      if (!unref(isUpdate)) {
        nextTick(() => {
          dynamicData(dType.value, mockData.properties, mockData.services, mockData.events);
        });
      }
      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
    } else {
      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
      nextTick(() => {
        dynamicData(dType.value, mockData.properties, mockData.services, mockData.events);
      });
    }
    setModalProps({ loading: false });
  });
  const handleCancel = (flag) => {
    AttrRef.value?.resetFormData();
    ServiceRef.value?.resetFormData();
    EventsRef.value?.resetFormData();
    activeKey.value = '1';
    allData.properties = [];
    allData.events = [];
    allData.services = [];
    attrDisable.value = false;
    serveiceDisable.value = false;
    eventDisable.value = false;
    if (flag) {
      closeModal();
    }
  };
  const handleSubmit = async () => {
    if (activeKey.value == '1') {
      const valueAttr = await AttrRef.value?.getFormData();
      allData.properties.push(valueAttr);
    } else if (activeKey.value == '2') {
      const valueService = await ServiceRef.value?.getFormData();
      allData.services.push(valueService);
    } else {
      const valueEvents = await EventsRef.value?.getFormData();
      allData.events.push(valueEvents);
    }
    console.log('搜集值', allData);
    closeModal();
  };
</script>

<style lang="less" scope></style>