<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <template #detail>
        <a-form ref="formRef" :model="formModel">
          <div class="ant-alert ant-alert-info" style="color: #e74c3c">
            <span> 禁止以{{ noEnquiryBlack }}单个字符作为黑名单邮箱</span>
          </div>
          <a-row>
            <a-col :span="24">
              <select-site ref="selectSiteRef" @set-site-info="getSiteList" select-width="100%" />
            </a-col>
            <a-col :span="24">
              <a-form-item name="type" label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-model:value="formModel.type" :rules="validatorRules.type" 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 label="邮箱" name="email" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model:value="formModel.email" :rules="validatorRules.email" placeholder="请输入邮箱" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="黑白名单" name="blackOrWhite" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select v-model:value="formModel.blackOrWhite" :rules="validatorRules.blackOrWhite" 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 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="EnquirySiteBlackEmailForm">
  import { getAction, httpAction } from '/@/api/manage/manage';
  import pick from 'lodash.pick';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { computed, onMounted, reactive, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import SelectSite from '@/components/Adweb/selectSite.vue';

  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,
    },
  });

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

  const formModel = reactive({ id: '', type: '', email: '', blackOrWhite: '', siteId: '', siteCode: '' });
  const { createMessage } = useMessage();
  const confirmLoading = ref(false);

  const validatorRules = reactive({
    siteId: {
      rules: [{ required: true, message: '请选择站点' }],
    },
    email: {
      rules: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    },
    blackOrWhite: {
      rules: [{ required: true, message: '请选择黑白名单' }],
    },
    type: {
      rules: [{ required: true, message: '请选择类型' }],
    },
  });

  const url = reactive({
    add: '/adweb/enquirySiteBlackEmail/add',
    edit: '/adweb/enquirySiteBlackEmail/edit',
    queryById: '/adweb/enquirySiteBlackEmail/queryById',
    getDictByDictCode: '/sys/dict/queryTableData',
  });

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

  const noEnquiryBlack = ref('.@');
  let noEnquiryBlackOption = reactive([]);

  // 定义一个计算属性
  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;
  });

  onMounted(() => {
    //如果是流程中表单，则需要加载流程表单data
  });

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

  function edit(record) {
    if (Object.keys(record).length === 0) {
      formRef.value.resetFields();
      formModel.id = '';
    } else {
      Object.assign(formModel, pick(record, 'id', 'siteId', 'siteCode', 'email', 'type', 'status', 'blackOrWhite', 'createTime', 'updateTime'));
    }
  }

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

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

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

  function getSiteList(selectedSiteInfo: any) {
    formModel.siteId = selectedSiteInfo.id;
    formModel.siteCode = selectedSiteInfo.code;
  }

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