<script setup>
import { ref } from 'vue'
const active = ref(0)
const showCenter = ref(false)
const value = ref('')
const text = ref('发送验证码')
const showPopup = () => {
  console.log(111)
  showCenter.value = true
}
</script>
<template>
  <div class="right">
    <div class="biti">账号管理</div>
    <div class="container">
      <van-tabs v-model:active="active" line-width="0px" background="#f2f2f2">
        <van-tab title="基本信息" class="box">
          <div class="lie">
            <div>姓名</div>
            <div class="lin">XXX</div>
          </div>
          <div class="lie">
            <div>性别</div>
            <div class="lin">
              <input type="radio" name="value" value="男" checked="checked" />男
              <input type="radio" name="value" value="女" />女
            </div>
          </div>
          <div class="lie">
            <div>工号</div>
            <div class="lin">1111111</div>
          </div>
          <div class="lie">
            <div>手机号</div>
            <div class="lin1">111 1111 1111</div>
            <div class="b" @click="showPopup">修改</div>
          </div>
          <div class="lie">
            <div>单位</div>
            <div class="b2">+添加单位</div>
            <div class="b3">删除记录</div>
          </div>
          <div class="list" v-for="item in 3" :key="item">
            <div class="list1">天津电子职业信息技术学院</div>
            <div class="list2">12320014</div>
          </div>
          <!-- 手机号登录 -->
          <div class="popup">
            <van-popup
              v-model:show="showCenter"
              @click-close-icon="showCenter"
              closeable="true"
              close-icon-position="top-left"
              close-icon="arrow-left"
              round
              :style="{ padding: '64px', width: '500px', height: '400px' }"
            >
              <div class="title">验证码登录</div>
              <div class="code">
                <van-cell-group inset>
                  <!-- 手机号 -->
                  <van-field v-model="value"  placeholder="187159***14" />
                  <!-- 验证码 -->
                  <van-field
                    v-model="sms"
                    center
                    clearable
                    placeholder="验证码"
                  >
                    <template #button>
                      <van-button size="small" color="#6170c3" :text="text" round="true" @click="dbclick"></van-button>
                    </template>
                  </van-field>
                  <!-- 底部按钮 -->
                  <van-button size="large" color="#6170c3" round="true">确认修改</van-button>
                </van-cell-group>
              </div>
            </van-popup>
          </div>
        </van-tab>
        <van-tab title="我的头像" class="box">
          <div class="banner">
            <div class="zuo">
              <div class="pic">
                <img src="../static/touxiang.jpg" alt="" />
              </div>
              <div class="button">保存头像</div>
            </div>
            <div class="you">
              请选择大小小于2M的.jpg文件
              <div class="red">请上传本人照片!</div>
              <div class="button">上传头像</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="密码管理" class="box">
          <div class="ban">
            <div class="old">旧密码：</div>
            <input type="password" placeholder="请输入" />
          </div>
          <div class="ban">
            <div class="old">新的密码：</div>
            <input type="password" @focus="onfocus" placeholder="请输入" />
            <div class="toast">*密码要求8-16位，至少包含数字，字母，字符两种元素！</div>
          </div>
          <div class="ban">
            <div class="old">确认新密码：</div>
            <input type="password" placeholder="请输入" />
          </div>
          <div class="ban">
            <div class="old">
              验证码：<span><img src="@/static/code.png" alt="" /></span>
            </div>
            <input type="password" placeholder="请输入" />
          </div>
          <div class="btn" @click="onclick">保存</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.right {
  background-color: #e5e5e5;
  height: 535px;
  width: 100%;
  margin-top: 40px;

  .list {
    margin-top: 20px;
    border-bottom: #647476 1px dashed;
    border: opacity 0.4em;

    .list1 {
      color: black;
      margin-bottom: 10px;
    }

    .list2 {
      color: #bcbec8;
    }
  }
  .code {
    margin-top: 60px;
    .van-cell{
      margin-bottom: 20px;
      border: 1px solid #cacaca;
      border-radius: 18px;
    }
  }

  .lie {
    display: flex;
    font-weight: 700;
    margin-top: 20px;

    input {
      margin-right: 15px;
    }

    .b {
      margin-left: 10px;
      color: #07a1f4;
    }

    .b2 {
      margin-left: 49px;
      color: #07a1f4;
    }

    .b3 {
      margin-left: 20px;
      color: #07a1f4;
    }

    .lin1 {
      margin-left: 34px;
    }

    .lin {
      margin-left: 50px;
    }
  }

  .biti {
    font-weight: 800;
    font-size: 30px;
    margin: 30px 0px 20px 40px;
  }

  .container {
    display: flex;
    flex-direction: row;
    margin: 40px;

    // width: 100%;
    .box {
      width: 500px;

      .banner {
        width: 640px;
        display: flex;
        justify-content: space-between;

        .zuo {
          .pic {
            width: 300px;
            height: 300px;

            // background-color: pink;
            img {
              width: 100%;
              height: 100%;
            }
          }

          .button {
            margin-top: 30px;
            padding: 3px 20px;
            width: 70px;
            height: 40px;
            background-color: #fff;
            text-align: center;
            line-height: 40px;
            border: 1px solid #5b5b5b;
            border-radius: 8px;
          }
        }

        .you {
          padding: 10px;
          width: 250px;
          height: 120px;
          background-color: #fffdea;
          border-radius: 3px;

          .red {
            padding-top: 10px;
            padding-right: 10px;
            text-align: right;
            color: #f00;
            font-size: 14px;
          }

          .button {
            margin-top: 30px;
            padding: 3px 20px;
            width: 50px;
            height: 20px;
            background-color: #fff;
            text-align: center;
            font-size: 10px;
            line-height: 20px;
            border: 1px solid #5b5b5b;
            border-radius: 8px;
          }
        }
      }
    }

    .van-tab {
      background-color: #e5e5e5;
    }

    .ban {
      margin-top: 15px;
      width: 400px;

      .old {
        padding-bottom: 5px;

        span {
          img {
            width: 70px;
            height: 30px;
          }
        }
      }

      .toast {
        padding-top: 5px;
        font-size: 12px;
        color: rgb(255, 41, 41);
      }

      input {
        width: 100%;
        height: 30px;
        border: none;
      }
    }

    .btn {
      margin-top: 35px;
      padding: 3px 30px;
      width: 50px;
      height: 30px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      background-color: #6170c3;
      border-radius: 8px;
    }
  }
}
</style>