<template>
  <section class="AppDatePicker">
    <div class="label">时段</div>
    <el-select v-model="value" :picker-options="options" size="small" format="HH:mm" value-format="HH" @change="handleSearch">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
  </section>
</template>

<script>
export default {
  name: "AppDatePicker",
  label: "时间选择",
  data() {
    return {
      value: ''
    }
  },
  computed: {
    refs: v => v.$parent.getItemRefs(),
    options: () => Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i})),
  },
  methods: {
    handleSearch(v) {
      const list = this.refs['6e6c93d7-5b24-4d75-a0d0-4beb130045ed'].$refs.main
      list.search.hourNum = `${v}`.padStart(2, '0')
      list.getData()
    }
  },
  created() {
    this.value = new Date().getHours()
  }
}
</script>

<style scoped>
.AppDatePicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AppDatePicker .el-input__inner {
  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
  border: 1px solid #1760AE;
  border-radius: 0;
}

.AppDatePicker .label {
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
}
</style>
