<template>
  <CollapseContainer style="background-color: #f2f2f2" :title="`执行动作 ${actionIndex + 1}`">
    <template #action>
      <Tooltip title="移除" v-if="actionData.length > 1">
        <Icon
          icon="fluent:delete-off-20-regular"
          size="20"
          class="mr-2 cursor-pointer"
          @click="handleDelete(actionIndex)"
        />
      </Tooltip>
    </template>
    <BasicForm @register="registerAction">
      <template #outTarget="{ model, field }">
        <Select
          :options="options"
          v-model:value="model[field]"
          @change="changeOutTarget"
          placeholder="请选择执行动作"
          allowClear
      /></template>
      <template #doContext>
        <div class="flex">
          <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
          <Tooltip
            title='{"method":"setDOValue","params":{"devID":"492S211218028819","data":{"DO1":1}}}'
            class="ml-2"
          >
            <QuestionCircleOutlined style="font-size: 1rem" />
          </Tooltip>
        </div>
      </template>
      <template #clearAlarm>
        <Checkbox v-model:checked="checked" @change="handleCheckedChange"> 清除告警 </Checkbox>
        <Tooltip title="清除告警与触发器一一对应">
          <QuestionCircleOutlined />
        </Tooltip>
      </template>
    </BasicForm>
    <template v-for="(item, index) in clearRuleList" :key="item">
      <Card
        :bordered="false"
        style="border: 2px dashed #d9d9d9; margin-top: 1rem"
        :bodyStyle="{ padding: 0 }"
      >
        <ClearAlarm
          :clearRuleList="clearRuleList"
          :index="index"
          :ref="refItem.clearRuleRefs"
          @delete="deleteClearRule"
        />
      </Card>
    </template>

    <a-button v-if="checked && isAddClearRule" class="mt-4" type="primary" @click="addClearRule"
      >新增清除告警</a-button
    >
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick, unref, computed, provide } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Tooltip, Select, Checkbox, Card } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { actionSchema } from '../config/config.data.ts';
  import jsoneditor from 'jsoneditor';
  import 'jsoneditor/dist/jsoneditor.min.css';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import ClearAlarm from './ClearAlarm.vue';

  const props = defineProps({
    actionIndex: {
      type: Number,
      required: true,
    },
    actionData: {
      type: Array,
      default: () => [],
    },
    triggerData: {
      type: Array,
      default: () => [],
    },
    deviceList: {
      type: Array,
      required: true,
    },
    arr: {
      type: Array,
      default: () => [],
    },
  });
  const isAddClearRule = computed(() => clearRuleList.value.length < props.triggerData.length);
  const refItem = {
    clearRuleRefs: ref([]),
  };
  const emit = defineEmits(['deleteAction', 'getActionFormArr']);
  const options = computed(() => {
    return [
      { label: '设备输出', value: 'DEVICE_OUT' },
      {
        label: '告警输出',
        value: 'MSG_NOTIFY',
        disabled:
          props.arr.filter((item) => item.outTarget === 'MSG_NOTIFY').length ||
          !props.triggerData.length,
      },
    ];
  });
  const changeOutTarget = () => {
    emit('getActionFormArr');
  };
  const [registerAction, { getFieldsValue, resetFields, updateSchema, setFieldsValue, validate }] =
    useForm({
      schemas: actionSchema,
      showActionButtonGroup: false,
    });

  // 获取整个执行动作表单值
  const getFieldsValueFunc = () => {
    const clearRule = refItem.clearRuleRefs.value.map((item) => {
      const predicate = item.conditionScreeningRef?.refItem?.conditionScreeningRefs?.value?.map(
        (item) => item.getFieldsValue()
      );
      return {
        ...item.getFieldsValue(),
        predicate,
        schedule: item.alarmScheduleRef.scheduleData,
      };
    });
    return {
      ...getFieldsValue(),
      doContext: unref(jsonInstance.value)?.get(),
      clearRule,
    };
  };

  const setFieldsFormValueFun = (fieldsValue) => {
    setFieldsValue(fieldsValue);
  };
  const resetFieldsValueFunc = () => resetFields();
  const updateFieldDeviceId = (deviceList) => {
    updateSchema({
      field: 'deviceId',
      componentProps: {
        options: deviceList,
      },
    });
  };
  const updateEditFieldAlarmConfig = (alarmConfigList) => {
    updateSchema({
      field: 'alarm_config',
      componentProps: {
        options: alarmConfigList,
      },
    });
  };
  const updateFieldAlarmConfig = (alarmConfigList) => {
    updateSchema({
      field: 'alarm_config',
      componentProps: {
        options: alarmConfigList,
      },
    });
  };

  const checked = ref(false);
  const validateForm = () => {
    return validate();
  };

  const handleDelete = (actionIndex) => {
    emit('deleteAction', actionIndex);
  };

  const clearRuleList = ref([]);
  const handleCheckedChange = (e: Event) => {
    if (!e.target.checked) {
      clearRuleList.value = [];
    } else {
      addClearRule();
    }
  };
  const addClearRule = () => {
    unref(clearRuleList).push(Date.now());
    nextTick(() => {
      setFields(refItem.clearRuleRefs);
    });
  };

  function setFields(refs) {
    unref(refs).map((item) => {
      item.updateFieldDeviceId(props.deviceList);
    });
  }
  const deleteClearRule = (index) => {
    unref(clearRuleList).splice(index, 1);
  };

  // json 以及初始化JSON
  const jsoneditorRef = ref();
  const jsonValue = ref({});
  const jsonInstance = ref();
  onMounted(() => {
    nextTick(() => {
      let options = {
        mode: 'code',
        mainMenuBar: false,
        statusBar: false,
      };
      let editor = new jsoneditor(jsoneditorRef.value, options);
      editor.set(jsonValue.value);
      jsonInstance.value = editor;
    });
  });

  const getJsonValue = () => unref(jsonInstance).get();
  const setJsonValue = (Json) => {
    nextTick(() => {
      unref(jsonInstance).set(Json);
    });
  };

  const operationType = ref<string>('');
  provide('operationType', operationType);

  const getRefItemConditionScreeningRefs = async () => {
    await nextTick();
    return refItem.clearRuleRefs.value.map(
      (item) => item.conditionScreeningRef.refItem.conditionScreeningRefs
    );
  };
  const setConditionScreeningList = (list) => {
    refItem.clearRuleRefs.value.map((item) => {
      item.conditionScreeningRef.conditionScreeningList = list;
    });
  };

  const setRichText = (list, index) => {
    refItem.clearRuleRefs.value[index].conditionScreeningRef.otherAttribute = list;
  };

  defineExpose({
    getFieldsValue,
    getFieldsValueFunc,
    setFieldsFormValueFun,
    resetFieldsValueFunc,
    updateFieldDeviceId,
    updateFieldAlarmConfig,
    validateForm,
    getJsonValue,
    setJsonValue,
    jsonInstance,
    updateEditFieldAlarmConfig,
    checked,
    getRefItemConditionScreeningRefs,
    setConditionScreeningList,
    setRichText,
    refItem,
    clearRuleList,
  });
</script>

<style>
  .jsoneditor {
    border: none;
  }
</style>