<script lang="ts" setup>
import type { FormInst, FormRules } from 'naive-ui'
import { ref } from 'vue'
import { useMessage } from 'naive-ui'

const emit = defineEmits<{
  (e: 'commit', value: any)
}>()

const show = ref(false)

const cardStyle = {
  'width': '600px',
  '--n-padding-bottom': '10px',
  '--n-padding-left': '10px',
}

function showModal() {
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
})

const message = useMessage()
const formRef = ref<FormInst | null>(null)

const rules: FormRules = {
  packagename: [
    {
      required: true,
      trigger: ['blur'],
      message: '请输入任务包名称',
    },
  ],
}

const model = ref({
  packagename: '',
  comparehistory: false,
  mark: false,
})

function handleSumbit(e: MouseEvent) {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      emit('commit', model.value)
      closeModal()
    }
    else {
      message.error('请输入任务包名称')
    }
  })
}

const formItemStyle = {
  '--n-label-height': '0px',
  '--n-feedback-height': '8px',
}
</script>

<template>
  <n-modal v-model:show="show" transform-origin="center">
    <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <div class="wrapper">
        <span class="wrapper-title">生成任务包设置</span>
        <div class="wrapper-bar">
          <div class="wrapper-info">
            <span :style="{ 'margin-left': '18px' }">基本信息</span>
          </div>
        </div>
        <n-form ref="formRef" :model="model" style="margin-top: 8px;" :rules="rules">
          <n-form-item path="packagename" label="任务包名称">
            <n-input v-model:value="model.packagename" max="12" @keydown.enter.prevent />
          </n-form-item>
          <n-form-item path="comparehistory" :style="formItemStyle">
            <n-checkbox v-model:checked="model.comparehistory">
              是否对比历史数据
            </n-checkbox>
          </n-form-item>
          <n-form-item path="mark" :style="formItemStyle">
            <n-checkbox v-model:checked="model.mark">
              是否给重复图片添加重复标识
            </n-checkbox>
          </n-form-item>
        </n-form>
      </div>
      <template #footer>
        <div class="wrapper-footer">
          <n-button type="info" @click="handleSumbit">
            生成任务包
          </n-button>
          <n-button secondary style="margin-left:15px" @click="closeModal">
            取消
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;

  &-title {
    font-weight: bold;
    font-size: 16px;
  }

  &-bar {
    background-color: #e8e8e8;
    width: 100%;
    margin-top: 20px;
  }

  &-form {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  &-new {
    display: flex;
    width: 110px;
    color: #507afd;
    line-height: 22px;
    cursor: pointer;

    &:hover {
      color: #507aac;
    }
  }

  &-table {
    margin-top: 20px;
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }

  &-info {
    font-weight: bold;
    position: relative;

    &:before {
      background-color: #1980FF;
      content: "";
      width: 5px;
      border-radius: 2px;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  }
}
</style>
