<template>
  <div class="safeSetting-page BaseApp-page">
    <header class="BaseApp-page-header">
      <div class="safeSetting-header-title">安全设置</div>
    </header>
    <main class="BaseApp-page-main">
      <div class="safeSetting-form">
        <div class="safeSetting-form-item">
          <div class="safeSetting-form-item__label">是否双人登录</div>
          <div class="safeSetting-form-item__value">
            <vxe-select disabledComponents v-model="formData.need_two_face" class="BaseApp-select">
              <vxe-option
                v-for="item in faceList"
                :key="item.value"
                :value="item.value"
                :label="item.label"></vxe-option>
            </vxe-select>
          </div>
        </div>
      </div>
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
      <div class="BaseApp-btn BaseApp-btn--primary" @click="submit">保存</div>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { isEmpty } from '@/utils/index';
import { notify } from '@/utils/message';
import { getDeviceInfo, setSafetyInfo } from '@/api/user';
const router = useRouter();
const formData = reactive({
  need_two_face: 1
});
let device_id = ref('');
let faceList = reactive([
  { value: 2, label: '是' },
  { value: 1, label: '否' }
]);

const goBack = () => {
  router.go(-1);
};

const submit = async () => {
  let { data } = await setSafetyInfo(device_id.value, {
    need_two_face: Number(formData.need_two_face)
  });
  if (data.code == 200) {
    notify('设置成功', 'success');
    goBack();
  } else {
    notify(data.desc);
  }
};

const getDeviceInfoMethods = async () => {
  let { data } = await getDeviceInfo();
  if (data.code == 200) {
    device_id.value = data.data.device_id;
    formData.need_two_face = data.data.need_two_face;
  }
};

onMounted(() => {
  getDeviceInfoMethods();
});
</script>

<style lang="less" scoped>
.safeSetting-page {
  font-size: 20px;
  color: #666666;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .safeSetting-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .safeSetting-form {
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 15px 50px;
    .safeSetting-form-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 50%;
      margin-top: 35px;
      &:nth-child(2n) {
        justify-content: flex-end;
      }
      .safeSetting-form-item__value {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}
</style>
