<template>
  <div class="app-container">
    <el-card shadow="never" class="post-add-card">
      <div class="header-title">创建岗位</div>
      
      <!-- 步骤条 -->
      <div class="steps-container">
        <el-steps :active="activeStep" finish-status="success" align-center>
          <el-step title="岗位基本信息" />
          <el-step title="岗位测评信息" />
          <el-step title="完成创建" />
        </el-steps>
      </div>

      <div class="form-content-wrapper">
        <el-form 
          ref="postFormRef" 
          :model="form" 
          :rules="rules" 
          label-width="120px" 
          class="post-form" 
          label-position="right"
        >
          <!-- 第一步：岗位基本信息 -->
          <div v-if="activeStep === 0" class="step-content">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="岗位名称" prop="postName">
                  <el-input v-model="form.postName" placeholder="请输入" clearable style="width: 500px" />
                </el-form-item>
              </el-col>
              
              <el-col :span="24">
                <el-form-item label="公司名称" prop="companyName">
                  <el-input v-model="form.companyName" placeholder="请输入" clearable style="width: 500px" />
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="岗位简介" prop="postBrief">
                  <div style="width: 800px">
                    <editor v-model="form.postBrief" :min-height="150" />
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="办公地址" prop="address">
                  <div class="address-container">
                    <el-cascader
                      v-model="form.region"
                      :options="regionOptions"
                      placeholder="省 / 市 / 区"
                      style="width: 250px; margin-right: 10px; margin-bottom: 10px;"
                    />
                    <el-input v-model="form.detailAddress" placeholder="请输入详细地址" clearable style="width: 400px; margin-bottom: 10px;" />
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="岗位类型" prop="postType">
                  <el-select v-model="form.postType" placeholder="请选择" style="width: 300px">
                    <el-option label="全职" value="fulltime" />
                    <el-option label="实习" value="intern" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="薪资" prop="salary">
                  <el-input v-model="form.salary" placeholder="例如 12K-13K" clearable style="width: 300px" />
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="招聘人数" prop="recruitCount">
                  <div class="flex-items-center">
                    <el-input-number v-model="form.recruitCount" :min="1" :disabled="form.noLimitCount" style="width: 150px" />
                    <el-checkbox v-model="form.noLimitCount" label="不限" style="margin-left: 15px" />
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="报名时间" prop="applyDateRange">
                  <div class="flex-items-center flex-wrap">
                    <el-date-picker
                      v-model="form.applyDateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :disabled="form.noLimitDate"
                      style="margin-bottom: 5px"
                    />
                    <el-checkbox v-model="form.noLimitDate" label="不限" style="margin-left: 15px" />
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="急招" prop="isUrgent">
                  <el-radio-group v-model="form.isUrgent">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="学校要求" prop="schoolRequirement">
                  <el-select v-model="form.schoolRequirement" placeholder="不限" clearable style="width: 300px">
                    <el-option label="不限" value="none" />
                    <el-option label="985/211" value="top" />
                    <el-option label="本科以上" value="bachelor" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="性别" prop="genderRequirement">
                  <el-select v-model="form.genderRequirement" placeholder="不限" clearable style="width: 300px">
                    <el-option label="不限" value="0" />
                    <el-option label="男" value="1" />
                    <el-option label="女" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="年级" prop="gradeRequirement">
                  <el-select v-model="form.gradeRequirement" placeholder="请选择" clearable style="width: 300px">
                    <el-option label="大一" value="1" />
                    <el-option label="大二" value="2" />
                    <el-option label="大三" value="3" />
                    <el-option label="大四" value="4" />
                    <el-option label="应届生" value="fresh" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="到岗时间" prop="arriveTime">
                  <el-select v-model="form.arriveTime" placeholder="不限" clearable style="width: 300px">
                    <el-option label="一周内" value="1w" />
                    <el-option label="两周内" value="2w" />
                    <el-option label="一月内" value="1m" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="实习时长" prop="internshipDuration">
                  <el-select v-model="form.internshipDuration" placeholder="不限" clearable style="width: 300px">
                    <el-option label="3个月" value="3m" />
                    <el-option label="6个月" value="6m" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="是否出差" prop="needBusinessTrip">
                  <el-radio-group v-model="form.needBusinessTrip">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="岗位标签" prop="tags">
                  <div class="tags-wrapper">
                    <el-tag
                      v-for="tag in form.tags"
                      :key="tag"
                      class="mx-1"
                      closable
                      :disable-transitions="false"
                      @close="handleCloseTag(tag)"
                    >
                      {{ tag }}
                    </el-tag>
                    <el-input
                      v-if="inputVisible"
                      ref="InputRef"
                      v-model="inputValue"
                      class="ml-1 w-20"
                      size="small"
                      @keyup.enter="handleInputConfirm"
                      @blur="handleInputConfirm"
                      style="width: 100px"
                    />
                    <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                      + 标签
                    </el-button>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="岗位描述" prop="postDescription">
                  <div style="width: 800px">
                    <editor v-model="form.postDescription" :min-height="200" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 第二步：岗位测评信息 -->
          <div v-if="activeStep === 1" class="step-content">
            <el-row :gutter="20" justify="center">
              <el-col :xs="24" :sm="24" :md="18" :lg="14">
                <el-form-item label="岗位级别" prop="postLevel">
                  <el-select v-model="form.postLevel" placeholder="请选择" style="width: 100%" clearable>
                    <el-option label="A1" value="A1" />
                    <el-option label="A2" value="A2" />
                  </el-select>
                </el-form-item>

                <el-form-item label="测评时长" prop="examDuration">
                  <el-input v-model="form.examDuration" placeholder="请输入">
                    <template #append>分钟</template>
                  </el-input>
                </el-form-item>

                <el-form-item label="及格线" required>
                  <div class="score-input-group">
                    <div class="score-row">
                      <span class="score-label">能力A（总分100）</span>
                      <el-input v-model="form.passingScoreA" placeholder="请输入及格分" style="width: 200px">
                        <template #append>分</template>
                      </el-input>
                    </div>
                    <div class="score-row">
                      <span class="score-label">能力C（总分100）</span>
                      <el-input v-model="form.passingScoreC" placeholder="请输入及格分" style="width: 200px">
                        <template #append>分</template>
                      </el-input>
                    </div>
                    <div class="score-row">
                      <span class="score-label">能力D（总分100）</span>
                      <el-input v-model="form.passingScoreD" placeholder="请输入及格分" style="width: 200px">
                        <template #append>分</template>
                      </el-input>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 第三步：完成创建 -->
          <div v-if="activeStep === 2" class="step-content success-view">
            <div class="success-content">
              <el-icon class="success-icon" color="#67C23A"><CircleCheckFilled /></el-icon>
              <div class="success-text">创建成功</div>
              <el-button type="primary" class="finish-btn" @click="handleBack">完成</el-button>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="footer-buttons" v-if="activeStep < 2">
            <el-button @click="handleBack">取消</el-button>
            <el-button type="primary" v-if="activeStep === 0" @click="nextStep">下一步</el-button>
            <el-button type="info" v-if="activeStep === 1" @click="prevStep">上一步</el-button>
            <el-button type="primary" v-if="activeStep === 1" @click="handleSubmit">提交</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup name="PostAdd" lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { ElInput } from 'element-plus';
import { CircleCheckFilled } from '@element-plus/icons-vue';
import Editor from '@/components/Editor/index.vue';

const router = useRouter();
const activeStep = ref(0);
const postFormRef = ref();

// 表单数据绑定
const form = reactive({
  postName: '',
  companyName: '',
  postBrief: '', // 岗位简介（富文本）
  region: [], // 地区级联选择
  detailAddress: '', // 详细地址
  postType: 'fulltime',
  salary: '',
  recruitCount: 1,
  noLimitCount: false,
  applyDateRange: [],
  noLimitDate: false,
  isUrgent: false,
  schoolRequirement: 'none',
  genderRequirement: '0',
  gradeRequirement: '',
  arriveTime: '',
  internshipDuration: '',
  needBusinessTrip: false,
  tags: ['标签一'],
  postDescription: '', // 岗位描述（富文本）
  // 第二步字段
  postLevel: 'A1',
  examDuration: '',
  passingScoreA: '',
  passingScoreC: '',
  passingScoreD: '',
});

// 表单校验规则
const rules = {
  postName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
  companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  region: [{ required: true, message: '请选择办公地址', trigger: 'change' }],
  postType: [{ required: true, message: '请选择岗位类型', trigger: 'change' }],
  recruitCount: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
};

// 模拟级联地区数据
const regionOptions = [
  {
    value: 'shanghai',
    label: '上海市',
    children: [
      {
        value: 'huangpu',
        label: '黄浦区',
      },
      {
        value: 'xuhui',
        label: '徐汇区',
      }
    ],
  },
  {
    value: 'beijing',
    label: '北京市',
    children: [
      {
        value: 'chaoyang',
        label: '朝阳区',
      }
    ],
  }
];

// 动态标签相关逻辑
const inputValue = ref('');
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();

const handleCloseTag = (tag: string) => {
  form.tags.splice(form.tags.indexOf(tag), 1);
};

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    form.tags.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = '';
};

// 步骤控制逻辑
const nextStep = () => {
  postFormRef.value.validate((valid: boolean) => {
    if (valid) {
      activeStep.value++;
    }
  });
};

const prevStep = () => {
  activeStep.value--;
};

const handleSubmit = () => {
  activeStep.value = 2; // 模拟提交成功
};

const handleBack = () => {
  router.push('/system/post');
};

const handleRestart = () => {
  activeStep.value = 0;
  // 此处可重置表单数据
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}

.post-add-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  
  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
  }
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #303133;
}

.steps-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px;
}

.form-content-wrapper {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.step-content {
  margin-bottom: 40px;
}

.success-view {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.success-icon {
  font-size: 80px;
  margin-bottom: 10px;
}

.success-text {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
}

.finish-btn {
  width: 120px;
  border-radius: 4px;
}

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.address-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.flex-items-center {
  display: flex;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.score-input-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 15px;
  
  .score-label {
    font-size: 14px;
    color: #606266;
    width: 130px;
  }
}

.footer-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  padding-bottom: 20px;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .post-add-card :deep(.el-card__body) {
    padding: 15px;
  }
  
  .header-title {
    margin-bottom: 20px;
  }
}
</style>
