<!--
 * @Date: 2024-10-18 18:00:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-20 12:56:26
 * @FilePath: /hager/src/views/user/info.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-info-page">
    <div class="input-title">我的信息</div>
    <div style="padding: 1rem;">
      <hagerInput type="email" :disable="status !== 'edit'" required v-model="email" placeholder="请输入注册邮箱地址" />
      <hagerInput type="pwd" :disable="status !== 'edit'" required v-model="pwd" placeholder="请输入登录密码" />
      <hagerInput type="username" :disable="status !== 'edit'" v-model="username" placeholder="请输入姓名" />
      <hagerInput type="tel" :disable="status !== 'edit'" v-model="tel" placeholder="请输入联系电话" />
      <hagerInput type="corp" :disable="status !== 'edit'" v-model="corp" placeholder="请输入公司名称" />
      <hagerInput type="department" :disable="status !== 'edit'" v-model="department" placeholder="请输入所属部门和职位" />
    </div>
    <div class="info-footer">
      <div v-if="status !== 'edit'" class="submit-btn" @click="onHandle">修改信息</div>
      <div v-else class="edit-box">
        <div class="cancel btn" @click="status=''">取消</div>
        <div class="confirm btn" @click="onSubmit">确定</div>
      </div>
      <div class="info-subsidiary">
        <div class="privacy"><span>隐私政策</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerInput from '@/components/common/hagerInput.vue';

export default {
  mixins: [mixin.init],
  data () {
    return {
      email: 'hr.communication@hager.com',
      pwd: 'hager123',
      username: '王二虎',
      tel: '15650569910',
      corp: '海格电气集团',
      department: '研发部产品经理',
      status: ''
    }
  },
  mounted () {

  },
  methods: {
    onHandle () {
      this.status = 'edit';
    },
    onSubmit () {
      console.log('提交');
      setTimeout(() => {
        this.status = '';
      }, 1000);
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-info-page {
    padding: 2rem 0.5rem 0;
    box-sizing: border-box;
    .input-title {
      color: @secondary-color;
      font-weight: bold;
      font-size: 1.25rem;
      text-align: center;
    }
    .submit-btn {
      background-color: #FFF;
      color: @secondary-color;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 5px;
      border: 1px solid @secondary-color;
      &:hover {
        cursor: pointer;
      }
    }
    .edit-box {
      display: flex;
      justify-content: space-between;
      .cancel {
        margin-right: 1%;
        color: @secondary-color;
      }
      .confirm {
        margin-left: 1%;
        background-color: @secondary-color;
        color: #FFF;
      }
      .btn {
        width: 48%;
        text-align: center;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        border: 1px solid @secondary-color;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .info-footer {
      padding: 0 1rem 1rem 2rem;
      .info-subsidiary {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        margin-top: 1rem;
        span {
          color: @primary-color;
          text-decoration: underline;
          font-weight: bold;
          &:hover {
            cursor: pointer;
          }
        }
        .privacy {

        }
        .login {

        }
      }
    }
  }
</style>