<template>
  <div class='app-container'>
    <div class="img">
      <img src="@/assets/logo/logo.png" width="100" height="100" />
    </div>
    <el-form label-width="auto" :model="data.form" ref="form" :rules="data.rules">
      <el-form-item label="wifi名称：" prop="wifiName">
        <el-input v-model="data.form.wifiName" placeholder="请输入wifi名称" />
      </el-form-item>
      <el-form-item label="wifi密码：" prop="wifiPwd">
        <el-input v-model="data.form.wifiPwd" placeholder="请输入wifi密码" />
      </el-form-item>
      <el-form-item label="设备ID：" prop="deviceMac">
        <el-input v-model="data.form.deviceMac" placeholder="请输入设备ID" />
      </el-form-item>
      <el-form-item label="设备型号：" prop="clientType">
        <el-input v-model="data.form.clientType" placeholder="请输入设备型号" />
      </el-form-item>
    </el-form>
    <el-button type="primary" style="width: 100%;" @click="getSubmit">配网</el-button>
  </div>
</template>

<script setup>
import { wifi } from '@/api/store/devices'

const { proxy } = getCurrentInstance()

const data = reactive({
  // 表单
  form: {},
  // 
  rules: {
    wifiName: [{
      required: true, message: '请输入wifi名称', trigger: 'blur'
    }],
    wifiPwd: [{
      required: true, message: '请输入wifi密码', trigger: 'blur'
    }, {
      min: 8, message: '请输入正确的wifi密码', trigger: 'blur'
    }],
    deviceMac: [{
      required: true, message: '请输入设备ID', trigger: 'blur'
    }],
    clientType: [{
      required: true, message: '请输入设备型号', trigger: 'blur'
    }]
  }
})

const getDetail = () => {
  data.form = proxy.$route.query
}
getDetail()

const getSubmit = () => {
  proxy.$refs.form.validate((vaild) => {
    if (vaild) {
      wifi(data.form).then(res => {
        if (res.code === 0) {
          proxy.$modal.msgSuccess('配网成功！')
          data.form = {}
          proxy.$refs.form.resetFields()
        }
      })
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img {
    padding: 50px 0;
  }

  .el-form {
    flex: 1
  }
}
</style>