<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <template #detail>
        <a-form ref="formRef" :model="modelRef">
          <a-row>
            <a-col :span="24">
              <a-form-item name="word" label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input allow-clear :rules="formRules.word" v-model:value="modelRef.word" placeholder="请输入关键词" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="translateWord" label="关键词翻译" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input allow-clear v-model:value="modelRef.translateWord" placeholder="请输入关键词翻译" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="blackOrWhiteList" label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select allow-clear v-model:value="modelRef.blackOrWhiteList" placeholder="请选择黑白名单">
                  <a-select-option :value="0">黑名单</a-select-option>
                  <a-select-option :value="1">白名单</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="useStatus" label="作用域" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select allow-clear v-model:value="modelRef.useStatus" placeholder="请选择作用域">
                  <a-select-option :value="0">询盘关键词</a-select-option>
                  <a-select-option :value="1">OpenAi关键词</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item allow-clear name="isEnable" label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-model:value="modelRef.isEnable" placeholder="请选择是否启用该关键词">
                  <a-select-option :value="1">启用</a-select-option>
                  <a-select-option :value="0">停用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
              <a-button @click="submitForm">提 交</a-button>
            </a-col>
          </a-row>
        </a-form>
      </template>
    </j-form-container>
  </a-spin>
</template>

<script lang="ts" setup name="AdwebEnquiryRuleForm">
  import { httpAction } from '/@/api/manage/manage';
  import pick from 'lodash.pick';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { useMessage } from '@/hooks/web/useMessage';

  import { computed, reactive, ref } from 'vue';
  import { any } from 'vue-types';

  const emit = defineEmits(['ok', 'close']);

  const { createMessage } = useMessage();

  const props = defineProps({
    //流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false,
    },
    //表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false,
    },
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  });

  let modelRef = reactive({ id: '', word: '', translateWord: '', blackOrWhiteList: any, useStatus: any, isEnable: any });

  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 5 },
  });

  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });

  const confirmLoading = ref(false);

  const url = reactive({
    add: '/adweb/adwebEnquiryRule/add',
    edit: '/adweb/adwebEnquiryRule/edit',
    queryById: '/adweb/adwebEnquiryRule/queryById',
  });

  const formRules = reactive({
    word: [
      { required: true, message: '请输入关键词' },
      { max: 100, message: '关键词长度不能超过100' },
    ],
    useStatus: [{ required: true, message: '请选择作用域' }],
    blackOrWhiteList: [{ required: true, message: '请选择黑白名单' }],
    isEnable: [{ required: true, message: '请选择是否启用该关键词' }],
  });

  const formRef = ref();
  // 定义一个计算属性
  const formDisabled = computed(() => {
    if (props.formBpm === true) {
      return props.formData.disabled !== false;
    }
    return props.disabled;
  });

  const showFlowSubmitButton = computed(() => {
    if (props.formBpm === true) {
      if (props.formData.disabled === false) {
        return true;
      }
    }
    return false;
  });

  function add() {
    edit({});
  }

  function edit(record) {
    if (Object.keys(record).length === 0) {
      formRef.value.resetFields();
      modelRef = reactive({ id: '', word: '', translateWord: '', blackOrWhiteList: 0, useStatus: 0, isEnable: 1 });
    } else {
      console.log(record, 'record');
      Object.assign(modelRef, pick(record, 'id', 'word', 'translateWord', 'blackOrWhiteList', 'useStatus', 'isEnable'));
    }
  }

  async function submitForm() {
    // 触发表单验证
    await formRef.value.validateFields();
    confirmLoading.value = true;

    let httpurl = '';
    let method = '';
    if (!modelRef.id) {
      httpurl += url.add;
      method = 'post';
    } else {
      httpurl += url.edit;
      method = 'put';
    }

    console.log('表单提交数据', modelRef);
    httpAction(httpurl, modelRef, method)
      .then((res) => {
        if (res.code === 200) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }

  defineExpose({ add, edit, submitForm });
</script>
