<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      @ok="handleSubmit"
      width="100%"
      showFooter
      @close="handleClose"
      :title="title"
    >
      <div>
        <!-- 基础表单 -->
        <BasicForm @register="registerForm" />
        <!-- 基础表单 -->
        <!-- 触发器-begin -->
        <Divider orientation="left">触发器</Divider>
        <div>
          <template v-for="(item, index) in triggerData" :key="item">
            <Trigger
              class="mt-4"
              :triggerIndex="index"
              :ref="skipUnwrap.triggerItemRefs"
              @deleteTrigger="deleteTrigger"
            />
          </template>
          <!-- 按钮 -->
          <a-button type="primary" class="mt-4" @click="addTrigger" v-if="isView">
            <PlusOutlined />
            新增触发器</a-button
          >
          <!-- 按钮 -->
        </div>
        <!-- 触发器-end -->

        <!-- 执行条件-begin -->
        <Divider orientation="left">执行条件</Divider>
        <div>
          <template v-for="(item, index) in conditionData" :key="item">
            <Condition
              class="mt-4"
              :conditionIndex="index"
              :ref="skipUnwrap.conditionItemRefs"
              @deleteCondition="deleteCondition"
            />
          </template>
          <!-- 按钮 -->
          <a-button type="primary" class="mt-4" @click="addCondition" v-if="isView">
            <PlusOutlined />
            新增执行条件</a-button
          >
          <!-- 按钮 -->
        </div>
        <!-- 执行条件-end -->

        <!-- 执行动作-begin -->
        <Divider orientation="left">执行动作</Divider>
        <div>
          <template v-for="(item, index) in actionData" :key="item">
            <Action
              class="mt-4"
              :actionIndex="index"
              :actionData="actionData"
              :ref="skipUnwrap.actionItemRefs"
              @deleteAction="deleteAction"
            />
          </template>
          <!-- 按钮 -->
          <a-button type="primary" class="mt-4" @click="addAction" v-if="isView">
            <PlusOutlined />
            新增执行动作</a-button
          >
          <!-- 按钮 -->
        </div>
        <!-- 执行动作-end -->
      </div>
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, unref, computed, nextTick } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { formSchema, organizationId } from './config';
  import { BasicForm, useForm } from '/@/components/Form';
  import { genTriggerData, genConditionData, genActionData } from './cpns/format-data';
  import { Divider } from 'ant-design-vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import {
    screenLinkPageAddApi,
    screenLinkPageByDeptIdGetDevice,
    getOrganizationAlarmConfig,
  } from '/@/api/ruleengine/ruleengineApi';
  import Trigger from './cpns/Trigger.vue';
  import Condition from './cpns/Condition.vue';
  import Action from './cpns/Action.vue';
  import { useUserStore } from '/@/store/modules/user';

  const emit = defineEmits(['register', 'success']);

  const { createMessage } = useMessage();
  const triggerData = ref([]);
  const conditionData = ref([]);
  const actionData = ref([]);
  const skipUnwrap = {
    triggerItemRefs: ref([]),
    conditionItemRefs: ref([]),
    actionItemRefs: ref([]),
  };
  const title = computed(
    () => `${isUpdate.value === 3 ? '查看' : isUpdate.value ? '编辑' : '新增'}场景联动`
  );
  let getTriggerFormValue = ref([]);
  let getConditionFormValue = ref([]);
  let getActionFormValue = ref([]);
  const editEntryIdData = ref([]);
  const isUpdate = ref(false);
  const id = ref(undefined);
  const tenantId = ref(undefined);
  const isView = ref(true);
  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas: formSchema,
    showActionButtonGroup: false,
  });
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false, loading: true });
    isUpdate.value = data.isUpdate;
    if (!unref(isUpdate)) {
      resetFields();
      //初始化执行动作
      actionData.value = [Date.now()];
    } else {
      // 取值
      const {
        id: recordId,
        tenantId: recordTenantId,
        organizationId,
        triggers,
        doConditions,
        doActions,
      } = data.record;
      // 赋值
      await setFieldsValue(data.record);
      id.value = recordId;
      tenantId.value = recordTenantId;
      // 获取当前组织下的设备列表
      const options = await screenLinkPageByDeptIdGetDevice({
        organizationId,
      });
      // 生成回显时对应得组件数量
      triggerData.value = [...new Array(triggers.length).keys()];
      conditionData.value = [...new Array(doConditions.length).keys()];
      actionData.value = [...new Array(doActions.length).keys()];
      // 回显设备列表
      editEntryIdData.value = options.items.map((v) => {
        return {
          value: v.tbDeviceId,
          label: v.name,
        };
      });
      nextTick(() => {
        setEditFields(skipUnwrap.triggerItemRefs, editEntryIdData);
        setEditFields(skipUnwrap.conditionItemRefs, editEntryIdData);
        setEditFields(skipUnwrap.actionItemRefs, editEntryIdData);
      });

      // 回显触发器数据---此处是个闭包!
      triggers.forEach((trigger, index) => {
        nextTick(() => {
          unref(skipUnwrap.triggerItemRefs)[index].setFieldsFormValueFun({
            triggerType: trigger.triggerType,
            entityId: trigger.entityId,
            type1: trigger.triggerCondition?.condition[0]?.key?.type,
            type2: trigger.triggerCondition?.condition[0]?.key?.key,
            operation: trigger.triggerCondition?.condition[0]?.predicate?.operation,
            value: trigger.triggerCondition?.condition[0]?.predicate?.value?.defaultValue,
          });
        });
      });

      doConditions.forEach((item, index) => {
        nextTick(() => {
          unref(skipUnwrap.conditionItemRefs)[index].setFieldsFormValueFun({
            triggerType: item?.triggerType,
            entityId: item?.entityId,
            type: item.triggerCondition?.condition[0].key.key,
            operation: item?.triggerCondition?.condition[0]?.predicate?.operation,
            value: item?.triggerCondition?.condition[0]?.predicate?.value?.defaultValue,
          });
        });
      });

      doActions.forEach((item, index) => {
        nextTick(() => {
          unref(skipUnwrap.actionItemRefs)[index].setFieldsFormValueFun({
            outTarget: item.outTarget,
            deviceId: item.deviceId,
          });
          unref(skipUnwrap.actionItemRefs)[index].setJsonValue(item.doContext.params);
        });
      });
    }
    if (unref(isUpdate) === 3) isView.value = false;
    setDrawerProps({
      showFooter: isView.value,
      loading: false,
    });
  });

  // 设置设备的options
  const setEditFields = (linkAge, deviceList) => {
    unref(linkAge).map((item) => {
      item.updateFieldDeviceId(deviceList);
    });
  };
  // 监听组织变化更新设备列表
  const deviceList = ref([]);
  const alarmConfigList = ref([]);
  watch(organizationId, async (newValue: string) => {
    if (!newValue) return;
    const { items } = await screenLinkPageByDeptIdGetDevice({ organizationId: newValue });
    deviceList.value = items.map((item) => ({ label: item.name, value: item.tbDeviceId }));
    setFields(skipUnwrap.triggerItemRefs, true);
    setFields(skipUnwrap.conditionItemRefs, true);
    setFields(skipUnwrap.actionItemRefs, true);

    const data = await getOrganizationAlarmConfig({ organizationId: newValue });
    alarmConfigList.value = data.map((item) => ({ label: item.name, value: item.id }));
    setAlarmConfig(skipUnwrap.actionItemRefs, true);
  });

  // 根据上面组织变化动态改变触发器，执行条件,执行动作的设备值
  function setFields(linkAge, isOrganizationChange = false) {
    unref(linkAge).map((item) => {
      isOrganizationChange && item.resetFieldsValueFunc();
      item.updateFieldDeviceId(deviceList);
    });
  }

  function setAlarmConfig(linkAge, isOrganizationChange = false) {
    unref(linkAge).map((item) => {
      isOrganizationChange && item.resetFieldsValueFunc();
      item.updateFieldAlarmConfig(alarmConfigList);
    });
  }
  // 添加触发器
  const addTrigger = () => {
    unref(triggerData).push(Date.now());
    nextTick(() => {
      setFields(skipUnwrap.triggerItemRefs);
    });
  };
  // 添加执行条件
  const addCondition = () => {
    unref(conditionData).push(Date.now());
    nextTick(() => {
      setFields(skipUnwrap.conditionItemRefs);
    });
  };
  // 添加执行动作
  const addAction = () => {
    unref(actionData).push(Date.now());
    nextTick(() => {
      setFields(skipUnwrap.actionItemRefs);
    });
  };

  /**
   * 获取触发器、执行条件、执行动作表单值--多个
   */
  const getFormValueFunc = () => {
    getTriggerFormValue.value = unref(skipUnwrap.triggerItemRefs)?.map((item) => {
      return genTriggerData(item.getFieldsValueFunc());
    });
    getConditionFormValue.value = unref(skipUnwrap.conditionItemRefs).map((item) => {
      return genConditionData(item.getFieldsValueFunc());
    });
    getActionFormValue.value = unref(skipUnwrap.actionItemRefs).map((item) => {
      console.log(item.jsonInstance.get());
      return genActionData(item.getFieldsValueFunc());
    });
    console.log(getActionFormValue.value);
  };
  const handleSubmit = async () => {
    let basicFormValue = await validate();
    if (!basicFormValue) return;
    for (const item of unref(skipUnwrap.actionItemRefs)) {
      const valid = await item.validateForm();
      if (!valid) return;
    }
    try {
      setDrawerProps({ confirmLoading: true });
      getFormValueFunc();
      const postAddOrEditData = {
        ...basicFormValue,
        triggers: !unref(getTriggerFormValue).length ? null : unref(getTriggerFormValue),
        doConditions: !unref(getConditionFormValue).length ? null : unref(getConditionFormValue),
        doActions: unref(getActionFormValue).flat(),
        id: unref(id),
        tenantId: unref(tenantId),
      };
      console.log(postAddOrEditData);
      await screenLinkPageAddApi(postAddOrEditData, unref(isUpdate));
      createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);
      closeDrawer();
      handleClose();
      emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  };
  const userStore = useUserStore();
  // 删除
  const deleteTrigger = (triggerIndex: number) => {
    unref(triggerData).splice(triggerIndex, 1);
  };
  const deleteCondition = (conditionIndex: number) => {
    unref(conditionData).splice(conditionIndex, 1);
  };
  const deleteAction = ({ actionIndex, outTarget }) => {
    // console.log(actionIndex, outTarget.value);
    unref(actionData).splice(actionIndex, 1);
    if (unref(outTarget) === 'MSG_NOTIFY') {
      userStore.setOutTarget('DEVICE_OUT');
    }
  };
  const handleClose = () => {
    id.value = undefined;
    tenantId.value = undefined;
    organizationId.value = undefined;
    isView.value = true;
    getTriggerFormValue.value = [];
    getConditionFormValue.value = [];
    getActionFormValue.value = [];
    triggerData.value = [];
    conditionData.value = [];
    actionData.value = [];
    unref(skipUnwrap.triggerItemRefs).map((item) => {
      item.resetFieldsValueFunc();
    });
    unref(skipUnwrap.conditionItemRefs).map((item) => {
      item.resetFieldsValueFunc();
    });
    unref(skipUnwrap.actionItemRefs).map((item) => {
      item.resetFieldsValueFunc();
    });
    userStore.setOutTarget('DEVICE_OUT');
  };
</script>