<template>
  <el-card shadow="never">
    <el-form :inline="true" :model="queryForm" size="small" label-width="86px">
      <el-form-item label="范围名称">
        <el-input :model-value="selectionLabel" disabled style="width: 220px" />
      </el-form-item>
      <el-form-item label="记录时间">
        <el-date-picker
          v-model="localTimeRange"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 340px"
        />
      </el-form-item>
      <el-form-item label="采样间隔">
        <el-input-number v-model="localSamplingInterval" :min="1" :max="1440" controls-position="right" style="width: 122px" />
        <span class="form-suffix">分钟/点</span>
      </el-form-item>
      <el-form-item v-if="showMetric" label="主看参数">
        <el-select v-model="localVibrationParam" style="width: 160px" @change="$emit('query')">
          <el-option v-for="item in vibrationMetricOptions" :key="item.field" :label="item.label" :value="item.field" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('query')">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { vibrationMetricOptions } from './vibrationBoardShared';

const props = defineProps<{
  selectionLabel: string;
  timeRange: string[];
  samplingInterval: number;
  vibrationParam?: string;
  showMetric?: boolean;
}>();

const emit = defineEmits<{
  'update:timeRange': [string[]];
  'update:samplingInterval': [number];
  'update:vibrationParam': [string];
  query: [];
}>();

const queryForm = computed(() => props);
const localTimeRange = computed({
  get: () => props.timeRange,
  set: (value) => emit('update:timeRange', value)
});
const localSamplingInterval = computed({
  get: () => props.samplingInterval,
  set: (value) => emit('update:samplingInterval', value)
});
const localVibrationParam = computed({
  get: () => props.vibrationParam || 'vibrationSpeed',
  set: (value) => emit('update:vibrationParam', value)
});
</script>

<style scoped>
.form-suffix {
  margin-left: 6px;
  color: #909399;
}
</style>
