<template>
  <div class="c-grid-form">
    <span class="c-grid-form__label u-bold">启用WLAN：</span>
    <div class="l-flex--row c-grid-form__option">
      <el-switch
        v-model="wireless.enable"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </div>
    <template v-if="wireless.enable">
      <span class="c-grid-form__label required">网络名称：</span>
      <el-input
        v-model.trim="wireless.name"
        placeholder="请输入网络名称"
        maxlength="100"
      />
      <span class="c-grid-form__label required">密码：</span>
      <el-input
        v-model.trim="wireless.password"
        style="text-security:disc;"
        placeholder="请输入密码"
        maxlength="100"
      />
      <span class="c-grid-form__label" />
      <div class="l-flex--row">
        <el-checkbox v-model="wireless.auto">自动加入此网络</el-checkbox>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Wireless',
  props: {
    wireless: {
      type: Object,
      required: true
    }
  }
}
</script>
