<template>
  <div class="change-person-container">
    <div class="change-content">
      <!-- 头部标题 -->
      <div class="page-header">
        <div class="page-title">变更采购负责人</div>
      </div>

      <!-- 步骤条 -->
      <div class="steps-container">
        <!-- 步骤1 -->
        <div class="step-item" :class="{ active: currentStep >= 1 }">
          <div class="step-circle">
            <el-icon v-if="currentStep >= 1"><Check /></el-icon>
            <span v-else>1</span>
          </div>
          <div class="step-label">验证身份</div>
        </div>
        <div class="step-line" :class="{ active: currentStep > 1 }"></div>

        <!-- 步骤2 -->
        <div class="step-item" :class="{ active: currentStep >= 2 }">
          <div class="step-circle">
            <el-icon v-if="currentStep > 2"><Check /></el-icon>
            <span v-else>2</span>
          </div>
          <div class="step-label">选择人员</div>
        </div>
        <div class="step-line" :class="{ active: currentStep > 2 }"></div>

        <!-- 步骤3 -->
        <div class="step-item" :class="{ active: currentStep >= 3 }">
          <div class="step-circle">
            <span v-if="currentStep < 3">3</span>
            <el-icon v-else><Check /></el-icon>
          </div>
          <div class="step-label">完成</div>
        </div>
      </div>

      <!-- 步骤1：验证身份内容 -->
      <div class="step-content" v-if="currentStep === 1">
        <el-form ref="step1FormRef" :model="step1Form" label-width="120px" class="verify-form">
          <el-form-item label="手机号码：">
            <div class="form-item-wrapper">
              <el-input v-model="step1Form.phone" placeholder="请输入手机号码" class="form-input" />
              <span class="form-tip">若该手机号已无法使用请联系客服</span>
            </div>
          </el-form-item>

          <el-form-item label="验证码：">
            <div class="form-item-wrapper">
              <el-input v-model="step1Form.code" placeholder="短信验证码" class="form-input code-input">
                <template #suffix>
                  <el-button link class="send-code-btn" :disabled="countdown > 0" @click="handleSendCode">
                    {{ countdown > 0 ? `${countdown}s后发送` : '发送验证码' }}
                  </el-button>
                </template>
              </el-input>
            </div>
          </el-form-item>

          <el-form-item label=" ">
            <div class="captcha-box">
              <el-radio v-model="step1Form.verified" :label="true" class="captcha-radio">点击验证</el-radio>
            </div>
          </el-form-item>

          <el-form-item label=" " class="action-item">
            <el-button type="primary" class="next-btn" @click="handleNextStep">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤2：选择人员内容 (模拟) -->
      <div class="step-content" v-if="currentStep === 2">
        <el-form label-width="120px" class="verify-form">
          <el-form-item label="选择新负责人：">
            <el-select v-model="step2Form.person" placeholder="请选择新采购负责人" class="form-input">
              <el-option label="张三" value="zhangsan" />
              <el-option label="李四" value="lisi" />
            </el-select>
          </el-form-item>
          <el-form-item label=" " class="action-item">
            <el-button @click="currentStep = 1">上一步</el-button>
            <el-button type="primary" class="next-btn" @click="currentStep = 3" style="width: auto; padding: 0 40px">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤3：完成内容 (模拟) -->
      <div class="step-content" v-if="currentStep === 3">
        <div class="success-content">
          <el-icon class="success-icon" color="#e60012" :size="80"><CircleCheckFilled /></el-icon>
          <div class="success-title">负责人变更成功！</div>
          <el-button type="primary" class="next-btn" style="margin-top: 40px; width: 200px" @click="currentStep = 1">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Check, CircleCheckFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { smsCode } from '@/api/breg/index';

const currentStep = ref(1);

const step1Form = reactive({
  phone: '',
  code: '',
  verified: false
});
const timer = ref<any>(null);
const step2Form = reactive({
  person: ''
});

const countdown = ref(0);

// 发送验证码
const handleSendCode = () => {
  if (countdown.value > 0) return;
  if (step1Form.phone) {
    smsCode({ phonenumber: step1Form.phone }).then((res: any) => {
      if (res.code == 200) {
        ElMessage({
          message: '验证码已发送',
          type: 'success'
        });
        startCountdown();
      }
    });
  } else {
    ElMessage({
      message: '请输入正确的手机号码',
      type: 'warning'
    });
    return;
  }
};

// 启动倒计时
const startCountdown = () => {
  countdown.value = 60;

  timer.value = setInterval(() => {
    countdown.value--;
  }, 1000);
};
const handleNextStep = () => {
  if (!step1Form.phone || !step1Form.code) {
    ElMessage.warning('请填写完整的手机号和验证码');
    return;
  }
  if (!step1Form.verified) {
    ElMessage.warning('请完成点击验证');
    return;
  }
  currentStep.value = 2;
};
</script>

<style scoped lang="scss">
.change-person-container {
  background: #f4f5f5;
  min-height: 100%;
  padding: 0px;
  flex: 1;
}

.change-content {
  background: #fff;
  border-radius: 4px;
  min-height: calc(100vh - 40px);
  margin: 0 auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .page-header {
    border-bottom: 1px solid #f0f0f0;
    padding: 24px 30px;

    .page-title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
  }
}

.steps-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px auto 70px;
  max-width: 650px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 80px;

  .step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ccc;
    margin-bottom: 12px;
    font-weight: 500;
    transition: all 0.3s;
  }

  .step-label {
    font-size: 14px;
    color: #999;
    transition: all 0.3s;
  }

  &.active {
    .step-circle {
      border-color: #e60012;
      color: #e60012;
    }
    .step-label {
      color: #e60012;
      font-weight: 500;
    }
  }
}

.step-line {
  flex: 1;
  height: 2px;
  background: #ddd;
  margin: 0 10px;
  margin-bottom: 30px; /* 居中对齐横线与圆圈中心 */
  transition: all 0.3s;

  &.active {
    background: #e60012;
  }
}

.step-content {
  display: flex;
  justify-content: center;
  padding-bottom: 100px;
}

.verify-form {
  width: 550px;

  :deep(.el-form-item__label) {
    font-size: 14px;
    color: #333;
    font-weight: normal;
  }

  .form-item-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;

    .form-input {
      width: 320px;

      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        border-radius: 2px;
        background-color: #f7f9fb;
        &.is-focus {
          box-shadow: 0 0 0 1px #e60012 inset !important;
        }
      }

      :deep(.el-input__inner) {
        height: 38px;
      }
    }

    .form-tip {
      font-size: 12px;
      color: #999;
      white-space: nowrap;
    }
  }

  .send-code-btn {
    color: #e60012;
    font-size: 14px;
    font-weight: 500;

    &:hover {
      color: #159c81;
    }
    &.is-disabled {
      color: #999;
    }
  }

  .captcha-box {
    width: 320px;
    height: 42px;
    background: #f4f6fb;
    border: 1px solid #ccd6e8;
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .captcha-radio {
      :deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #bbc7da;
        background: #bbc7da;
        &::after {
          background-color: #6a82a7;
          width: 6px;
          height: 6px;
        }
      }
      :deep(.el-radio__inner) {
        width: 16px;
        height: 16px;
      }
      :deep(.el-radio__label) {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .action-item {
    margin-top: 15px;
  }

  .next-btn {
    width: 320px;
    height: 40px;
    background-color: #e60012;
    border-color: #e60012;
    border-radius: 2px;
    font-size: 14px;
  }
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;

  .success-icon {
    margin-bottom: 25px;
  }

  .success-title {
    font-size: 18px;
    color: #333;
    font-weight: 500;
  }

  .next-btn {
    background-color: #e60012;
    border-color: #e60012;
    &:hover {
      background-color: #159c81;
      border-color: #159c81;
    }
  }
}
</style>
