<template>
  <view v-if="show" class="modal-mask">
    <view class="modal-content">
      <view class="modal-title">新建日程</view>
      <input v-model="_title" placeholder="请输入标题" class="input" />
      <view class="sn">时间：<input v-model="_hour" type="number" min="0" max="23" />:<input v-model="_min" type="number" min="0" max="59" /></view>
      <view class="sn">
        颜色：
        <input v-model="_color" placeholder="#e3fae6" />
      </view>
      <view class="buttons">
        <button @click="$emit('cancel')">取消</button>
        <button @click="ok">确定</button>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  show: Boolean
});
const emit = defineEmits(['ok', 'cancel']);
const _title = ref('');
const _hour = ref('');
const _min = ref('');
const _color = ref('#e3fae6');
function ok() {
  emit('ok', { title:_title.value, startHour:Number(_hour.value), startMin:Number(_min.value), color:_color.value });
  _title.value = '';
  _hour.value = '';
  _min.value = '';
  _color.value = '#e3fae6';
}
watch(() => props.show, v => {
  if (!v) {
    _title.value = '';
    _hour.value = '';
    _min.value = '';
    _color.value = '#e3fae6';
  }
});
</script>
<style scoped lang="scss">
.modal-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.16);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.modal-content {
  background: #fff; padding: 32rpx 28rpx; border-radius: 16rpx;
  min-width: 440rpx;
}
.modal-title {
  color: #2885ff; font-size: 20px; font-weight: 600; margin-bottom: 25rpx;
}
.input {
  padding: 12rpx; border-radius: 8rpx; margin: 10rpx 0; border: 1px solid #e3e3e3; width: 90%;
}
.buttons {
  margin-top: 24rpx; display: flex; justify-content: flex-end; gap: 30rpx;
}
.sn {
  margin-bottom: 14rpx;
  font-size: 14px;
}
</style>
