<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="1000px"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
    <!-- 触发器 -->
    <div>
      <template v-for="(item, index) in addTriggerPushData" :key="index">
        <div>
          <AddTriggerForm :deviceInfo="getDeviceInfo" ref="refTriggerChild" />
        </div>
        <div style="height: 3vh"></div>
      </template>
      <div
        style="
          display: flex;
          width: 13vw;
          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"
            ><PlusCircleOutlined />新增触发器</Button
          >
        </div>
        <div style="display: flex; width: 4vw; height: 4vh">
          <Button type="error" style="border-radius: 10px" class="mt-5" @click="removeTrigger"
            ><PlusCircleOutlined />删除</Button
          >
        </div>
      </div>
    </div>
    <div style="height: 5vh"></div>
    <!-- 执行条件 -->
    <div>
      <template v-for="(item, index) in addConditionPushData" :key="index">
        <div>
          <AddConditiForm :deviceInfo1="getDeviceInfo1" ref="refConditionChild" />
        </div>
        <div style="height: 3vh"></div>
      </template>
      <div
        style="
          display: flex;
          width: 13vw;
          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"
            ><PlusCircleOutlined />新增执行条件</Button
          >
        </div>
        <div style="display: flex; width: 4vw; height: 4vh">
          <Button type="error" style="border-radius: 10px" class="mt-5" @click="removeCondition"
            ><PlusCircleOutlined />删除</Button
          >
        </div>
      </div>
    </div>
    <!-- 执行动作 -->
    <div style="height: 5vh"></div>
    <div>
      <template v-for="(item, index) in addActionPushData" :key="index">
        <div>
          <AddActionForm :deviceInfo2="getDeviceInfo2" ref="refActionChild" />
        </div>
        <div style="height: 3vh"></div>
      </template>
      <div
        style="
          display: flex;
          width: 13vw;
          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"
            ><PlusCircleOutlined />新增执行动作</Button
          >
        </div>
        <div style="display: flex; width: 4vw; height: 4vh">
          <Button type="error" style="border-radius: 10px" class="mt-5" @click="removeAction"
            ><PlusCircleOutlined />删除</Button
          >
        </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 lastRefTriggerChildDataArray = 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<[]>([]);
      const { proxy } = getCurrentInstance();
      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);
      let getAllFormData: any = reactive({});
      let getValuesFormData: any = reactive({});
      let getId = ref('');
      let getTenantId = ref('');
      let getDeviceInfo = ref(null);
      let getDeviceInfo1 = ref(null);
      let getDeviceInfo2 = ref(null);

      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.refConditionChild.clearSelectDevice();
            proxy.$refs.refActionChild.clearSelectDevice();
          } catch (e) {
            return e;
          }
        }
        //编辑
        if (unref(isUpdate)) {
          getId.value = data.record.id;
          getTenantId.value = data.record.tenantId;
          await setFieldsValue({
            ...data.record,
          });
        }
      });
      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;
      };
      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 = async () => {
        getValuesFormData = await validateFields();
        refTriggerChildDataFunc();
        refConditionChildDataFunc();
        refActionChildDataFunc();
        lastRefTriggerChildDataArray.value.push(refTriggerChildData.value);
        lastRefConditionChildDataArray.value.push(refConditionChildData.value);
        lastRefActionChildDataArray.value.push(refActionChildData.value);
        const triggersObj = {
          triggers: lastRefTriggerChildDataArray.value,
        };
        const conditionsObj = {
          conditions: lastRefConditionChildDataArray.value,
        };
        const actionsObj = {
          actions: lastRefActionChildDataArray.value,
        };
        Object.assign(getAllFormData, getValuesFormData, triggersObj, conditionsObj, actionsObj);
        if (!unref(isUpdate)) {
          delete getAllFormData.id;
          delete getAllFormData.getTenantId;
        }
      };

      async function handleSubmit() {
        if (!unref(isUpdate)) {
          getDefaultValue();
          console.log(getAllFormData);
          await screenLinkPageAddApi(getAllFormData);
          createMessage.success('场景联动新增成功');
          closeDrawer();
          emit('success');
        } else {
          getDefaultValue();
          createMessage.success('场景联动编辑成功');
          closeDrawer();
          emit('success');
        }
      }
      //新增触发器
      const addTrigger = () => {
        unref(addTriggerPushData).push(addTriggerData);
        refTriggerChildDataFunc();
        lastRefTriggerChildData.value = refTriggerChildData.value;
        lastRefTriggerChildDataArray.value.push(lastRefTriggerChildData.value);
      };
      const removeTrigger = () => {
        unref(addTriggerPushData).splice(0, 1);
        lastRefTriggerChildDataArray.value.splice(0, 1);
        getAllFormData.triggers.splice(0, 1);
      };

      //新增执行条件
      const addCondition = () => {
        unref(addConditionPushData).push(addConditionData);
        refConditionChildDataFunc();
        lastRefConditionChildData.value = refConditionChildData.value;
        lastRefConditionChildDataArray.value.push(lastRefConditionChildData.value);
      };
      const removeCondition = () => {
        unref(addConditionPushData).splice(0, 1);
        lastRefConditionChildDataArray.value.splice(0, 1);
        getAllFormData.conditions.splice(0, 1);
      };

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

      return {
        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>