<template>
  <div>
    <section class="intro">
      <!-- 背景图片 -->
      <div class="background-container">
        <img src="/picture/bg1.png" class="background-image bg1" alt="背景图片1" />
        <img src="/picture/bg2.png" class="background-image bg2" alt="背景图片2" />
        <img src="/picture/bg3.png" class="background-image bg3" alt="背景图片3" />
        <img src="/picture/bg4.png" class="background-image bg4" alt="背景图片4" />
      </div>

      <!-- 内容 -->
      <h1 style="color: rgba(87, 87, 87, 1);">填写你的恋爱偏好</h1>
      <div class="card-container">
        <el-card class="card" v-for="card in cards" :key="card.title">
          <div class="card-image">
            <img :src="`/picture/${card.image}`" alt="卡片图片" />
          </div>
          <h3>{{ card.title }}</h3>
          <p>{{ card.description }}</p>
        </el-card>
      </div>
    </section>
  </div>
  <el-form class="form" ref="form" :model="formData" :rules="rules">
    <fieldset>
      <legend style="color: #ff77a9;">- 基本属性 -</legend>
      <el-form-item label="匹配的性别" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
          <el-radio label="不限">不限</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="匹配对象的年龄区间" prop="ageRange">
        <el-input-number v-model="formData.minAge" placeholder="最小" :min="0" />
        <span>-</span>
        <el-input-number v-model="formData.maxAge" placeholder="最大" :min="0" />
      </el-form-item>
      <el-form-item label="匹配对象的距离范围" prop="distance">
        <el-select v-model="formData.distance" placeholder="请选择">
          <el-option label="同城" value="同城"></el-option>
          <el-option label="同省" value="同省"></el-option>
          <el-option label="不限" value="不限"></el-option>
        </el-select>
      </el-form-item>
    </fieldset>


    <fieldset>
      <legend style="color: #ff77a9">- 个人资料 -</legend>
      <el-form-item label="希望匹配对象的最低教育水平" prop="education">
        <el-select v-model="formData.education" placeholder="请选择">
          <el-option label="本科" value="本科"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="不限" value="不限"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="希望匹配对象的职业类型" prop="occupation">
        <el-select v-model="formData.occupation" placeholder="请选择">
          <el-option label="工程师" value="工程师"></el-option>
          <el-option label="教师" value="教师"></el-option>
          <el-option label="医生" value="医生"></el-option>
          <el-option label="不限" value="不限"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="匹配对象的身高范围" prop="heightRange">
        <el-input-number v-model="formData.minHeight" placeholder="最小" :min="0" />
        <span>-</span>
        <el-input-number v-model="formData.maxHeight" placeholder="最大" :min="0" />
      </el-form-item>
      <el-form-item label="匹配对象的体重范围" prop="weightRange">
        <el-input-number v-model="formData.minWeight" placeholder="最小" :min="0" />
        <span>-</span>
        <el-input-number v-model="formData.maxWeight" placeholder="最大" :min="0" />
      </el-form-item>
    </fieldset>

    <fieldset>
      <legend style="color: #ff77a9">- 生活方式 -</legend>
      <el-form-item label="是否接受吸烟者" prop="smoker">
        <el-radio-group v-model="formData.smoker">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否接受饮酒者" prop="drinker">
        <el-radio-group v-model="formData.drinker">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否接受素食主义者" prop="vegetarian">
        <el-radio-group v-model="formData.vegetarian">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </fieldset>

    <fieldset>
      <legend style="color: #ff77a9">- 兴趣爱好 -</legend>
      <el-form-item label="喜欢的运动" prop="sports">
        <el-checkbox-group v-model="formData.sports">
          <el-checkbox label="游泳">游泳</el-checkbox>
          <el-checkbox label="跑步">跑步</el-checkbox>
          <el-checkbox label="健身">健身</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="喜欢的音乐类型" prop="musicTypes">
        <el-checkbox-group v-model="formData.musicTypes">
          <el-checkbox label="摇滚">摇滚</el-checkbox>
          <el-checkbox label="古典">古典</el-checkbox>
          <el-checkbox label="流行">流行</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="喜欢的电影类型" prop="movieTypes">
        <el-checkbox-group v-model="formData.movieTypes">
          <el-checkbox label="喜剧">喜剧</el-checkbox>
          <el-checkbox label="动作">动作</el-checkbox>
          <el-checkbox label="科幻">科幻</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </fieldset>
  
    <fieldset>
      <legend style="color: #ff77a9">- 价值观和宗教信仰 -</legend>
      <el-form-item label="生活价值观" prop="lifeValue">
        <el-radio-group v-model="formData.lifeValue">
          <el-radio label="家庭第一">家庭第一</el-radio>
          <el-radio label="事业导向">事业导向</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="宗教信仰" prop="religion">
        <el-radio-group v-model="formData.religion">
          <el-radio label="有">有</el-radio>
          <el-radio label="无">无</el-radio>
        </el-radio-group>
      </el-form-item>
    </fieldset>

    <fieldset>
      <legend style="color: #ff77a9">- 关系目标 -</legend>
      <el-form-item label="寻找的关系类型" prop="relationshipType">
        <el-radio-group v-model="formData.relationshipType">
          <el-radio label="长期关系">长期关系</el-radio>
          <el-radio label="短期约会">短期约会</el-radio>
          <el-radio label="友谊">友谊</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="maritalStatus">
        <el-radio-group v-model="formData.maritalStatus">
          <el-radio label="未婚">未婚</el-radio>
          <el-radio label="离异">离异</el-radio>
          <el-radio label="丧偶">丧偶</el-radio>
        </el-radio-group>
      </el-form-item>
    </fieldset>

    <fieldset>
      <legend style="color: #ff77a9">- 经济条件 -</legend>
      <el-form-item label="希望匹配对象的最低收入水平" prop="minIncome">
        <el-radio-group v-model="formData.minIncome">
          <el-radio label="5K">5K</el-radio>
          <el-radio label="10K">10K</el-radio>
          <el-radio label="15K">15K</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="希望匹配对象是否拥有房产" prop="ownProperty">
        <el-radio-group v-model="formData.ownProperty">
          <el-radio label="是" >是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </fieldset>

    <fieldset>
      <legend style="color: #ff77a9">- 个性特征 -</legend>
      <el-form-item label="希望对方的性格类型" prop="personalityType">
        <el-radio-group v-model="formData.personalityType">
          <el-radio label="外向">外向</el-radio>
          <el-radio label="内敛">内敛</el-radio>
          <el-radio label="幽默">幽默</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否希望对方有幽默感" prop="senseOfHumor">
        <el-radio-group v-model="formData.senseOfHumor">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否希望对方非常诚实" prop="honesty">
        <el-radio-group v-model="formData.honesty">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </fieldset>

    <el-button type="primary" class="submit-button" @click="handleSubmit" >生成恋爱树</el-button>
  </el-form>
</template>

<script>
// import axios from '../utils/axiosConfig';
export default {
  name: "PreferenceForm",
  data() {
    return {
      formData: {
        gender: "",
        minAge: null,
        maxAge: null,
        distance: "",
        education: "",
        occupation: "",
        minHeight: null,
        maxHeight: null,
        minWeight: null,
        maxWeight: null,
        smoker: "",
        drinker: "",
        vegetarian: "",
        sports: [],
        musicTypes: [],
        movieTypes: [],
        lifeValue: "",
        religion: "",
        relationshipType: "",
        maritalStatus: "",
        minIncome: "",
        ownProperty: "",
        personalityType: "",
        senseOfHumor: "",
        honesty: ""
      },

      cards: [
        { 
          title: "恋爱偏好", 
          description: "为了找到与你的心动嘉宾，请你诚实填写你的恋爱偏好",
          image: "tu1.png" 
        },
        { 
          title: "查看结果", 
          description: "查看你的恋爱树，了解你的恋爱类型",
          image: "tu2.png" 
        },
        { 
          title: "释放潜力", 
          description: "与你的心动嘉宾开始聊天，勇敢追求真爱",
          image: "tu3.png" 
        },
      ],
      
      rules: {
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        ageRange: [
        { validator: this.checkAgeRange, trigger: 'change' }
      ],
        distance: [{ required: true, message: '请选择距离范围', trigger: 'change' }],
      //   heightRange: [
      //   { validator: this.checkHeightRange, trigger: 'change' }
      // ],
      //   weightRange: [
      //   { validator: this.checkWeightRange, trigger: 'change' }
      // ],
        education: [{ required: true, message: '请选择最低教育水平', trigger: 'change' }],
        smoker: [{ required: true, message: '请选择抽烟情况', trigger: 'change' }],
        drinker: [{ required: true, message: '请选择喝酒情况', trigger: 'change' }],
        vegetarian: [{ required: true, message: '请选择饮食况', trigger: 'change' }],
        occupation: [{ required: true, message: '请选择职业类型', trigger: 'change' }],
        sports: [{ required: true, message: '请选择喜欢的运动', trigger: 'change' }],
        musicTypes: [{ required: true, message: '请选择喜欢的音乐类型', trigger: 'change' }],
        movieTypes: [{ required: true, message: '请选择喜欢的电影类型', trigger: 'change' }],
        lifeValue: [{ required: true, message: '请选择生活价值观', trigger: 'change' }],
        religion: [{ required: true, message: '请选择宗教信仰', trigger: 'change' }],
        relationshipType: [{ required: true, message: '请选择关系类型', trigger: 'change' }],
        maritalStatus: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
        minIncome: [{ required: true, message: '请选择最低收入', trigger: 'change' }],
        ownProperty: [{ required: true, message: '请选择房产情况', trigger: 'change' }],
        personalityType: [{ required: true, message: '请选择性格类型', trigger: 'change' }],
        senseOfHumor: [{ required: true, message: '请选择是否希望对方有幽默感', trigger: 'change' }],
        honesty: [{ required: true, message: '请选择是否希望对方非常诚实', trigger: 'change' }],
      },
    };
  },
  methods: {
    // 自定义范围验证方法
    validateRange(minKey, maxKey) {
      return (rule, value, callback) => {
        const min = this.formData[minKey];
        const max = this.formData[maxKey];
        if (min !== null && max !== null && min > max) {
          callback(new Error("最小值不能大于最大值"));
        } else {
          callback();
        }
      };
    },
    checkAgeRange(rule, value, callback) {
    if (this.formData.minAge !== null && this.formData.maxAge !== null && this.formData.minAge > this.formData.maxAge) {
      callback(new Error('最小年龄不能大于最大年龄'));
    } else if (this.formData.minAge === null || this.formData.maxAge === null) {
      callback(new Error('年龄范围必须填写'));
    } else {
      callback();
    }
  },
  checkHeightRange(rule, value, callback) {
    if (this.formData.minHeight !== null && this.formData.maxHeight !== null && this.formData.minHeight > this.formData.maxHeight) {
      callback(new Error('最小身高不能大于最大身高'));
    } else if (this.formData.minHeight === null || this.formData.maxHeight === null) {
      callback(new Error('身高范围必须填写'));
    } else {
      callback();
    }
  },
  checkWeightRange(rule, value, callback) {
    if (this.formData.minWeight !== null && this.formData.maxWeight !== null && this.formData.minWeight > this.formData.maxWeight) {
      callback(new Error('最小体重不能大于最大体重'));
    } else if (this.formData.minWeight === null || this.formData.maxWeight === null) {
      callback(new Error('体重范围必须填写'));
    } else {
      callback();
    }
  },
    // 提交表单
    async handleSubmit() {
      try {
        const isValid = await this.$refs.form.validate();
        if (isValid) {
          // 发送表单数据到后端
          // const response = await axios.post('/auth/login', {
          //     formData:this.formData
          // })
          // if (response.code === 200) {
            // 跳转到 Recommenduser 页面
            this.$router.push('/main/recommend/recommenduser');
            this.$message({
              type: "success",
              message: "偏好已生成",
            });
          // }
        } else {
          // 如果表单验证失败，显示错误消息
          this.$message.error("请检查表单填写是否正确");
        }
      } catch (error) {
        // 处理可能的错误
        console.error("表单提交失败:", error);
        this.$message.error("表单提交失败，请稍后再试");
      }
    },
  },
  
};

</script>

<style scoped>
fieldset {
  border: none;
  margin-bottom: 20px;
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-top: 50px;
  margin: auto;
}

.el-form-item__label {
  font-size: 16px;
  text-align: right;
  width: 180px;
  padding-right: 10px;
  display: inline-block;
}

.el-radio-group, .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.el-radio, .el-checkbox {
  margin-right: 10px;
  margin-bottom: 5px;
}

.submit-button {
  background-color: #ff77a9;
  color: white;
  border: 2px solid #ff77a9;
  padding: 25px 40px;
  font-size: 18px;
  margin-top: 20px;
  border-radius: 25px;
  cursor: pointer;
  margin-bottom: 50px;
}

.submit-button:hover {
  background-color: #ff3d7f;
}
/* 中部内容样式 */
.intro {
  position: relative; /* 确保背景图片和内容可以叠加 */
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(to bottom, #fffacd, #ffe4e1);
  overflow: hidden; /* 确保背景图片不超出区域 */
  margin-bottom: 50px;
}
.intro h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 30px;
  position: relative; /* 内容相对于背景定位 */
  z-index: 2; /* 确保内容在背景图片之上 */
}
.card-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  position: relative; /* 内容层级 */
  z-index: 2;
}
.card {
  width: 250px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
}
.card:hover {
  transform: scale(1.1);
}
.card-image {
  height: 100px;
  width: 100px;
  background: #f0f0f0;
  border-radius: 50%;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card h3 {
  font-size: 20px;
  color: #ff77a9;
  margin-bottom: 10px;
}
.card p {
  font-size: 14px;
  color: #555;
}

/* 背景图片样式 */
.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 背景层级 */
  pointer-events: none; /* 确保背景不影响内容的交互 */
}
.background-image {
  position: absolute;
  width: 200px;
  height: auto;
  opacity: 0.8;
}
.bg1 {
  top: 20px;
  left: 50px;
}
.bg2 {
  bottom: 30px;
  right: 80px;
}
.bg3 {
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
}
legend {
  font-size: 22px;
  color: #ff77a9;
  margin-bottom: 15px;
}
</style>