<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
          :disabled="hasDisabled"
      /></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"> 清除告警 </Checkbox>
      </template>
    </BasicForm>
    <Card
      v-if="checked"
      :bordered="false"
      style="border: 2px dashed #797979"
      :bodyStyle="{ padding: 0 }"
    >
      <ClearAlarm ref="clearAlarmRef" />
    </Card>
  </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';
  import jsoneditor from 'jsoneditor';
  import 'jsoneditor/dist/jsoneditor.min.css';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store/modules/user';
  import ClearAlarm from './ClearAlarm.vue';
  defineProps({
    actionIndex: {
      type: Number,
      required: true,
    },
    actionData: {
      type: Array,
      default: () => [],
    },
  });
  const emit = defineEmits(['deleteAction']);
  const userStore = useUserStore();
  const options = computed(() => {
    return [
      { label: '设备输出', value: 'DEVICE_OUT' },
      { label: '告警输出', value: 'MSG_NOTIFY', disabled: userStore.getOutTarget === 'MSG_NOTIFY' },
    ];
  });
  const hasDisabled = ref(false);
  const outTarget = ref('');
  const changeOutTarget = (value: string) => {
    outTarget.value = value;
    if (value === 'MSG_NOTIFY') {
      hasDisabled.value = true;
      userStore.setOutTarget(value);
    }
  };
  const [registerAction, { getFieldsValue, resetFields, updateSchema, setFieldsValue, validate }] =
    useForm({
      schemas: actionSchema,
      showActionButtonGroup: false,
    });

  // 获取整个执行动作表单值
  const getFieldsValueFunc = () => {
    const predicate =
      clearAlarmRef?.value?.conditionScreeningRef?.refItem?.conditionScreeningRefs?.value?.map(
        (item) => item.getFieldsValue()
      );
    console.log({
      ...getFieldsValue(),
      ...clearAlarmRef?.value?.getFieldsValue(),
      predicate,
      doContext: unref(jsonInstance.value).get(),
      schedule: clearAlarmRef?.value?.schedule,
    });
    return {
      ...getFieldsValue(),
      ...clearAlarmRef?.value?.getFieldsValue(),
      predicate,
      doContext: unref(jsonInstance.value).get(),
      schedule: clearAlarmRef?.value?.schedule,
    };
  };
  const setFieldsFormValueFun = (fieldsValue) => {
    setFieldsValue(fieldsValue);
  };
  const resetFieldsValueFunc = () => resetFields();
  const updateFieldDeviceId = (deviceList) => {
    updateSchema({
      field: 'deviceId',
      componentProps: {
        options: deviceList,
      },
    });
  };
  const updateFieldAlarmConfig = (alarmConfigList) => {
    updateSchema({
      field: 'alarm_config',
      componentProps: {
        options: alarmConfigList,
      },
    });
    hasDisabled.value = false;
    userStore.setOutTarget('DEVICE_OUT');
  };

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

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

  // 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>('');
  const clearAlarmRef = ref();
  provide('operationType', operationType);
  defineExpose({
    getFieldsValueFunc,
    setFieldsFormValueFun,
    resetFieldsValueFunc,
    updateFieldDeviceId,
    updateFieldAlarmConfig,
    validateForm,
    getJsonValue,
    setJsonValue,
    jsonInstance,
  });
</script>

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