<template>
  <view>
    <JHeaderTitle title="编辑信息" bgColor="transparent" />

    <JMainCard pd="0" wrapPd="30rpx">
      <JInput name="设备名称" :isBorder="true" v-model:value="vdata.deviceName" place="请输入设备名称" />
    </JMainCard>

    <JButton pd=" 30rpx " pdTop="0" @HandleTouch="preservation">保存</JButton>
  </view>
</template>

<script setup>
import { $getDeviceDetail, $updateDeviceDetail } from "@/http/apiManager.js"
import { onLoad } from "@dcloudio/uni-app"
import { ref, reactive, toRaw } from "vue"
import JInput from "@/components/newComponents/JInput/JInput.vue"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
import JButton from "@/components/newComponents/JButton/JButton.vue"

const vdata = reactive({})

onLoad((option) => {
  $getDeviceDetail(option.id).then(({ bizData }) => {
    Object.assign(vdata, bizData)
  })
})

// 保存
const preservation = () => {
  $updateDeviceDetail(vdata.deviceId, toRaw(vdata)).then(({ bizData }) => {
    uni.showToast({ icon: "none", title: "保存成功" })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  })
}
</script>

<style lang="scss">
page {
  background: #f2f2f2;
}
.tiptext {
  margin: 10rpx 30rpx 0;
  border-radius: 10rpx;
  background: #f2f2f2;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 27rpx;
  line-height: 46rpx;
}
</style>
