<template>
  <div class="app-container">
    <el-form ref="assessmentFormRef" :model="form" :rules="rules" label-width="120px" label-position="top">
      
      <!-- 1. 基本信息 -->
      <el-card class="box-card mb20" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>

        <el-row :gutter="40">
          <el-col :span="16">
            <el-form-item label="测评名称" prop="title">
              <el-input v-model="form.title" placeholder="请输入名称" maxlength="100" show-word-limit />
              <div class="form-tip">最多可输入100个字符</div>
            </el-form-item>

            <el-form-item label="级别" prop="level">
              <el-select v-model="form.level" placeholder="请选择" style="width: 100%">
                <el-option label="初级" value="junior" />
                <el-option label="中级" value="middle" />
                <el-option label="高级" value="senior" />
              </el-select>
            </el-form-item>

            <el-form-item label="岗位" prop="post">
              <el-select v-model="form.post" placeholder="请选择" style="width: 100%">
                <el-option label="审计员" value="1" />
                <el-option label="会计师" value="2" />
              </el-select>
            </el-form-item>

            <el-form-item label="岗位类型" prop="postType">
              <el-select v-model="form.postType" placeholder="请选择" style="width: 100%">
                <el-option label="全职" value="full-time" />
                <el-option label="项目制" value="project" />
                <el-option label="实习" value="intern" />
              </el-select>
            </el-form-item>

            <el-form-item label="详情描述" prop="description">
              <editor v-model="form.description" :min-height="200" />
            </el-form-item>

            <el-form-item label="标签">
              <div class="tag-container">
                <el-button type="primary" link @click="showInput = true">
                   <el-icon><i-ep-plus /></el-icon> 添加标签
                </el-button>
                <div class="tags-list">
                  <el-tag
                    v-for="tag in form.labels"
                    :key="tag"
                    closable
                    :disable-transitions="false"
                    @close="handleCloseTag(tag)"
                    class="mr10"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="inputValue"
                    class="input-new-tag"
                    size="small"
                    @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm"
                    style="width: 100px"
                  />
                  <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商品主图" prop="mainImage">
              <image-upload v-model="form.mainImage" :limit="1" />
              <div class="form-tip">支持JPG、PNG格式。建议尺寸800*800px</div>
            </el-form-item>

            <el-form-item label="商品相册" prop="album">
              <image-upload v-model="form.album" :limit="5" />
              <div class="form-tip">最多支持上传5张图片，第一张将作为详情页封面</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 2. 作答信息 -->
      <el-card class="box-card mb20 border-none" shadow="never">
        <div class="section-title">作答信息</div>
        
        <div class="mt20">
          <div class="field-label">作答时长（分钟） <span class="required-star">*</span></div>
          <el-form-item prop="duration" label-width="0">
            <el-input v-model="form.duration" placeholder="请输入" class="full-width-input" />
          </el-form-item>
        </div>

        <div class="mt20">
          <div class="field-label">及格线 <span class="required-star">*</span></div>
          <el-row :gutter="60">
            <!-- 第一行 -->
            <el-col :span="12">
              <div class="score-item">
                <span class="score-text">能力A（总分100）</span>
                <el-input v-model="form.passingScore.a" placeholder="请输入及格分" class="score-input" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="score-item">
                <span class="score-text">能力A（总分100）</span>
                <el-input v-model="form.passingScore.b" placeholder="请输入及格分" class="score-input" />
              </div>
            </el-col>
            
            <!-- 第二行 -->
            <el-col :span="12" class="mt20">
              <div class="score-item">
                <span class="score-text">能力A（总分100）</span>
                <el-input v-model="form.passingScore.c" placeholder="请输入及格分" class="score-input" />
              </div>
            </el-col>
            <el-col :span="12" class="mt20">
              <div class="score-item">
                <span class="score-text">能力A（总分100）</span>
                <el-input v-model="form.passingScore.d" placeholder="请输入及格分" class="score-input" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 3. 价格与上架 -->
      <el-card class="box-card" shadow="never" style="margin-bottom: 80px;">
        <template #header>
          <div class="card-header">
            <span>价格与上架</span>
          </div>
        </template>

        <el-row :gutter="40">
          <el-col :span="12">
             <el-form-item label="销售价" prop="price">
               <el-input v-model="form.price" placeholder="请输入价格" style="width: 100%">
                 <template #prefix>¥</template>
               </el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上架时间" prop="listingType">
              <el-radio-group v-model="form.listingType">
                <div class="radio-stack">
                  <el-radio label="immediate">立即上架</el-radio>
                  <div class="radio-with-picker">
                    <el-radio label="scheduled">定时上架</el-radio>
                    <el-date-picker
                      v-model="form.scheduledTime"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      size="small"
                      style="margin-left: 20px"
                      :disabled="form.listingType !== 'scheduled'"
                    />
                  </div>
                  <el-radio label="tbd">暂不上架</el-radio>
                </div>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 底部悬浮操作栏 -->
      <div class="footer-actions">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="handleSaveDraft">保存草稿</el-button>
        <el-button type="primary" @click="handlePublish">发布</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 实际引用项目中 Editor 和 ImageUpload 组件 (假设全局注册，若没注册需手动 import)

const route = useRoute();
const router = useRouter();
const assessmentId = route.query.id;

// 表单数据
const form = reactive({
  title: '',
  level: '',
  post: '',
  postType: '',
  description: '',
  labels: ['标签一', '标签二'],
  mainImage: '',
  album: '',
  duration: '',
  passingScore: {
    a: '',
    b: '',
    c: '',
    d: ''
  },
  price: '',
  listingType: 'immediate',
  scheduledTime: []
});

const rules = reactive({
  title: [{ required: true, message: '请输入测评名称', trigger: 'blur' }],
  level: [{ required: true, message: '请选择级别', trigger: 'change' }],
  postType: [{ required: true, message: '请选择岗位类型', trigger: 'change' }],
  mainImage: [{ required: true, message: '请上传商品主图', trigger: 'change' }],
  duration: [{ required: true, message: '请输入作答时长', trigger: 'blur' }],
  price: [{ required: true, message: '请输入销售价', trigger: 'blur' }]
});

// 标签功能
const inputVisible = ref(false);
const inputValue = ref('');
const saveTagInput = ref();

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

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    saveTagInput.value.focus();
  });
};

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

/** ---- 交互操作 ---- */
const handleCancel = () => {
  router.push('/system/assessment');
};

const handleSaveDraft = () => {
    // 调用保存草稿 API
    console.log('Save Draft:', form);
};

const handlePublish = () => {
    // 调用发布 API
    console.log('Publish:', form);
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #f0f2f5; /* 浅灰色背景，突出白块 */
  min-height: calc(100vh - 84px);
  padding: 20px;
}

.box-card {
  background-color: #fff; /* 信息模块设为纯白 */
  border: none;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,21,41,0.08); /* 增加微弱投影，使其产生层次感 */
  
  :deep(.el-card__body) {
    padding: 24px;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  
  &::before {
    content: '';
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 12px;
    border-radius: 2px;
  }
}

.field-label {
  font-size: 14px;
  font-weight: 500;
  color: #4e5969;
  margin-bottom: 12px;
}

.required-star {
  color: #f53f3f;
  margin-left: 4px;
}

.score-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.score-text {
  font-size: 14px;
  color: #4e5969;
  white-space: nowrap;
  margin-right: 16px;
  min-width: 120px;
}

.score-input {
  flex: 1;
}

.full-width-input {
  width: 100%;
}

.mt20 { margin-top: 20px; }
.mb20 { margin-bottom: 20px; }

/* 上架时间单选排列 */
.radio-stack {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.radio-with-picker {
  display: flex;
  align-items: center;
}

/* 底部操作栏 */
.footer-actions {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 200px; /* 侧边栏宽度，根据项目实际微调 */
  height: 60px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  z-index: 100;
}

/* 兼容响应式：侧边栏折叠时自动调整 */
.sidebar-collapse .footer-actions {
  left: 64px;
}
</style>
