<template>
  <Modal
    :centered="true"
    title="类型"
    visible
    :width="807"

    @cancel="onCancel"
    @ok="onOk"
    :maskClosable="false"
  >
    <Form ref="actionForm" :model="formModel" layout="vertical">
      <FormItem
        label="类型"
        name="type"
        :rules="[
          {
            required: true,
            message: '请选择类型'
          }
        ]"
      >
        <CardSelect
          v-model:value="formModel.type"
          :options="options.filter((item) => !(item.value === 'delay' && parallel))"
        />
      </FormItem>
      <ActionTypeComponent
        v-bind="props"
        v-if="!!actionType"
        :actionType="actionType"
        :options="actionOptions"
        @save="onPropsOk"
        @cancel="onPropsCancel"
      />
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
  import { getImage } from '@jdlinker/utils';
  // import Delay from '../Delay/index.vue';
  // import Notify from '../Notify/index.vue';
  // import Device from '../Device/index.vue';
  import { PropType, reactive, ref, watch } from 'vue';
  import { ActionsType } from '../../../typings';
  import ActionTypeComponent from './ActionTypeComponent.vue';
  import { randomString } from '@jdlinker/utils';
  import CardSelect from '../../components/CardSelect.vue';
  import { Modal, Form, FormItem } from 'linker-ui-components';

  const props = defineProps({
    branchesName: {
      type: Number,
      default: 0
    },
    thenName: {
      type: Number,
      default: 0
    },
    name: {
      type: Number,
      default: 0
    },
    data: {
      type: Object as PropType<ActionsType>,
      default: () => ({
        key: randomString()
      })
    },
    parallel: {
      type: Boolean
    },
    actionOptions: {
      type: Object,
      default: () => ({})
    }
  });

  const emit = defineEmits(['cancel', 'save']);

  const options = [
    {
      label: '设备输出',
      value: 'device',
      iconUrl: getImage('/scene/device-type.png'),
      subLabel: '配置设备调用功能、读取属性、设置属性规则'
    },
    {
      label: '消息通知',
      value: 'notify',
      iconUrl: getImage('/scene/message-type.png'),
      subLabel: '配置向指定用户发邮件、钉钉、微信、短信等通知'
    },
    {
      label: '延迟执行',
      value: 'delay',
      iconUrl: getImage('/scene/delay-type.png'),
      subLabel: '等待一段时间后，再执行后续动作'
    },
    {
      label: '触发告警',
      value: 'trigger',
      iconUrl: getImage('/scene/trigger-type.png'),
      subLabel: '配置触发告警规则，需配合“告警配置”使用'
    },
    {
      label: '解除告警',
      value: 'relieve',
      iconUrl: getImage('/scene/cancel-type.png'),
      subLabel: '配置解除告警规则，需配合“告警配置”使用'
    }
  ];

  const actionForm = ref();
  const formModel = reactive({
    type: 'device'
  });

  const actionType = ref<string>('');

  watch(
    () => props.data,
    (newVal: any) => {
      if (newVal?.executor) {
        formModel.type = (newVal?.executor === 'alarm' ? newVal?.alarm?.mode : newVal?.executor) as string;
      }
    },
    {
      immediate: true,
      deep: true
    }
  );
  const onOk = () => {
    actionForm.value.validate().then((values: any) => {
      actionType.value = values?.type;
      if (values?.type === 'relieve' || values?.type === 'trigger') {
        emit(
          'save',
          {
            // ...props.data,
            key: props.data.key,
            executor: 'alarm',
            alarm: { mode: values.type }
          },
          {}
        );
      }
    });
  };

  const onCancel = () => {
    emit('cancel');
  };

  const onPropsOk = (data: any, options?: any) => {
    emit('save', { ...data, executor: data.type }, options);
    actionType.value = '';
  };

  const onPropsCancel = () => {
    actionType.value = '';
  };
</script>
