<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="1000px"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
    <AddTriggerForm ref="getTriggerChildData" :deviceInfo="getDeviceInfo" />
    <AddConditiForm ref="getConditionChildData" :deviceInfo1="getDeviceInfo1" />
    <AddActionForm ref="getChildData" :deviceInfo2="getDeviceInfo2" />
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, watch, getCurrentInstance } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema, getData } from './config.d';
  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 AddActionForm from './addForm/doaction.vue';
  import AddConditiForm from './addForm/condition.vue';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: { BasicDrawer, BasicForm, AddTriggerForm, AddActionForm, AddConditiForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const { proxy } = getCurrentInstance();
      const getChildData = ref(null);
      const getTriggerChildData = ref(null);
      const getConditionChildData = ref(null);
      const { createMessage } = useMessage();
      const isUpdate = ref(true);
      let doConditionsArray: any[] = reactive([]);
      let doActionsArray: any[] = reactive([]);
      let triggersArray: any[] = reactive([]);
      let getAllFormData: any = reactive({});
      let getValuesFormData: any = reactive({});
      let getId = ref('');
      let getDeviceInfo = ref(null);
      let getDeviceInfo1 = ref(null);
      let getDeviceInfo2 = ref(null);

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

      watch(getData, (newV) => {
        getDeviceInfo.value = newV;
        getDeviceInfo1.value = newV;
        getDeviceInfo2.value = newV;
      });

      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        console.log(data);
        await resetFields();
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;

        if (!unref(isUpdate)) {
          proxy.$refs.getTriggerChildData.clearSelectDevice();
          proxy.$refs.getChildData.clearSelectDevice();
          proxy.$refs.getConditionChildData.clearSelectDevice();
          proxy.$refs.getChildData.funcResetFields();
          proxy.$refs.getTriggerChildData.funcResetFields();
          proxy.$refs.getConditionChildData.funcResetFields();
        }
        //编辑
        if (unref(isUpdate)) {
          getId.value = data.record.id;
          await setFieldsValue({
            ...data.record,
          });
          let newMap = null;
          let newFilterMap = null;
          let newTwoFilterMap = null;
          let newFilterTwoFilterMap = null;
          const options = await screenLinkPageByDeptIdGetDevice({
            organizationId: data.record.organizationId,
          });
          newMap = options.items.map((m) => {
            newTwoFilterMap = data.record?.triggers.map((m1) => {
              if (m.id == m1.deviceId) {
                return {
                  value: m.id,
                  label: m.name,
                };
              }
            });

            if (m.id == data.record?.triggers[0].deviceId) {
              return {
                value: m.id,
                label: m.name,
              };
            }
          });
          newFilterMap = newMap.filter((f) => f !== undefined);
          newFilterTwoFilterMap = newTwoFilterMap.filter((f) => f !== undefined);
          proxy.$refs.getTriggerChildData.editSelectDevice(newFilterMap);
          proxy.$refs.getChildData.editSelectDevice(newFilterMap);
          proxy.$refs.getConditionChildData.editSelectDevice(newFilterMap);

          try {
            proxy.$refs.getTriggerChildData.setFieldsFormValue({
              triggerEvent: data.record.triggers[0].triggerEvent,
              attributeChoose: data.record?.triggers[0].attributeChoose,
              touchWay: data.record?.triggers[0].touchWay,
              deviceId: data.record?.triggers[0].deviceId,
              compare: data.record?.triggers[0].compare,
              value: data.record?.triggers[0].value,
              sceneLinkageId: data.record?.triggers[0].sceneLinkageId,
            });
            proxy.$refs.getConditionChildData.setFieldsFormValue({
              status: data.record?.doConditions[0].status,
              deviceId: data.record?.doConditions[0].deviceId,
              createTime: data.record?.doConditions[0].createTime,
              updateTime: data.record?.doConditions[0].updateTime,
              property: data.record?.doConditions[0].property,
              compare: data.record?.doConditions[0].compare,
              value: data.record?.doConditions[0].value,
            });
            proxy.$refs.getChildData.setFieldsFormValue({
              outTarget: data.record?.doActions[0].outTarget,
              deviceId: data.record?.doActions[0].deviceId,
              command: data.record?.doActions[0].command,
              sceneLinkageId: data.record?.doActions[0].sceneLinkageId,
            });
          } catch (e) {
            return e;
          }
        } else {
          await resetFields();
          proxy.$refs.getTriggerChildData.clearGetPushValueDataEmpty();
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增场景联动' : '编辑场景联动'));

      async function handleSubmit() {
        if (!unref(isUpdate)) {
          let res = validateFields();
          if (!res) return;
          let getChildValues = proxy.$refs.getChildData.getAllFields();
          let getTriggerChildValues = proxy.$refs.getTriggerChildData.getAllFields();
          let getconditionChildValues = proxy.$refs.getConditionChildData.getAllFields();
          doActionsArray.push(getChildValues);
          triggersArray.push(getTriggerChildValues);
          doConditionsArray.push(getconditionChildValues);
          getValuesFormData = getFieldsValue();
          Object.assign(getAllFormData, getValuesFormData);
          getAllFormData.triggers = triggersArray;
          getAllFormData.doConditions = doConditionsArray;
          getAllFormData.doActions = doActionsArray;
          //所有的表单值
          await screenLinkPageAddApi(getAllFormData);
          createMessage.success('场景联动新增成功');
          closeDrawer();
          emit('success');
        }
        if (unref(isUpdate)) {
          getValuesFormData = getFieldsValue();
          let getChildValues = proxy.$refs.getChildData.getAllFields();
          let getTriggerChildValues = proxy.$refs.getTriggerChildData.getAllFields();
          let getconditionChildValues = proxy.$refs.getConditionChildData.getAllFields();
          doActionsArray.push(getChildValues);
          triggersArray.push(getTriggerChildValues);
          doConditionsArray.push(getconditionChildValues);
          getValuesFormData.id = getId.value;
          Object.assign(getAllFormData, getValuesFormData);
          getAllFormData.triggers = triggersArray;
          getAllFormData.doConditions = doConditionsArray;
          getAllFormData.doActions = doActionsArray;
          await screenLinkPageUpdateApi(getAllFormData);
          createMessage.success('场景联动编辑成功');
          closeDrawer();
          emit('success');
        }
      }
      return {
        getConditionChildData,
        getTriggerChildData,
        getChildData,
        getDeviceInfo,
        getDeviceInfo1,
        getDeviceInfo2,
        getAllFormData,
        registerDrawer,
        registerForm,
        getTitle,
        handleSubmit,
      };
    },
  });
</script>