<template>
  <a-modal
    :width="900"
    v-model:visible="state.startWorkDialog"
    :title="title"
    :maskClosable="false"
    destroyOnClose
    @cancel="handleClose"
    @ok="handleSubmit"
  >
    <div class="box">
      <NodeHead class="mb-4" :nodeName="t('基础信息')" />
      <div class="row">
        <div class="col">
          <span class="label">是否启用:</span>
          <a-switch v-model:checked="state.startWorkConfig.enabled" />
        </div>
        <div class="col">
          <span class="label">新增即审批:</span>
          <a-switch v-model:checked="state.startWorkConfig.enabledAddApprove" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <span class="label"> 添加流程:</span>
          <PickTemplateFlow
            :single="false"
            :list="
              state.startWorkConfig &&
              state.startWorkConfig.config &&
              state.startWorkConfig.config.id
                ? [state.startWorkConfig.config]
                : []
            "
            @change="add"
            style="flex: 1"
          >
            <InputModel
              :value="
                state.startWorkConfig &&
                state.startWorkConfig.config &&
                state.startWorkConfig.config.id
                  ? '已配置'
                  : '请点击选择流程模板'
              "
              :placeholder="t('添加流程')"
              style="width: 100%; min-width: 100px"
            />
          </PickTemplateFlow>
        </div>
      </div>
      <NodeHead class="mb-4" :nodeName="t('注意事项')" />
      <div class="remark">
        <p>{{ t('1.新增即审批是当表单新增成功后，自动发起审批流程。') }}</p>
        <p>
          {{ t('2.“表单发起审批”功能会针对“系统表单”、“自定义表单”的列表页生成“发起审批”按钮。') }}
        </p>
        <p>
          {{
            t(
              '3.点击“发起审批”按钮会自动使用选择的列表数据填充相应表单，如果流程不存在选择的表单，则不进行任何处理。',
            )
          }}
        </p>
        <p>
          {{
            t(
              '4.流程进入审批状态后，隐藏“发起审批”按钮，并使用流程状态覆盖进行显示，状态包括“审批中”、“审批完成”。',
            )
          }}
        </p>
        <p>
          {{ t('5.仅允许关联一个流程模板，流程模板也仅允许关联一个功能表单。') }}
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import PickTemplateFlow from './PickTemplateFlow.vue';
  import { InputModel } from '/@/components/ApiConfig';
  import { SchemaInitConfig } from '/@/model/generator/listConfig';
  const { t } = useI18n();

  const props = defineProps({
    startWorkConfig: {
      type: Object as PropType<SchemaInitConfig>,
    },
    startWorkDialog: { type: Boolean },
    title: { type: String },
  });
  const emit = defineEmits(['update:startWorkDialog', 'update:startWorkConfig']);

  const state = reactive({
    startWorkDialog: props.startWorkDialog as boolean,
    startWorkConfig: {
      enabled: false,
      enabledAddApprove: false,
      config: {},
    } as SchemaInitConfig,
  });

  onMounted(() => {
    if (props.startWorkConfig) {
      state.startWorkConfig = props.startWorkConfig;
    }
  });
  //添加流程模板
  function add(tempList) {
    if (tempList.length > 0) {
      state.startWorkConfig.config = tempList[0];
    }
  }
  const handleClose = () => {
    emit('update:startWorkDialog', false);
  };

  const handleSubmit = () => {
    emit('update:startWorkConfig', state.startWorkConfig);
    emit('update:startWorkDialog', false);
  };
</script>

<style lang="less" scoped>
  .list-title {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 10px;
  }

  .required-icon {
    color: red;
  }

  .footer-container {
    display: flex;
    justify-content: space-between;
  }

  :deep(.ant-tabs-nav) {
    margin: 10px 0 5px 10px;
  }

  .remark {
    font-size: 14px;
    line-height: 21px;

    p {
      margin-bottom: 16px;
    }
  }

  .box {
    padding: 20px;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;

      .col {
        flex-basis: 50%;
        display: flex;
        align-items: center;

        .label {
          font-size: 14px;
          margin-right: 10px;
        }
      }
    }
  }
</style>
