<template>
  <Modal
    :maskClosable="false"
    width="45vw"
    title="编辑"
    @cancel="close"
    @ok="save"
    visible
    cancelText="取消"
    okText="确定"
  >
    <Form layout="vertical" :model="outputData" ref="formRef">
      <FormItem label="状态">
        <Switch checked-children="启用" un-checked-children="启用" v-model:checked="outputData.status" />
      </FormItem>
      <FormItem
        v-if="outputData.status"
        label="kafka地址"
        name="address"
        :rules="[
          {
            required: true,
            message: '请输入kafka地址'
          },
          {
            max: 64,
            message: '最多输入64个字符'
          }
        ]"
      >
        <Input v-model:value="outputData.address" placeholder="请输入kafka地址" />
      </FormItem>
      <FormItem
        v-if="outputData.status"
        label="topic"
        name="topic"
        :rules="[
          {
            required: true,
            message: '请输入topic'
          },
          {
            max: 64,
            message: '最多输入64个字符'
          }
        ]"
      >
        <Input v-model:value="outputData.topic" />
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
  import { saveOutputData } from '../../../../../../api/rule-engine/config';
  import { Form, message, Modal, FormItem, Input, Switch } from 'linker-ui-components';
  import { ref, reactive, watchEffect } from 'vue';

  const formRef = ref();
  const useForm = Form.useForm;
  const Myprops = defineProps({
    data: {
      default: ''
    }
  });
  let outputData = reactive({
    status: false,
    address: '',
    topic: ''
  });
  watchEffect(() => {
    outputData.status = Myprops.data?.data?.state?.value === 'enabled' ? true : false;
    outputData.address = Myprops.data?.data?.config?.config?.address;
    outputData.topic = Myprops.data?.data?.config?.config?.topic;
  });

  const close = () => {
    emit('closeModel');
  };
  const save = () => {
    formRef.value.validateFields().then(() => {
      saveOutputData({
        config: {
          sourceType: 'kafka',
          config: {
            ...outputData,
            state: outputData?.status ? 'enabled' : 'disable'
          }
        },
        state: outputData?.status ? 'enabled' : 'disable',
        id: Myprops?.data?.data?.id,
        sourceType: 'kafka',
        exchangeType: 'producer'
      }).then((res) => {
        if (res.status === 200) {
          message.success('操作成功');
          emit('saveSuc');
        }
      });
    });
  };
  const emit = defineEmits(['closeModel', 'saveSuc']);
</script>
<style lang="less" scoped></style>
