<template>
  <h-modal
    centered
    id="FormBuilderSaveMode-queryModal"
    v-model:visible="visible"
    :title="t('FormDesign.common.save')"
    width="886px"
    wrap-class-name="full-modal"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <h-form
      size="mini"
      :layout="hFormGlobalConfig.layout"
      :labelCol="{
        ...hFormGlobalConfig.labelCol,
        style: { width: '150px' },
      }"
    >
      <div class="save-instructions">
        <HIcon name="hoteam-warning-outline" color="#3979f9"></HIcon>
        <span class="save-instructions-title">{{ t('FormDesign.common.saveTips') }}</span>
        <div>
          <span class="save-instructions-content">
            {{ t('FormDesign.common.saveTipChange') }}
          </span>
          <br />
          <span class="save-instructions-content">
            {{ t('FormDesign.common.saveTipSaveAs') }}
          </span>
        </div>
      </div>
      <h-form-item
        style="display: none"
        :label="t('FormDesign.common.saveType')"
        :rules="[{ required: true, message: t('FormDesign.common.tipSaveType') }]"
      >
        <h-radio-group v-model:value="value" @change="radioChange">
          <h-radio value="1">{{ t('FormDesign.common.revision') }}</h-radio>
          <h-radio value="2">{{ t('FormDesign.common.saveAs') }}</h-radio>
        </h-radio-group>
      </h-form-item>
      <h-form-item
        :label="t('FormDesign.common.setMajor')"
        :rules="[{ required: true, message: t('FormDesign.common.tipSetMajor') }]"
        v-if="!showName"
      >
        <h-radio-group v-model:value="primaryVersion">
          <h-radio value="1">{{ t('FormDesign.common.yes') }}</h-radio>
          <h-radio value="0">{{ t('FormDesign.common.no') }}</h-radio>
        </h-radio-group>
      </h-form-item>
      <h-form-item
        :label="t('FormDesign.common.newFormName')"
        v-show="showName"
        :rules="[
          { required: true, message: t('workflow.common.inputPlaceholder') },
          {
            pattern: new RegExp(/^[0-9a-zA-Z_\u4e00-\u9fa5]{1,}$/, 'g'),
            trigger: 'change',
            message: t('FormDesign.common.tipInputNameReg'),
          },
        ]"
      >
        <h-input v-model:value="flowTemplateName" :maxLength="60" />
      </h-form-item>
    </h-form>
    <template #footer>
      <h-button @click="cancelClick">
        {{ t('FormDesign.common.cancel') }}
      </h-button>
      <h-button type="primary" html-type="submit" style="margin-left: 10px" @click="okClick">
        {{ t('FormDesign.common.confirm') }}
      </h-button>
    </template>
  </h-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useI18n } from '@crami/locale';
import { hFormGlobalConfig } from '@/settings/config';
import { useHttp } from '@crami/http';
export default defineComponent({
  name: 'FormBuilderSave',
  // emits: ['flowSaveSuccess'],
  props: {
    onFormBuilderSave: {
      type: Function,
      default: undefined,
    },
  },
  setup(props) {
    const visible = ref(false);

    const { t } = useI18n();

    const value = ref<string>('1');
    const primaryVersion = ref<string>('1');
    const showName = ref<boolean>(false);

    const flowTemplateName = ref('');
    const show = data => {
      visible.value = true;
      flowTemplateName.value = data?.name ?? '';
    };

    const radioChange = (e: Event) => {
      console.log(e);
      if (value.value == '2') {
        showName.value = true;
      } else {
        showName.value = false;
      }
    };

    //流程名称-唯一性验证
    const varifyNameUnique = (_, val) => {
      if (val == '') {
        return Promise.reject(t('FormDesign.common.tipInputName'));
      }
      return new Promise((resolve, reject) => {
        useHttp({
          url: '/api/platform-base-workflow/admin/flow/flowOnlineOperation/verifyProcessNameUnique',
          method: 'post',
          params: {
            processName: val,
          },
        })
          .then(res => {
            if (res.code == '200') {
              resolve(true);
            } else {
              reject(res.msg);
            }
          })
          .catch(error => {
            reject(error);
          });
      });
    };

    const okClick = () => {
      // 吧保存方式，是否设为主版本传出去
      props.onFormBuilderSave({
        mode: value.value,
        primaryVersion: primaryVersion.value,
        name: flowTemplateName.value,
      });
      cancelClick();
    };

    const cancelClick = () => {
      flowTemplateName.value = '';
      visible.value = false;
    };

    return {
      t,
      value,
      primaryVersion,
      radioChange,
      showName,
      flowTemplateName,

      okClick,
      cancelClick,

      show,
      visible,

      hFormGlobalConfig,

      varifyNameUnique,
    };
  },
});
</script>
<style lang="less" scoped>
.save-instructions {
  background-color: #e8f0fd;
  padding: 8px 20px;
  border-radius: 4px;

  .h-div-icon {
    margin-right: 9px;
  }
  .save-instructions-title {
    color: #666;
  }
  .save-instructions-content {
    color: #999;
  }
}
.ant-divider.ant-divider-horizontal {
  margin-bottom: 0;
}
</style>
