<template>
  <el-card shadow="never" class="filter-card">
    <el-form :inline="true" :model="queryForm" size="small" label-width="86px" class="filter-form">
      <el-form-item label="范围名称" class="filter-item filter-item--selection">
        <el-input :model-value="selectionLabel" disabled class="filter-control filter-control--selection" />
      </el-form-item>
      <el-form-item label="记录时间" class="filter-item filter-item--time">
        <el-date-picker
          v-model="localTimeRange"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          class="filter-control filter-control--time"
        />
      </el-form-item>
      <el-form-item label="采样间隔" class="filter-item filter-item--interval">
        <el-input-number
          v-model="localSamplingInterval"
          :min="1"
          :max="1440"
          controls-position="right"
          class="filter-control filter-control--interval"
        />
        <span class="form-suffix">分钟/点</span>
      </el-form-item>
      <el-form-item label="当前指标" class="filter-item filter-item--metric">
        <el-input model-value="位移" disabled class="filter-control filter-control--metric" />
      </el-form-item>
      <el-form-item class="filter-item filter-item--action">
        <el-button type="primary" @click="$emit('query')">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
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)
});
</script>

<style scoped lang="scss">
.filter-card {
  border-radius: 16px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
}

.filter-form :deep(.el-form-item) {
  margin-right: 0;
  margin-bottom: 12px;
}

.filter-item {
  flex-shrink: 0;
}

.filter-control {
  max-width: 100%;
}

.filter-control--selection {
  width: min(100%, 240px);
}

.filter-control--time {
  width: clamp(260px, 34vw, 360px);
}

.filter-control--interval {
  width: 128px;
}

.filter-control--metric {
  width: 160px;
}

.form-suffix {
  margin-left: 6px;
  color: #909399;
}

@media (max-width: 992px) {
  .filter-control--time {
    width: min(100%, 360px);
  }
}

@media (max-width: 768px) {
  .filter-form {
    display: block;
  }

  .filter-control--selection,
  .filter-control--time,
  .filter-control--metric,
  .filter-control--interval {
    width: 100%;
  }

  .filter-item {
    width: 100%;
  }

  .form-suffix {
    display: inline-block;
    margin-top: 6px;
    margin-left: 0;
  }
}
</style>
