<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="1000px"
    @ok="handleSubmit"
  >
    <div>
      <BasicForm @register="registerForm" />
      <!-- 触发器 -->
      <div>
        <template
          v-for="(item, index) in isUpdate == false ? addTriggerPushData : editTriggerPushData"
          :key="index"
        >
          <span style="display: none">{{ item + index }}</span>
          <span style="position: relative; top: 3.2vh; left: 0.3vw">触发器{{ index + 1 }}</span>
          <div>
            <AddTriggerForm
              :editTriggerFather="isUpdate == false ? null : item"
              :newFilterMapFather="isUpdate == false ? null : newFilterMap"
              :deviceInfo="getDeviceInfo"
              ref="refTriggerChild"
            />
          </div>
          <div style="height: 3vh"></div>
        </template>
        <div
          style="
            display: flex;
            width: 11vw;
            height: 4vh;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div style="display: flex; width: 4vw; height: 4vh">
            <Button type="primary" style="border-radius: 10px" class="mt-5" @click="addTrigger"
              >新增触发器</Button
            >
          </div>
          <div style="display: flex; width: 4vw; height: 4vh">
            <Button
              v-if="addTriggerPushData.length != 0 || editTriggerPushData.length != 0"
              type="default"
              style="border-radius: 10px; background-color: rgba(237, 111, 111, 1)"
              class="mt-5"
              @click="removeTrigger"
            >
              <span style="color: white">删除</span></Button
            >
          </div>
        </div>
      </div>
      <div style="height: 5vh"></div>
      <!-- 执行条件 -->
      <div>
        <template v-for="(item, index) in addConditionPushData" :key="index">
          <span style="display: none">{{ item + index }}</span>
          <span style="position: relative; top: 3.2vh; left: 0.3vw">执行条件{{ index + 1 }}</span>

          <div>
            <AddConditiForm :deviceInfo1="getDeviceInfo1" ref="refConditionChild" />
          </div>
          <div style="height: 3vh"></div>
        </template>
        <div
          style="
            display: flex;
            width: 11vw;
            height: 4vh;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div style="display: flex; width: 4vw; height: 4vh">
            <Button type="primary" style="border-radius: 10px" class="mt-5" @click="addCondition"
              >新增执行条件</Button
            >
          </div>
          <div style="display: flex; width: 4vw; height: 4vh">
            <Button
              v-if="addConditionPushData.length != 0"
              style="border-radius: 10px; background-color: rgba(237, 111, 111, 1)"
              type="default"
              class="mt-5"
              @click="removeCondition"
            >
              <span style="color: white">删除</span></Button
            >
          </div>
        </div>
      </div>
      <!-- 执行动作 -->
      <div style="height: 5vh"></div>
      <div>
        <template v-for="(item, index) in addActionPushData" :key="index">
          <span style="display: none">{{ item + index }}</span>
          <span style="position: relative; top: 4.2vh; left: 0.65vw">执行动作{{ index + 1 }}</span>

          <div>
            <AddActionForm :deviceInfo2="getDeviceInfo2" ref="refActionChild" />
          </div>
          <div style="height: 3vh"></div>
        </template>
        <div
          style="
            display: flex;
            width: 11vw;
            height: 4vh;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div style="display: flex; width: 4vw; height: 4vh">
            <Button type="primary" style="border-radius: 10px" class="mt-5" @click="addAction"
              >新增执行动作</Button
            >
          </div>
          <div style="display: flex; width: 4vw; height: 4vh">
            <Button
              v-if="addActionPushData.length > 0"
              style="border-radius: 10px; background-color: rgba(237, 111, 111, 1)"
              type="default"
              class="mt-5"
              @click="removeAction"
            >
              <span style="color: white">删除</span></Button
            >
          </div>
        </div>
        <div style="height: 5vh"></div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, getCurrentInstance, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema, getData } from './config';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import {
    screenLinkPageAddApi,
    screenLinkPageUpdateApi,
    screenLinkPageByDeptIdGetDevice,
  } from '/@/api/ruleengine/ruleengineApi';
  import { useMessage } from '/@/hooks/web/useMessage';
  import AddTriggerForm from './addForm/trigger.vue';
  import AddConditiForm from './addForm/condition.vue';
  import AddActionForm from './addForm/doaction.vue';
  import { IAddTrigger, IAddCondition, IAddAction } from './index';
  import { Button } from '/@/components/Button';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: {
      BasicDrawer,
      BasicForm,
      AddTriggerForm,
      AddConditiForm,
      AddActionForm,
      Button,
    },
    emits: ['success', 'register', 'registerForm'],
    setup(_, { emit }) {
      const { proxy } = getCurrentInstance();
      const lastRefTriggerChildDataArray = ref<[]>([]);
      const lastEditRefTriggerChildDataArray = ref<[]>([]);
      const lastRefConditionChildDataArray = ref<[]>([]);
      const lastRefActionChildDataArray = ref<[]>([]);
      const lastRefTriggerChildData: any = ref({});
      const lastRefConditionChildData: any = ref({});
      const lastRefActionChildData: any = ref({});
      const refTriggerChildData: any = ref({});
      const refConditionChildData: any = ref({});
      const refActionChildData: any = ref({});
      const addTriggerData = reactive<IAddTrigger>({
        id: Date.now() + Math.random() + '',
        triggerEvent: '',
        deviceId: '',
        touchWay: '',
        attributeChoose: '',
        compare: '',
        value: '',
      });
      const addConditionData = reactive<IAddCondition>({
        id: Date.now() + Math.random() + '',
        status: '',
        deviceId: '',
        createTime: '',
        updateTime: '',
        property: '',
        compare: '',
        value: '',
      });
      const addActionData = reactive<IAddAction>({
        id: Date.now() + Math.random() + '',
        outTarget: '',
        deviceId: '',
        command: '',
        sceneLinkageId: '',
      });
      const addTriggerPushData = ref<[]>([]);
      const addConditionPushData = ref<[]>([]);
      const addActionPushData = ref<[]>([]);
      //edit data
      const editTriggerPushData = ref<[]>([]);
      const getChildData = ref(null);
      const refTriggerChild = ref(null);
      const refConditionChild = ref(null);
      const refActionChild = ref(null);
      const getConditionChildData = ref(null);
      const { createMessage } = useMessage();
      const isUpdate = ref(true);
      const getAllFormData: any = reactive({});
      let getValuesFormData: any = reactive({});
      const getId = ref('');
      const getTenantId = ref('');
      const getDeviceInfo = ref(null);
      const getDeviceInfo1 = ref(null);
      const getDeviceInfo2 = ref(null);
      const newFilterMap = ref<[]>([]);

      const [registerForm, { resetFields, setFieldsValue, validateFields }] = useForm({
        labelWidth: 120,
        schemas: formSchema,
        showActionButtonGroup: false,
      });

      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        await resetFields();
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        if (!unref(isUpdate)) {
          try {
            proxy.$refs.refTriggerChild.clearSelectDevice();
            proxy.$refs.refTriggerChild.clearSelectScene();
            proxy.$refs.refConditionChild.clearSelectDevice();
            proxy.$refs.refActionChild.clearSelectDevice();
          } catch (e) {
            return e;
          }
        } else {
          newFilterMap.value = [];
          clearAllArrayFunc();
          editTriggerPushData.value = [];
          lastEditRefTriggerChildDataArray.value = [];
          getId.value = data.record.id;
          getTenantId.value = data.record.tenantId;
          await setFieldsValue({
            ...data.record,
          });
          editTriggerPushData.value = data.record.triggers;
          const options = await screenLinkPageByDeptIdGetDevice({
            organizationId: data.record.organizationId,
          });
          data.record.triggers.forEach((f1) => {
            options.items.forEach((f2) => {
              if (f2.id == f1.deviceId) {
                newFilterMap.value.push({
                  value: f2.id,
                  label: f2.name,
                });
              }
            });
          });
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增场景联动' : '编辑场景联动'));

      const clearAllArrayFunc = () => {
        unref(addTriggerPushData).length = 0;
        unref(addConditionPushData).length = 0;
        unref(addActionPushData).length = 0;
        lastRefTriggerChildDataArray.value.length = 0;
        lastRefConditionChildDataArray.value.length = 0;
        lastRefActionChildDataArray.value.length = 0;
        lastEditRefTriggerChildDataArray.value.length = 0;
      };
      const resetActionsAllArrayFunc = () => {
        try {
          proxy.$refs.refActionChild.resetFieldsValueFunc();
        } catch (e) {
          return e;
        }
      };
      const clearActionsAllDevice = () => {
        try {
          proxy.$refs.refActionChild.clearSelectDevice();
        } catch (e) {
          return e;
        }
      };
      watch(getData, (newV) => {
        getDeviceInfo.value = newV;
        getDeviceInfo1.value = newV;
        getDeviceInfo2.value = newV;
      });

      //触发器方法
      const refTriggerChildDataFunc = () => {
        try {
          refTriggerChildData.value = proxy.$refs.refTriggerChild.getFieldsValueFunc();
        } catch (e) {
          return e;
        }
      };
      //执行条件方法
      const refConditionChildDataFunc = () => {
        try {
          refConditionChildData.value = proxy.$refs.refConditionChild.getFieldsValueFunc();
        } catch (e) {
          return e;
        }
      };
      //执行动作方法
      const refActionChildDataFunc = () => {
        try {
          refActionChildData.value = proxy.$refs.refActionChild.getFieldsValueFunc();
        } catch (e) {
          return e;
        }
      };

      const getDefaultValue = () => {
        if (!unref(isUpdate)) {
          delete getAllFormData.id;
          delete getAllFormData.getTenantId;
          refTriggerChildDataFunc();
          refConditionChildDataFunc();
          refActionChildDataFunc();
          lastRefTriggerChildDataArray.value.push(refTriggerChildData.value as never);
          lastRefConditionChildDataArray.value.push(refConditionChildData.value as never);
          lastRefActionChildDataArray.value.push(refActionChildData.value as never);
          //删除第一个
          lastRefTriggerChildDataArray.value.shift();
          lastRefConditionChildDataArray.value.shift();
          lastRefActionChildDataArray.value.shift();
          const triggersObj = {
            triggers: lastRefTriggerChildDataArray.value,
          };
          const conditionsObj = {
            doConditions: lastRefConditionChildDataArray.value,
          };
          const actionsObj = {
            doActions: lastRefActionChildDataArray.value,
          };
          Object.assign(getAllFormData, triggersObj, conditionsObj, actionsObj);
        } else {
          refTriggerChildDataFunc();
          refConditionChildDataFunc();
          refActionChildDataFunc();
          lastEditRefTriggerChildDataArray.value.push(refTriggerChildData.value as never);
          lastRefConditionChildDataArray.value.push(refConditionChildData.value as never);
          lastRefActionChildDataArray.value.push(refActionChildData.value as never);
          const triggersObj = {
            triggers: lastEditRefTriggerChildDataArray.value,
          };
          const conditionsObj = {
            doConditions: lastRefConditionChildDataArray.value,
          };
          const actionsObj = {
            doActions: lastRefActionChildDataArray.value,
          };
          Object.assign(getAllFormData, triggersObj, conditionsObj, actionsObj);
        }
      };

      const handleSubmit = async () => {
        if (!unref(isUpdate)) {
          getDefaultValue();
          getValuesFormData = await validateFields();
          if (!getValuesFormData) return;
          Object.assign(getAllFormData, getValuesFormData);
          await screenLinkPageAddApi(getAllFormData);
          createMessage.success('场景联动新增成功');
          closeDrawer();
          emit('success');
        } else {
          getDefaultValue();
          getValuesFormData = await validateFields();
          if (!getValuesFormData) return;
          Object.assign(getAllFormData, getValuesFormData);
          getAllFormData.id = getId.value;
          getAllFormData.tenantId = getTenantId.value;
          await screenLinkPageUpdateApi(getAllFormData);
          createMessage.success('场景联动编辑成功');
          closeDrawer();
          emit('success');
        }
      };

      //新增触发器
      const addTrigger = () => {
        if (!unref(isUpdate)) {
          unref(addTriggerPushData).push(addTriggerData as never);
          refTriggerChildDataFunc();
          lastRefTriggerChildData.value = refTriggerChildData.value;
          lastRefTriggerChildDataArray.value.push(lastRefTriggerChildData.value as never);
        } else {
          unref(editTriggerPushData).push(addTriggerData as never);
          refTriggerChildDataFunc();
          lastRefTriggerChildData.value = refTriggerChildData.value;
          lastEditRefTriggerChildDataArray.value.push(lastRefTriggerChildData.value as never);
        }
      };
      const removeTrigger = () => {
        if (!unref(isUpdate)) {
          try {
            unref(addTriggerPushData).splice(0, 1);
            lastRefTriggerChildDataArray.value.splice(0, 1);
          } catch (e) {
            return e;
          }
        } else {
          try {
            unref(editTriggerPushData).splice(0, 1);
            lastEditRefTriggerChildDataArray.value.splice(0, 1);
          } catch (e) {
            return e;
          }
        }
      };

      //新增执行条件
      const addCondition = () => {
        unref(addConditionPushData).push(addConditionData as never);
        refConditionChildDataFunc();
        lastRefConditionChildData.value = refConditionChildData.value;
        lastRefConditionChildDataArray.value.push(lastRefConditionChildData.value as never);
      };
      const removeCondition = () => {
        try {
          unref(addConditionPushData).splice(0, 1);
          lastRefConditionChildDataArray.value.splice(0, 1);
        } catch (e) {
          return e;
        }
      };

      //新增执行动作
      const defaultAddAction = () => {
        if (unref(addActionPushData).length == 0) {
          addAction();
        }
      };
      const addAction = () => {
        unref(addActionPushData).push(addActionData as never);
        refActionChildDataFunc();
        lastRefActionChildData.value = refActionChildData.value;
        lastRefActionChildDataArray.value.push(lastRefActionChildData.value as never);
      };
      const removeAction = () => {
        try {
          unref(addActionPushData).splice(0, 1);
          lastRefActionChildDataArray.value.splice(0, 1);
        } catch (e) {
          return e;
        }
      };

      return {
        newFilterMap,
        editTriggerPushData,
        isUpdate,
        clearActionsAllDevice,
        getDeviceInfo,
        getDeviceInfo1,
        getDeviceInfo2,
        resetActionsAllArrayFunc,
        addActionPushData,
        defaultAddAction,
        refActionChild,
        addAction,
        removeAction,
        addConditionPushData,
        refConditionChild,
        addCondition,
        removeCondition,
        clearAllArrayFunc,
        removeTrigger,
        addTriggerPushData,
        addTriggerData,
        addTrigger,
        getConditionChildData,
        refTriggerChild,
        getChildData,
        getAllFormData,
        registerDrawer,
        registerForm,
        getTitle,
        handleSubmit,
      };
    },
  });
</script>