<template>
  <view>
    <uni-popup  ref="addForm" mode="center" >
      <!-- 新增：修改运行时间的弹窗 -->
      <view class="modal-container">
        <view class="modal-title">{{ `添加大棚` }}</view>
        <view class="modal-input-wrap" >
          <text class="modal-label">大棚名称：</text>
          <uni-easyinput style="width: 100px" v-model="agriName" placeholder="请输入大棚名称" />
        </view>
        <view class="modal-input-wrap" >
          <text class="modal-label">设备imei：</text>
          <uni-easyinput  style="width: 100px" v-model="imei" placeholder="请输入大棚名称" >
            <template #right>
              <yt-scanCode  @getScanCode="getScanCode"></yt-scanCode>
            </template>
          </uni-easyinput>
        </view>

        <view class="modal-btn-wrap">
          <button class="modal-btn cancel" @click="close">取消</button>
          <button class="modal-btn confirm" @click="confirm">确定</button>
        </view>
      </view>
    </uni-popup>




  </view>
</template>
<script>
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  name: "addAgri",
  components: {UniPopup},
  data() {
    return {
      agriName: null,
      imei:null
    }
  },
  methods:{
    close() {
      this.$refs.addForm.close();
    },
    confirm() {
      this.close()
    },
    open() {
      this.$refs.addForm.open();
    },
    getScanCode(res){
      console.log("设备号======>",res);

    }
  }
}
</script>
<style scoped lang="scss">

/* 新增：弹窗样式 */
.modal-container {
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
}
.modal-title {
  font-size: 30rpx;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}
.modal-input-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 35rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
}
.modal-label {
  width: 140rpx;
  color: #666;
}
.modal-current {
  margin-left: 14rpx;
  color: #333;
}
.modal-input {
  height: 60rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 15rpx;
  font-size: 28rpx;
  width: 80rpx;
}
.modal-unit {
  margin-left: 10rpx;
  color: #666;
}
.modal-btn-wrap {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}
.modal-btn {
  flex: 1;
  height: 70rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.modal-btn.cancel {
  background: #f5f5f5;
  color: #666;
}
.modal-btn.confirm {
  background: #007aff;
  color: #fff;
}
</style>