<template>
  <div class="mask" v-if="visibile">
    <div class="dia-container">
      <div class="title">修改</div>
      <div class="form-item">
        <div class="form-title">
          {{ type ? '待运输包装下热损失率mW/（k.kg）' : '标准物质比热' }}
        </div>
        <input class="fix-input" v-model="val" @update:modelValue="handleInput" />
      </div>
      <div class="btns">
        <CommonButton size="default" type="info" msg="取消" @click="emit('cancel')" />
        <CommonButton size="default" type="danger" msg="确定" @click="handleSubmit" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  visibile: {
    type: Boolean,
    default: false
  },
  type: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['cancel', 'confirm']);
const val = ref();
//限制输入框输入的内容
const handleInput = (value) => {
  const validNumber = /^-?\d*\.?\d*$/;
  if (validNumber.test(value)) {
    val.value = value;
  } else {
    val.value = ''; // 直接更新输入框的显示值
  }
};
watch(val, (newValue) => {
  handleInput(newValue);
});
const handleSubmit = () => {
  emit('confirm', val.value);
};
</script>
<style lang="less" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  .dia-container {
    width: 818px;
    height: 549px;
    background: #f8f8f8;
    border-radius: 8px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 36px;
    padding: 80px 109px;
    text-align: center;
    .title {
      font-size: 48px;
      color: #3a3a3a;
      margin-bottom: 48px;
      font-weight: bold;
    }
    .form-item {
      width: 100%;
      .form-title {
        font-size: 36px;
        color: #666666;
        text-align: left;
        margin-bottom: 23px;
      }
      .fix-input {
        width: 100%;
        background: #ffffff;
        box-shadow: inset 0px 3px 6px 0px rgba(0, 0, 0, 0.1608);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #dcdcdc;
        height: 100px;
      }
    }
    .btns {
      margin-top: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
