<template>
  <div class="my" style="margin-top:7vh ;">
    <el-row :gutter="10">
      <div class="mybox">
        <el-col :span="infoWidth" :xs="24">
          <el-card class="box-card1">
            <!-- 标题 -->
            <template #header>
              <div class="card-header">
                <div v-if="isShowDiv"></div>
                <div style="font-weight: bold">个人信息 <span v-if="isShowPassword">:</span></div>
                <el-button v-if="isShowDiv" @click="changePassword" type="primary" plain size="small">修改密码</el-button>
              </div>

            </template>
            <div class="userDetail">
              <div class="userInfo_item">
                <div style="display: flex;align-items: center" class="userInfo_label">
                  <el-icon size="18" style="margin-right: 5px">
                    <User />
                  </el-icon>
                  <strong>工号 :</strong>


                </div>
                <div>{{ userParams.userNumber }}</div>
              </div>
              <div class="userInfo_item">
                <div style="display: flex;align-items: center" class="userInfo_label">
                  <el-icon size="18" style="margin-right: 5px">
                    <Notification />
                  </el-icon>
                  <strong>邮箱 :</strong>

                </div>
                <div>{{ userParams.email }}</div>
              </div>
              <div class="userInfo_item">
                <div style="display: flex;align-items: center" class="userInfo_label">
                  <el-icon size="18" style="margin-right: 5px">
                    <Notification />
                  </el-icon><strong>登录账号 :</strong>

                </div>
                <div>{{ userParams.loginAccount }}</div>
              </div>
              <div class="userInfo_item">
                <div style="display: flex;align-items: center" class="userInfo_label">
                  <el-icon size="18" style="margin-right: 5px">
                    <Folder />
                  </el-icon>
                  <strong>用户名称 :</strong>

                </div>
                <div>{{ userParams.userName }}</div>
              </div>
              <div class="userInfo_item">
                <div style="display: flex;align-items: center" class="userInfo_label">
                  <el-icon size="18" style="margin-right: 5px">
                    <Folder />
                  </el-icon>
                  <strong>手机号码 :</strong>

                </div>
                <div>{{ userParams.userPhone }}</div>
              </div>
              <div class="userInfo_item">
                <div style="display: flex;align-items: center" class="userInfo_label">
                  <el-icon size="18" style="margin-right: 5px">
                    <Folder />
                  </el-icon>
                  <strong>账号类型 :</strong>

                </div>
                <div>{{ userParams.accountType }}</div>
              </div>

            </div>
          </el-card>
        </el-col>
        <div class="line" v-if="isShowPassword"></div>
        <el-col :span="10" :xs="24" v-if="isShowPassword">
          <el-card class="box-card">
            <!-- 标题 -->
            <template #header>
              <div class="card-header">
                <div style="font-weight: bold">{{ isInitPassword ? '修改密码 :' : '初始化密码 :' }}</div>
              </div>
            </template>
            <div class="card-body">
              <el-form label-width="120px" ref="passwordRef" :model="userPassword" :rules="rules">
                <el-form-item label="旧密码" prop="oldPassword" :required="true" style="text-align:left;margin: 7vh 0;"
                  v-if="isInitPassword">
                  <el-input placeholder="请输入旧密码" v-model="userPassword.oldPassword" type="password" :prefix-icon="Lock"
                    show-password="true" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword" :required="true" style="text-align:left;margin: 7vh 0">
                  <el-input placeholder="请输入新密码" v-model="userPassword.newPassword" type="password" :prefix-icon="Lock"
                    show-password="true" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword" :required="true"
                  style="text-align:left;margin-top: 7vh;margin-bottom: 5vh">
                  <el-input placeholder="请确认新密码" v-model="userPassword.confirmPassword" type="password"
                    :prefix-icon="Lock" show-password="true" />
                </el-form-item>
                <el-form-item>
                  <div class="button-word">
                    <el-button color="#409eff" @click="handleSubmit" style="color: white">提交</el-button>
                    <el-button color="#409eff" @click="close" style="color: white">关闭</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-row>
  </div>
</template>
<script setup>
import { ElNotification } from 'element-plus'
import { useTagsView } from '@/stores/tagsview.js'
import { editPassword } from "@/api/auth/auth";
import { Lock } from '@element-plus/icons-vue'
import { ref } from 'vue';

const infoWidth = ref(22)
const isShowDiv = ref(true)
const isShowPassword = ref(false);
const isInitPassword = ref(true);
const userParams = ref({});
const passwordRef = ref();
const router = useRouter()
const userPassword = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const tagsViewStore = useTagsView()

const validatePasswordComplexity = (rule, value, callback) => {
  const reg = /^(?=.*[a-zA-Z])(?=.*\d).{1,9}$/; //密码必须是至少包含字母、数字，1-9位
  if (!reg.test(value)) {
    callback(new Error("密码必须是至少包含字母、数字，1-9位"));
  } else {
    callback();
  }
};


const validatePasswordEquality = (rule, value, callback) => {
  if (userPassword.value.newPassword != value) {
    callback(new Error("两次输入密码不一致!"));
  } else {
    callback();
  }
}
const rules = reactive({
  oldPassword: [
    { required: true, message: "旧密码不能为空", trigger: ["change", "blur"] },
  ],
  newPassword: [
    { required: true, message: "新密码不能为空", trigger: ["change", "blur"] },
    {
      required: true,
      trigger: ["change", "blur"],
      validator: validatePasswordComplexity
    }
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: ["change", "blur"] },
    {
      required: true,
      trigger: ["change", "blur"],
      validator: validatePasswordEquality
    }
  ],
})

const getInfo = async () => {
  await getAuthInfo().then(res => {
    userParams.value = res.data.user
    isInitPassword.value = res.data.initPassword
  })
}

const belongToRole = (roles) => {
  if (!roles) return;
  return roles.map(item => item.roleName).join('，')
}

// 修改密码
const handleSubmit = async () => {
  ElMessageBox.confirm(
    '提交成功',
    {
      confirmButtonText: '关闭',
      dangerouslyUseHTMLString: true,
      // type: 'warning',
      center: true,
      showCancelButton: false,
      'show-close': false,
      customStyle: {
        'max-width': '15%',
        height: '40%'
      },
      message: `<svg t="1726160648055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" data-spm-anchor-id="a313x.search_index.0.i2.2bb23a81IdR6cV" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#67c23a" p-id="2672" data-spm-anchor-id="a313x.search_index.0.i3.2bb23a81IdR6cV" class=""></path></svg>
      <br><br><div style="font-size: 18px;text-align:center"> 提交成功</div><br><br>`

    }
  )
  editPassword({
    ...userPassword.value
  }).then(res => {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
      passwordRef.value.resetFields()
    }
  })
}
// 关闭
const close = () => {
  // tagsViewStore.delVisitedViews(router.currentRoute.value.path)
  // router.push('/')
  isShowPassword.value = false
  isShowDiv.value = true
  infoWidth.value = 22
}

const changePassword = () => {
  isShowPassword.value = true
  isShowDiv.value = false
  infoWidth.value = 10
}
// onMounted(() => {
//   getInfo()
// })
</script>
<style lang="scss">
body,
div {
  margin: 0;
  padding: 0;
}

.my {
  margin: 0 auto;
  margin-top: 20px;

  .mybox {
    width: 100%;
    display: flex;
    justify-content: space-around;


  }

  .card-header {
    display: flex;
    justify-content: space-between
  }

  .box-card {
    height: 100%;
    // width: 100%;
    // background-color: blue;

  }

  .card-body {
    width: 90%;
    // display: flex;
    height: 45vh;
    // background-color: red;

    // justify-content: space-around;
    // flex-direction: column;
  }

  .line {

    border-left: 1px solid #000;
  }

  .userDetail {
    .userImg {
      height: 170px;
      text-align: center;
      border-bottom-style: solid;
      border-color: #daddd2;
      border-width: 1px;

      .avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    }
  }

  .userInfo_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // height: 70px;
    height: 9vh;
    // border-bottom-style: solid;
    // border-color: #daddd2;
    // border-width: 1px;
    //text-align: left;
    //line-height: 40px;

  }

  .userInfo_label {
    width: 100%;
    border-bottom-style: solid;
    border-color: #daddd2;
    border-width: 2px;
  }

  //
  //.userInfo_item > div {
  //  float: right;
  //}

  .button-word {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }


}
</style>
