<template>
  <view class="baseinfo">
    <view class="box">
      <u-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="loginForm"
        :labelWidth="0"
      >
        <u-form-item
          v-for="(item, index) in formAttrList"
          :key="index"
          :prop="`userInfo.${item.modelName}`"
        >
          <u-input
            :border="index === 2 ? 'none' : 'bottom'"
            v-model="model1.userInfo[`${item.modelName}`]"
            :placeholder="item.placeholder"
            :clearable="true"
            :type="'password'"
          ></u-input>
        </u-form-item>
      </u-form>
    </view>

    <view class="save-btn">
      <u-button
        @click="submit"
        type="primary"
        :customStyle="{
          'border-radius': '43rpx',
        }"
        >保存</u-button
      >
    </view>
  </view>
</template>
<script setup lang="ts">
// 表单属性清单
const formAttrList = ref([
  {
    modelName: "password",
    type: "password",
    placeholder: "请输入当前密码",
  },
  {
    modelName: "passwordNew",
    type: "password",
    placeholder: "请输入新密码",
  },
  {
    modelName: "passwordConfirm",
    type: "password",
    placeholder: "请确认新密码",
  },
]);
const model1 = <any>reactive({
  userInfo: {
    userName: "",
    password: "",
  },
});
const rules = ref({
  "userInfo.password": {
    type: "string",
    required: true,
    message: "请输入当前密码",
    trigger: ["blur", "change"],
  },
  "userInfo.passwordNew": {
    type: "string",
    required: true,
    message: "请输入新密码",
    trigger: ["blur", "change"],
  },
  "userInfo.passwordConfirm": {
    type: "string",
    required: true,
    message: "请输入确认密码",
    trigger: ["blur", "change"],
  },
});

const submit = () => {};
</script>
<style lang="scss">
.baseinfo {
  background: #f8f8f8;
  height: 100vh;
  padding: 26.28rpx 25.64rpx;
  .box {
    padding: 18.59rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
    border-radius: 13rpx;
    font-size: 27rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    ::v-deep .u-border-bottom {
      border-color: rgb(233 233 233 / 0.76) !important;
    }
    ::v-deep .u-form-item__body__right__message {
      height: 0px;
      display: none;
    }
    ::v-deep .u-form-item {
      height: 45px;
    }
  }
  .save-btn {
    margin-top: 150px;
    button {
      width: 80%;
    }
  }
}
</style>
