<template>
  <div class="middle-box">
    <el-row style="width: 85%" :gutter="50">
      <el-col :span="8">
        <img src="/PNG/MTBF.png" class="middle-box-img" />
        <div style="display: inline-block; position: absolute; top: 15px">
          <div class="data-box-text-title">订单编号</div>
          <input class="data-box-text-value editable-input" v-model="orderNum" @blur="saveData" @keyup.enter="saveData" />
        </div>
      </el-col>
      <el-col :span="8">
        <img src="/PNG/MTBF.png" class="middle-box-img" />
        <div style="display: inline-block; position: absolute; top: 15px">
          <div class="data-box-text-title">零件图号</div>
          <input class="data-box-text-value editable-input" v-model="machineModel" @blur="saveData"
            @keyup.enter="saveData" />
        </div>
      </el-col>
      <el-col :span="8">
        <img src="/PNG/MTBF.png" class="middle-box-img" />
        <div style="display: inline-block; position: absolute; top: 15px">
          <div class="data-box-text-title">生产数量</div>
          <input class="data-box-text-value editable-input" v-model="number" @blur="saveData" @keyup.enter="saveData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 定义响应式数据
const orderNum = ref('10007801')
const machineModel = ref('20-021')
const number = ref('100')

// 保存数据到localStorage
const saveData = () => {
  const dataToSave = {
    orderNum: orderNum.value,
    machineModel: machineModel.value,
    number: number.value,
  }

  try {
    localStorage.setItem('machineData', JSON.stringify(dataToSave))
  } catch (e) {
    console.error('保存数据失败:', e)
  }
}

// 加载保存的数据
const loadSavedData = () => {
  try {
    const savedData = localStorage.getItem('machineData')
    if (savedData) {
      const data = JSON.parse(savedData)
      orderNum.value = data.orderNum || orderNum.value
      machineModel.value = data.machineModel || machineModel.value
      number.value = data.number || number.value
    }
  } catch (e) {
    console.error('加载保存数据失败:', e)
  }
}

// 在组件挂载时加载数据
onMounted(() => {
  loadSavedData()
})

// 定义暴露给父组件的方法
defineExpose({
  saveData,
  loadSavedData
})
</script>

<style scoped>
.middle-box {
  position: absolute;
  width: 1050px;
  height: 80px;
  left: 446px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle-box-img {
  width: 70px;
  height: 70px;
}

.data-box-text-title {
  font-size: 20px;
  margin-left: 20px;
}

.data-box-text-value {
  font-size: 25px;
  margin-right: 12px;
}

.editable-input {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  width: 120px;
  outline: none;
  padding: 0 12px 0 0;
  margin: 0;
  cursor: pointer;
  color: #409eff;
}

.editable-input:focus {
  border: 1px solid #0070c0;
  border-radius: 4px;
}
</style>
<script lang="ts">
export default {
  name: 'ProductionInfo',
}
</script>
