<template>
  <div>
    <vxe-form
      vertical
      ref="formRef"
      :data="formData"
      :loading="loading"
      @submit="submitEvent"
      @reset="resetEvent">
      <vxe-form-item title="年份" field="qyear" span="24">
        <template #default="params">
          <div class="button-group">
            <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, params)"
            >
              {{ year }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      <vxe-form-item title="风险等级" field="riskLevel" span="24" :item-render="{}" title-overflow>
        <template #default="params">
          <div class="button-group">
            <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, params)"
            >
              {{ item.label }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      <vxe-form-item title="采集频率" field="collFreq" span="24" :item-render="{}" title-overflow>
        <template #default="params">
          <div class="button-group">
            <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, params)"
            >
              {{ item.label }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      <vxe-form-item title="采集方法" field="collMethod" span="24" :item-render="{}" title-overflow>
        <template #default="params">
          <div class="button-group">
            <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, params)"
            >
              {{ item.label }}
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      <vxe-form-item title="指标类型" field="mtrcCtp" span="24" :item-render="{}" title-overflow>
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.mtrcCtp === '1' ? 'button' : 'text'"
              :status="params.data.mtrcCtp === '1' ? 'primary' : ''"
              @click="handleButtonClick('mtrcCtp', '1', params)"
            >
              基础指标
            </vxe-button>
            <vxe-button
              :mode="params.data.mtrcCtp === '2' ? 'button' : 'text'"
              :status="params.data.mtrcCtp === '2' ? 'primary' : ''"
              @click="handleButtonClick('mtrcCtp', '2', params)"
            >
              计算指标
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      <vxe-form-item title="审批状态" field="appSta" span="24" :item-render="{}" title-overflow>
        <template #default="params">
          <div class="button-group">
            <vxe-button
              :mode="params.data.appSta === '0' ? 'button' : 'text'"
              :status="params.data.appSta === '0' ? 'primary' : ''"
              @click="handleButtonClick('appSta', '0', params)"
            >
              未审批
            </vxe-button>
            <vxe-button
              :mode="params.data.appSta === '1' ? 'button' : 'text'"
              :status="params.data.appSta === '1' ? 'primary' : ''"
              @click="handleButtonClick('appSta', '1', params)"
            >
              通过
            </vxe-button>
            <vxe-button
              :mode="params.data.appSta === '2' ? 'button' : 'text'"
              :status="params.data.appSta === '2' ? 'primary' : ''"
              @click="handleButtonClick('appSta', '2', params)"
            >
              未通过
            </vxe-button>
          </div>
        </template>
      </vxe-form-item>
      <vxe-form-item title="指标名称" field="mtrcName" span="24" :item-render="{}" title-overflow>
        <template #default="params">
          <vxe-input v-model="params.data.mtrcName" placeholder="请输入名称" clearable @change="changeEvent"></vxe-input>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { Dayjs } from 'dayjs';
import { VXETable, VxeFormInstance, VxeFormPropTypes, VxeFormEvents } from 'vxe-table'
import { labelCol } from '../../newlib/components/data/AuditCommon.data';

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

}

const emit = defineEmits(['searchData']);

const formRef = ref<VxeFormInstance>()
const yearOptions = ref([]);

const loading = ref(false)

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

// 处理按钮点击事件
const handleButtonClick = (field: keyof FormDataVO, value: any, params: any) => {
  // 如果点击已选中的按钮，则取消选择
  if (formData.value[field] === value) {
    formData.value[field] = undefined;
  } else {
    formData.value[field] = value;
  }
  
  const $form = formRef.value
  if ($form) {
    $form.updateStatus(params)
    searchData()
  }
}

const changeEvent = (params: any) => {
  const $form = formRef.value
  if ($form) {
    $form.updateStatus(params)
    searchData()
  }
}

const submitEvent: VxeFormEvents.Submit = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    VXETable.modal.message({ content: '保存成功', status: 'success' })
  }, 1000)
}

const resetEvent: VxeFormEvents.Reset = () => {
  VXETable.modal.message({ content: '重置事件', status: 'info' })
}

const getMonths = (value: Dayjs) => {
  const localeData = value.localeData();
  const months = [];
  for (let i = 0; i < 12; i++) {
    months.push(localeData.monthsShort(value.month(i)));
  }
  return months;
};

const initYearOptions = () => {
   yearOptions.value = [];
  const currentYear = new Date().getFullYear();
  for(let i = currentYear - 3; i <= currentYear; i++) {
    yearOptions.value.push(i);
  }
};

const monthOptions = ref([
  { label: '1月', value: 1 },
  { label: '2月', value: 2 },
  { label: '3月', value: 3 },
  { label: '4月', value: 4 },
  { label: '5月', value: 5 },
  { label: '6月', value: 6 },
  { label: '7月', value: 7 },
  { label: '8月', value: 8 },
  { label: '9月', value: 9 },
  { label: '10月', value: 10 },
  { label: '11月', value: 11 },
  { label: '12月', value: 12 }
]);

const quarterOptions = ref([
  { label: '第一季度', value: 1 },
  { label: '第二季度', value: 2 },
  { label: '第三季度', value: 3 },
  { label: '第四季度', value: 4 }
]);

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

const riskLevelOptions = 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 searchData = ()=> {
  emit('searchData',formData.value);
}

onMounted(async () => {
  await initYearOptions();
})
</script>

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

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