<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <template #detail>
        <a-form ref="formRef" :model="formModel">
          <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="word" label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input allow-clear v-model:value="formModel.word" :rules="formRules.word" placeholder="请输入关键词" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="blackOrWhite" label="黑白名单" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select allow-clear v-model:value="formModel.blackOrWhite" :rules="formRules.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="AdwebEnquirySiteRuleForm">
  import { httpAction, getAction } from '/@/api/manage/manage';
  import pick from 'lodash.pick';

  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { computed, 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: '', word: '', blackOrWhite: '', siteId: '', siteCode: '' });
  const { createMessage } = useMessage();
  const confirmLoading = ref(false);

  const formRules = reactive({
    siteId: {
      rules: [{ required: true, message: '请选择站点' }],
      trigger: 'change',
    },
    word: {
      rules: [
        { required: true, message: '请输入关键词' },
        { max: 100, message: '关键词长度不能超过100' },
      ],
      trigger: 'blur',
    },
    blackOrWhite: {
      initialValue: 0,
      rules: [{ required: true, message: '请选择黑白名单' }],
    },
  });

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

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

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

  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', 'word', 'blackOrWhite', 'createTime'));
    }
  }

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

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

    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>
