<template>
  <div class="model">
    <div class="header">忘记密码</div>

    <div class="content">
      <div class="step">
        <el-steps :active="currentIndex">
          <el-step title="账户验证" />
          <el-step title="密码设置" />
          <el-step title="修改成功" />
        </el-steps>
      </div>
      <div class="form">
        <slot name="content" />
      </div>
    </div>

    <div class="bottom flex-around">
      <slot name="btns" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  currentIndex: number
}>()
</script>

<style scoped lang="less">
.model {
  width: 1000px;
  height: 580px;
  background: #ffffff;
  border-radius: 4px;
  color: #333333;
  .header {
    height: 84px;
    border-bottom: 1px solid #e4e4e4;
    font-size: 20px;
    font-weight: 500;
    padding-left: 32px;
    line-height: 84px;
  }
  .content {
    height: calc(100% - 84px - 88px);
    ::v-deep(.form) {
      padding: 0 300px;
      .el-input {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
      }
      .el-form-item__label:before {
        display: none;
      }
    }

    ::v-deep(.step) {
      width: 100%;
      padding: 32px 192px 60px 192px;
      .el-step__line {
        height: 1px;
      }
      .is-finish {
        color: #3480c6 !important;

        border-color: #3480c6 !important;
        .el-step__line {
          background-color: #3480c6 !important;
        }
        .el-step__icon.is-text {
          border-color: #3480c6 !important;
          color: #3480c6 !important;
        }
      }

      .el-step__title {
        color: #999;
        font-size: 16px;
        font-weight: 400;
        margin-left: -20px;
      }
      .el-step__icon.is-text {
        border-width: 1px;
        border-color: #999999;
        color: #999;
      }
    }
  }
  .bottom {
    height: 88px;
    width: 100%;
    border-top: 1px solid #e4e4e4;
  }
}
</style>
