<!--选择日期弹窗-->
<template>
  <div>
    <van-dialog title="选择月份" show-cancel-button v-model="show" @cancel="cancel" @confirm="confirm">
      <van-datetime-picker
        v-model="currentTime"
        type="time"
        title="选择时间"
        :min-hour="10"
        :max-hour="20"
      />
      <!-- <div class="blueborder"></div> -->
      <!-- <div class="xian"></div>
      <div class="xian_2"></div>-->
    </van-dialog>
  </div>
</template>
<script>
export default {
  name: "ChooseTimeAlert",
  // props: ["onshow"],
  // {
  //   onshow: {
  //     type: Boolean,
  //     required:true
  //   }

  // },
  data() {
    return {
      show: false, //弹窗显示
      currentTime: "12:00"
    };
  },
  props: ["onshow"],

  created() {
    // console.log(this.onshow,this.minDate,this.maxDate);
  },
  methods: {
    //弹窗
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    //弹窗确认
    confirm() {
      this.show = false;
      this.$emit("confirm", { currentDate: this.currentDate, show: this.show });
    },
    cancel() {
      this.show = false;
      this.$emit("cancel", { show: this.show });
    }
  },
  watch: {
    onshow(newVlaue) {
      this.show = newVlaue;
    }
  }
  // openAlert(onshow){
  //     this.onshow = onshow
  // }
};
</script>
<style scoped lang='less'>
@bordercolor: #c7dbfd;
@baseBlue: #478bfb;
/deep/.van-picker__toolbar {
  display: none;
}
/deep/ .van-picker-column__item--selected {
  color: @baseBlue;
}
/deep/ .van-picker__frame {
  border-top: 0.01rem solid @bordercolor;
  border-bottom: 0.01rem solid @bordercolor;
}
// .xian {
//   width: 80%;
//   border-top: 0.01rem solid @bordercolor;
//   position: absolute;
//   top: 44%;
//   left: 10%;
// }
// .xian_2 {
//   width: 80%;
//   border-top: 0.01rem solid @bordercolor;
//   position: absolute;
//   top: 55%;
//   left: 10%;
// }
</style>