<template>
  <div style="padding: 12PX;">
    <span class="title">高级筛选</span>
    <d-form style="margin-top: 20px" layout="vertical">
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="license" label="license">
            <d-input placeholder="请输入license" v-model="formData.license"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="name" label="软件/组件名称">
            <d-input placeholder="请输入软件/组件名称" v-model="formData.name"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="licenseStrength" label="license强弱" help-tips="license强弱说明">
            <d-input v-model="formData.licenseStrength"/>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="version" label="软件版本">
            <d-input v-model="formData.version"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="dependency" label="依赖软件">
            <d-input v-model="formData.dependency"/>
          </d-form-item>
        </d-col>
        <d-col :span="8">
          <d-form-item field="language" label="编程语言">
            <d-input v-model="formData.language"/>
          </d-form-item>
        </d-col>
      </d-row>
      <d-row :gutter="16">
        <d-col :span="8">
          <d-form-item field="date" label="版本发布日期">
            <d-input v-model="formData.date"/>
          </d-form-item>
        </d-col>
      </d-row>
      <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
        <d-button variant="solid" @click="submitForm">搜索</d-button>
        <d-button @click="cancel">取消</d-button>
      </gc-form-operation>
    </d-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['submit', 'cancel']);

const formData = ref({
  license: '',
  name: '',
  licenseStrength: '',
  version: '',
  dependency: '',
  language: '',
  date: ''
});

const submitForm = () => {
  emit('submit', formData.value);
}

const cancel = () => {
  formData.value = {
    license: '',
    name: '',
    licenseStrength: '',
    version: '',
    dependency: '',
    language: '',
    date: ''
  }
  emit('cancel');
}
</script>

<style scoped lang="scss">
.title {
  font-size: 16px;
  font-weight: bold;
}
</style>