<template>
  <div class="app-container content-page">
    <el-card class="box-card border-none main-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="header-title">创建商品</span>
        </div>
      </template>

      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="goods-form">
        <!-- 1. 商品名称 -->
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" class="form-input" />
        </el-form-item>

        <!-- 2. 商品类型 -->
        <el-form-item label="商品类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择" class="form-input" clearable>
            <el-option label="签约" value="contract" />
            <el-option label="咨询" value="consult" />
          </el-select>
        </el-form-item>

        <!-- 3. 绑定岗位 -->
        <el-form-item label="绑定岗位" prop="post">
          <el-select v-model="form.post" placeholder="请选择" class="form-input" clearable>
            <el-option label="签约/A1-1" value="A1-1" />
            <el-option label="审计员/B2" value="B2" />
          </el-select>
        </el-form-item>

        <!-- 4. 商品内容 -->
        <el-form-item label="商品内容" prop="contentType">
          <div class="content-type-section">
            <el-radio-group v-model="form.contentType" class="content-toggle">
              <el-radio-button label="richText">富文本</el-radio-button>
              <el-radio-button label="link">链接</el-radio-button>
            </el-radio-group>

            <div class="content-field mt20">
              <!-- 富文本编辑器 -->
              <div v-if="form.contentType === 'richText'" class="editor-wrapper">
                <editor v-model="form.content" :min-height="300" />
              </div>

              <!-- 链接输入 -->
              <div v-else class="link-wrapper">
                <el-input v-model="form.linkUrl" placeholder="https://" class="form-input" />
              </div>
            </div>
          </div>
        </el-form-item>

        <!-- 底部按钮 -->
        <div class="form-actions mt40">
          <el-button @click="handleCancel" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="handleSave" class="save-btn">保存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const formRef = ref();

const form = reactive({
  name: '',
  type: 'contract',
  post: 'A1-1',
  contentType: 'richText',
  content: '',
  linkUrl: ''
});

const rules = {
  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
  post: [{ required: true, message: '请选择绑定岗位', trigger: 'change' }]
};

const handleCancel = () => {
  router.push('/system/goods/index');
};

const handleSave = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('保存成功');
      router.push('/system/goods/index');
    }
  });
};
</script>

<style scoped lang="scss">
.content-page {
  background-color: #fff;
  min-height: calc(100vh - 84px);
  padding: 40px;
  display: flex;
  justify-content: center;
}

.main-card {
  width: 100%;
  max-width: 900px;
  border: none !important;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.goods-form {
  margin-top: 20px;
}

.form-input {
  width: 100%;
  max-width: 480px;
}

.content-type-section {
  width: 100%;
}

.content-toggle {
  :deep(.el-radio-button__inner) {
    padding: 8px 20px;
    border-radius: 4px;
    margin-right: 10px;
    border: 1px solid #dcdfe6 !important;
    box-shadow: none !important;
  }
  
  :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-radius: 4px;
  }
  
  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    background-color: #fff;
    color: #409eff;
    border-color: #409eff !important;
  }
}

.editor-wrapper {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cancel-btn {
  width: 100px;
}

.save-btn {
  width: 100px;
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
  
  &::before {
    margin-right: 4px !important;
  }
}
</style>
