<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">{{ useBlockPhysicalContent }}</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';
  import useCommon from './hook/useCommon';
  import { IAllData } from './types';

  defineEmits(['register']);

  const attrDisable = ref(false);

  const serveiceDisable = ref(false);

  const eventDisable = ref(false);

  const { useBlockPhysicalContent } = useCommon();

  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 = reactive<IAllData>({
    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);
  }

  function dynamicDisable(a, s, e) {
    attrDisable.value = a;
    serveiceDisable.value = s;
    eventDisable.value = e;
  }

  function dynamicActive(n, callback) {
    activeKey.value = n;
    callback;
  }

  const dynamicData = (t, a, s, e) => {
    switch (t) {
      case 'attr':
        dynamicActive('1', action(t, a));
        dynamicDisable(false, true, true);
        break;
      case 'service':
        dynamicActive('2', action(t, s));
        dynamicDisable(true, false, true);
        break;
      case 'events':
        dynamicActive('3', action(t, e));
        dynamicDisable(true, true, 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>