<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      showFooter
      @ok="handleSubmit"
      width="100vw"
      @close="handleClose"
      :title="title"
    >
      <div>
        <!-- 基础表单 -->
        <BasicForm @register="registerForm" />
        <!-- 基础表单 -->
        <!-- 触发器-begin -->
        <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"> 添加触发器</a-button>
          <!-- 按钮 -->
        </div>
        <!-- 触发器-end -->

        <!-- 执行条件-begin -->
        <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"> 添加执行条件</a-button>
          <!-- 按钮 -->
        </div>
        <!-- 执行条件-end -->

        <!-- 执行动作-begin -->
        <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"> 添加执行动作</a-button>
          <!-- 按钮 -->
        </div>
        <!-- 执行动作-end -->
      </div>
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  import { defineComponent, 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 { formatTriggerData, formatConditionData } from './cpns/format-data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import {
    screenLinkPageAddApi,
    screenLinkPageByDeptIdGetDevice,
  } from '/@/api/ruleengine/ruleengineApi';
  import Trigger from './cpns/Trigger.vue';
  import Condition from './cpns/Condition.vue';
  import Action from './cpns/Action.vue';
  export default defineComponent({
    name: 'SceneLinkAgeDrawer',
    components: {
      BasicDrawer,
      BasicForm,
      Trigger,
      Condition,
      Action,
    },
    emits: ['register', 'success'],
    setup(_, { emit }) {
      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 ? '编辑' : '新增'}场景联动`);
      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 [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
        labelWidth: 120,
        schemas: formSchema,
        showActionButtonGroup: false,
      });
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });
        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);
            });
          });
        }
      });

      // 设置设备的options
      const setEditFields = (linkAge, deviceList) => {
        unref(linkAge).map((item) => {
          item.updateFieldDeviceId(deviceList);
        });
      };
      // 监听组织变化更新设备列表
      const deviceList = 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);
      });

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

      // 添加触发器
      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 formatTriggerData(item.getFieldsValueFunc());
        });
        getConditionFormValue.value = unref(skipUnwrap.conditionItemRefs).map((item) => {
          return formatConditionData(item.getFieldsValueFunc());
        });
        getActionFormValue.value = unref(skipUnwrap.actionItemRefs).map((item) => {
          return item.getFieldsValueFunc();
        });
      };
      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),
            doConditions: unref(getConditionFormValue),
            doActions: unref(getActionFormValue),
            ...{
              id: unref(id),
              tenantId: unref(tenantId),
            },
          };
          await screenLinkPageAddApi(postAddOrEditData, unref(isUpdate));
          createMessage.success(`${unref(isUpdate) ? '编辑' : '新增'}成功`);
          closeDrawer();
          handleClose();
          emit('success');
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      };

      // 删除
      const deleteTrigger = (triggerIndex: number) => {
        unref(triggerData).splice(triggerIndex, 1);
      };
      const deleteCondition = (conditionIndex: number) => {
        unref(conditionData).splice(conditionIndex, 1);
      };
      const deleteAction = (actionIndex: number) => {
        unref(actionData).splice(actionIndex, 1);
      };
      const handleClose = () => {
        id.value = undefined;
        tenantId.value = undefined;
        organizationId.value = undefined;
        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();
        });
      };

      return {
        title,
        isUpdate,
        registerDrawer,
        registerForm,
        // 添加 or 删除 触发器,条件,动作
        triggerData,
        conditionData,
        actionData,
        addCondition,
        addTrigger,
        addAction,
        deleteTrigger,
        deleteCondition,
        deleteAction,
        // Refs引用
        skipUnwrap,
        handleSubmit,
        handleClose,
      };
    },
  });
</script>