<template>
  <div class="experiment-page BaseApp-page">
    <main class="BaseApp-page-main">
      <div class="experiment-inner">
        
      </div>
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
      <div class="BaseApp-btn BaseApp-btn--primary" @click="saveForm">保存</div>
    </footer>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { notify } from '@/utils/message.js';
import { addUserApi } from '@/api/user.js';
const disabledComponents = computed(() => {
  return ['disableKeyboard'];
});
const router = useRouter();
const formData = reactive({
  xtwd: 'aaaaaaaaaaa',
  bmwd1: '',
  bmwd2: ''
});

const userInfo = reactive({
  role_id: '34efee88-f4bc-11ee-9341-8cc84ba8982e',
  username: '', // 用户名
  name: '', // 姓名
  sex: '1',
  password: '',
  proPassword: ''
});

const isFocused = ref(false);

// 输入框样式
const inputStyle = {
  width: 190,
  height: 30
};

const stopInput = (e) => {
  if (isFocused.value) {
    e.target.setAttribute('readonly', true);
    setTimeout(() => {
      e.target.removeAttribute('readonly');
    }, 100);
  }
};

const stopKeyborad = (e) => {
  isFocused.value = true;
  e.target.setAttribute('readonly', true);
  setTimeout(() => {
    e.target.removeAttribute('readonly');
  }, 100);
};

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

const saveForm = () => {};
</script>

<style lang="less" scoped>
.experiment-page {
  font-size: 20px;
  color: #666666;
  line-height: 22px;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .experiment-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .experiment-inner {
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
    .experiment-status-wrapper {
      padding: 30px 40px;
      border-bottom: 1px solid #e5e5e5ff;
      .experiment-status-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .experiment-status-row-item {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          min-width: 22%;
          &:first-child {
            justify-content: flex-start;
          }
          .experiment-status-row-item__value {
          }
        }
      }
      .experiment-status-row + .experiment-status-row {
        margin-top: 20px;
      }
    }
    .experiment-switch-wrapper {
      display: flex;
      flex-direction: row;
      .experiment-switch-item {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 125px;
        border-right: 1px solid #e5e5e5ff;
        &:last-child {
          border-right: none;
        }
        .experiment-switch-item__value {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-left: 10px;
        }
      }
      border-bottom: 1px solid #e5e5e5ff;
    }
  }
}
</style>
