<template>
  <div>
    <vxe-form
      vertical
      ref="formRef"
      :data="formData"
      :loading="loading"
    >
      <vxe-form-item title="年份" field="qyear" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.qyear === undefined ? 'button' : 'text'"
              :status="params.data.qyear === undefined ? 'primary' : ''"
              @click="handleButtonClick('qyear', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              v-for="year in yearOptions"
              :key="year"
              :mode="params.data.qyear === year ? 'button' : 'text'"
              :status="params.data.qyear === year ? 'primary' : ''"
              @click="handleButtonClick('qyear', year)"
            >
              {{ year }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      
      <vxe-form-item title="风险等级" field="riskLevel" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.riskLevel === undefined ? 'button' : 'text'"
              :status="params.data.riskLevel === undefined ? 'primary' : ''"
              @click="handleButtonClick('riskLevel', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              v-for="item in riskLevelOptions"
              :key="item.value"
              :mode="params.data.riskLevel === item.value ? 'button' : 'text'"
              :status="params.data.riskLevel === item.value ? 'primary' : ''"
              @click="handleButtonClick('riskLevel', item.value)"
            >
              {{ item.label }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      
      <vxe-form-item title="采集频率" field="collFreq" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.collFreq === undefined ? 'button' : 'text'"
              :status="params.data.collFreq === undefined ? 'primary' : ''"
              @click="handleButtonClick('collFreq', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              v-for="item in collFreqOptions"
              :key="item.value"
              :mode="params.data.collFreq === item.value ? 'button' : 'text'"
              :status="params.data.collFreq === item.value ? 'primary' : ''"
              @click="handleButtonClick('collFreq', item.value)"
            >
              {{ item.label }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      
      <vxe-form-item title="采集方法" field="collMethod" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.collMethod === undefined ? 'button' : 'text'"
              :status="params.data.collMethod === undefined ? 'primary' : ''"
              @click="handleButtonClick('collMethod', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              v-for="item in collMethodOptions"
              :key="item.value"
              :mode="params.data.collMethod === item.value ? 'button' : 'text'"
              :status="params.data.collMethod === item.value ? 'primary' : ''"
              @click="handleButtonClick('collMethod', item.value)"
            >
              {{ item.label }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      
      <vxe-form-item title="指标类型" field="mtrcCtp" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.mtrcCtp === undefined ? 'button' : 'text'"
              :status="params.data.mtrcCtp === undefined ? 'primary' : ''"
              @click="handleButtonClick('mtrcCtp', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              :mode="params.data.mtrcCtp === '1' ? 'button' : 'text'"
              :status="params.data.mtrcCtp === '1' ? 'primary' : ''"
              @click="handleButtonClick('mtrcCtp', '1')"
            >
              基础指标
            </vxe-button>
            <vxe-button
              :mode="params.data.mtrcCtp === '2' ? 'button' : 'text'"
              :status="params.data.mtrcCtp === '2' ? 'primary' : ''"
              @click="handleButtonClick('mtrcCtp', '2')"
            >
              计算指标
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      
      <vxe-form-item title="是否统计" field="mtrcTp" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.mtrcTp === undefined ? 'button' : 'text'"
              :status="params.data.mtrcTp === undefined ? 'primary' : ''"
              @click="handleButtonClick('mtrcTp', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              :mode="params.data.mtrcTp === '1' ? 'button' : 'text'"
              :status="params.data.mtrcTp === '1' ? 'primary' : ''"
              @click="handleButtonClick('mtrcTp', '1')"
            >
              统计
            </vxe-button>
            <vxe-button
              :mode="params.data.mtrcTp === '2' ? 'button' : 'text'"
              :status="params.data.mtrcTp === '2' ? 'primary' : ''"
              @click="handleButtonClick('mtrcTp', '2')"
            >
              不统计
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      
      <vxe-form-item title="审批状态" field="appSta" span="24">
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.appSta === undefined ? 'button' : 'text'"
              :status="params.data.appSta === undefined ? 'primary' : ''"
              @click="handleButtonClick('appSta', undefined)"
            >
              全部
            </vxe-button>
            <vxe-button
              :mode="params.data.appSta === '1' ? 'button' : 'text'"
              :status="params.data.appSta === '1' ? 'primary' : ''"
              @click="handleButtonClick('appSta', '1')"
            >
              通过
            </vxe-button>
            <vxe-button
              :mode="params.data.appSta === '2' ? 'button' : 'text'"
              :status="params.data.appSta === '2' ? 'primary' : ''"
              @click="handleButtonClick('appSta', '2')"
            >
              未通过
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      

      
      <!-- 添加搜索和重置按钮 -->
      <!-- <vxe-form-item span="24">
        <template #default>
          <div style="display: flex; gap: 8px; justify-content: center;">
            <vxe-button status="primary" @click="handleSubmit">查询</vxe-button>
            <vxe-button @click="handleReset">重置</vxe-button>
          </div>
        </template>
      </vxe-form-item> -->
    </vxe-form>
  </div>
</template>

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

interface FormDataVO {
  qyear: number | undefined
  qmonth: number | undefined
  quarter: number | undefined
  riskLevel: number | undefined
  collMethod: number | undefined
  collFreq: number | undefined
  mtrcCtp: string | undefined
  appSta: string | undefined
  mtrcTp: string | undefined
}

const emit = defineEmits(['searchData', 'resetData'])

const formRef = ref()
const yearOptions = ref<number[]>([])
const loading = ref(false)

const formData = ref<FormDataVO>({
  qyear: 2025,
  qmonth: undefined,
  quarter: undefined,
  riskLevel: undefined,
  collMethod: undefined,
  collFreq: undefined,
  mtrcCtp: undefined,
  appSta: undefined,
  mtrcTp: undefined
})

// 选项数据
const riskLevelOptions = ref([
  { label: '低风险', value: 1 },
  { label: '中风险', value: 2 },
  { label: '高风险', value: 3 }
])

const collMethodOptions = ref([
  { label: '手动', value: 1 },
  { label: '自动', value: 2 },
  { label: '人工或自动', value: 3 }
])

const collFreqOptions = ref([
  { label: '月', value: 3 },
  { label: '季', value: 4 },
  { label: '半年', value: 5 },
  { label: '年', value: 6 }
])

// 初始化年份选项
const initYearOptions = () => {
  const currentYear = new Date().getFullYear()
  yearOptions.value = []
  for (let i = currentYear - 3; i <= currentYear; i++) {
    yearOptions.value.push(i)
  }
}

// 处理按钮点击
const handleButtonClick = (field: keyof FormDataVO, value: any) => {
  if (formData.value[field] === value) {
    formData.value[field] = undefined
  } else {
    formData.value[field] = value
  }

  handleSubmit();
}

// 处理输入变化
const handleInputChange = () => {
  // 不立即搜索，等待用户点击查询按钮
}

// 处理提交查询
const handleSubmit = () => {
  emit('searchData', { ...formData.value })
}

// 处理重置
const handleReset = () => {
  formData.value = {
    qyear: 2025,
    qmonth: undefined,
    quarter: undefined,
    riskLevel: undefined,
    collMethod: undefined,
    collFreq: undefined,
    mtrcCtp: undefined,
    appSta: undefined,
    mtrcTp: undefined
  }
  emit('resetData')
}

onMounted(() => {
  initYearOptions()
})
</script>

<style scoped>
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.button-group .vxe-button {
  margin: 0;
}
</style>