import { CommonModule } from '@angular/common';
import { Component, input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { IonicModule, NavController } from '@ionic/angular';
import { addIcons } from 'ionicons';
import { arrowBackOutline } from 'ionicons/icons';
import { FormsModule } from '@angular/forms';
addIcons({ 'arrow-back-outline': arrowBackOutline });
@Component({
  selector: 'app-generate-option',
  templateUrl: './generate-option.component.html',
  styleUrls: ['./generate-option.component.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
})

export class GenerateOptionComponent implements OnInit {
  userProfile: {
    gender: string;
    age: string;
    height: string;
    weight: string;
    season: string;
    regStyle: string;
    sceFunction: string;
    dsgPhilosophy: string;
    artStyle: string;
    color: string;
  } = {
      gender: '不限制',
      age: '不限制',
      height: '不限制',
      weight: '不限制',
      season: '不限制',
      regStyle: '不限制',
      sceFunction: '不限制',
      dsgPhilosophy: '不限制',
      artStyle: '不限制',
      color: '不限制',
    }
  //构造器
  constructor(private router: Router, private navCtrl: NavController) { }
  //初始化
  ngOnInit() {
  }
  //返回按钮事件
  goBack() {
    this.navCtrl.back();
  }
  //选项卡结构配置数据
  cards = [
    {
      id: '性别',
      chips: [
        { id: 1, isElected: false, label: '男' },
        { id: 2, isElected: false, label: '女' },
      ],
    },
    {
      id: '年龄',
      chips: [
        { id: 1, isElected: false, label: '20岁以下' },
        { id: 2, isElected: false, label: '20-30岁' },
        { id: 3, isElected: false, label: '30-40岁' },
        { id: 4, isElected: false, label: '40岁以上' },
      ],
    },
    {
      id: '身高',
      chips: [
        { id: 1, isElected: false, label: '160以下' },
        { id: 2, isElected: false, label: '160-170cm' },
        { id: 3, isElected: false, label: '170-180cm' },
        { id: 4, isElected: false, label: '180-190cm' },
        { id: 5, isElected: false, label: '190以上' },
      ],
    },
    {
      id: '体重',
      chips: [
        { id: 1, isElected: false, label: '50kg以下' },
        { id: 2, isElected: false, label: '50-55kg' },
        { id: 3, isElected: false, label: '55-60kg' },
        { id: 4, isElected: false, label: '60-70kg' },
        { id: 5, isElected: false, label: '70kg以上' },
      ],
    },
    {
      id: '季节',
      chips: [
        { id: 1, isElected: false, label: '春季' },
        { id: 2, isElected: false, label: '夏季' },
        { id: 3, isElected: false, label: '秋季' },
        { id: 4, isElected: false, label: '冬季' },
      ],
    },
    {
      id: '区域风格',
      chips: [
        { id: 1, isElected: false, label: '中国风' },
        { id: 2, isElected: false, label: '日系' },
        { id: 3, isElected: false, label: '韩系' },
        { id: 4, isElected: false, label: '欧美风' },
        { id: 5, isElected: false, label: '英伦风' },
        { id: 6, isElected: false, label: '法式' },
        { id: 7, isElected: false, label: '波西米亚风' },
      ],
    },
    {
      id: '场景功能',
      chips: [
        { id: 1, isElected: false, label: '通勤风' },
        { id: 2, isElected: false, label: '休闲风' },
        { id: 3, isElected: false, label: '田园风' },
        { id: 4, isElected: false, label: '校园风' },
        { id: 5, isElected: false, label: 'Party风' },
        { id: 6, isElected: false, label: '约会装' },
        { id: 7, isElected: false, label: '度假风' },
      ],
    },
    {
      id: '设计理念',
      chips: [
        { id: 1, isElected: false, label: '新中式' },
        { id: 2, isElected: false, label: '淑女风' },
        { id: 3, isElected: false, label: '名媛风' },
        { id: 4, isElected: false, label: '瑞丽风' },
        { id: 5, isElected: false, label: '简约风' },
        { id: 6, isElected: false, label: '极简风' },
        { id: 7, isElected: false, label: '中性风' },
        { id: 8, isElected: false, label: '性冷淡风' },
        { id: 9, isElected: false, label: '民族风' },
        { id: 10, isElected: false, label: '戏剧风' },
        { id: 11, isElected: false, label: '复古风' },
        { id: 12, isElected: false, label: 'Y2K' },
        { id: 13, isElected: false, label: '嘻哈风' },
        { id: 14, isElected: false, label: '朋克风' },
        { id: 15, isElected: false, label: '嬉皮风' },
        { id: 16, isElected: false, label: '甜酷风' },
      ],
    },
    {
      id: '艺术风格',
      chips: [
        { id: 1, isElected: false, label: '拜占庭艺术' },
        { id: 2, isElected: false, label: '哥特风格' },
        { id: 3, isElected: false, label: '浪漫主义' },
        { id: 4, isElected: false, label: '巴洛克风格' },
        { id: 5, isElected: false, label: '洛可可风格' },
        { id: 6, isElected: false, label: '洛丽塔风格' },
        { id: 7, isElected: false, label: '维多利亚风' },
        { id: 8, isElected: false, label: '欧普风格' },
        { id: 9, isElected: false, label: '未来主义' },
        { id: 10, isElected: false, label: '极简主义' },
        { id: 11, isElected: false, label: '新古典主义' },
      ],
    },
    {
      id: '色彩搭配',
      chips: [
        { id: 1, isElected: false, label: '多巴胺穿搭' },
        { id: 2, isElected: false, label: '美拉德穿搭' },
      ],
    },
  ];
  /*变量初始化*/


  //补充说明
  suppleInput: string = '';
  //用户提示词
  userPrompt: string = '';
  
  //点击选项卡事件
  toggleChip(cardId: string, chipId: number): void {
    this.cards.forEach((card) => {
      if (card.id === cardId) {
        card.chips.forEach((chip) => {
          chip.isElected = chip.id === chipId; // 当前点击的 chip 设为 active，其他设为 false
        });

        switch (card.id) {
          case '性别':
            this.userProfile.gender = card.chips[chipId - 1].label;
            break;
          case '年龄':
            this.userProfile.age = card.chips[chipId - 1].label;
            break;
          case '身高':
            this.userProfile.height = card.chips[chipId - 1].label;
            break;
          case '体重':
            this.userProfile.weight = card.chips[chipId - 1].label;
            break;
          case '季节':
            this.userProfile.season = card.chips[chipId - 1].label;
            break;
          case '区域风格':
            this.userProfile.regStyle = card.chips[chipId - 1].label;
            break;
          case '场景功能':
            this.userProfile.sceFunction = card.chips[chipId - 1].label;
            break;
          case '设计理念':
            this.userProfile.dsgPhilosophy = card.chips[chipId - 1].label;
            break;
          case '艺术风格':
            this.userProfile.artStyle = card.chips[chipId - 1].label;
            break;
          case '色彩搭配':
            this.userProfile.color = card.chips[chipId - 1].label;
            break;
        }
      }
    })
  };

  //生成传递提示词事件
  sendMsg() {
    this.userPrompt = "请生成一个穿搭照片绘画提示词：模板如下：\n" +
      "穿搭主题：夏季通勤风格\n" +
      "性别：男性\n" +
      "体重：70kg\n" +
      "年龄：约40-45岁\n" +
      "整体风格：简约、舒适、专业\n" +
      "上装：\n" +
      "衬衫：选择一款轻薄透气的短袖衬衫，颜色可以是浅蓝色或淡灰色，搭配细条纹或小格纹图案，以增加层次感。衬衫的剪裁要稍微宽松，以便于活动，适合办公室环境。\n" +
      "外套（可选）：如果需要在空调环境中，搭配一件轻便的深色西装外套，面料应为透气的棉麻混纺，能够增添正式感。\n" +
      "下装：\n" +
      "裤子：选择一条修身但不紧身的深色休闲裤（如海军蓝或深灰色），采用轻便的面料，保持通勤的舒适性。裤子长度适中，裤脚可微微收口，展现干练的形象。\n" +
      "鞋子：\n" +
      "鞋款：搭配一双经典的休闲皮鞋或轻便的商务休闲鞋，颜色可以选择黑色或深棕色，鞋面光滑，适合正式场合，同时也提供舒适的步行体验。\n" +
      "配饰：" +
      "腰带：搭配一条与鞋子颜色一致的皮质腰带，简约设计，增加整体协调感。\n" +
      "手表：佩戴一款简约风格的手表，金属表带或皮表带均可，展现成熟稳重的气质。\n" +
      "公文包：选择一款深色的公文包，材质为皮革或优质帆布，既实用又具有商务气息。\n" +
      "场景功能：适合在办公室、商务会议、午餐约会等场合穿着，整体搭配既显得专业又不失时尚感，适合夏季通勤的需求。\n" +
      "以上模板仅供参考，可以写的更详细一些，但不要过于繁琐和冗长。\n"+
      "以下内容为用户需求:\n" +
      "性别：" + this.userProfile.gender + "\n" +
      "年龄：" + this.userProfile.age + "\n" +
      "身高：" + this.userProfile.height + "\n" +
      "体重：" + this.userProfile.weight + "\n" +
      "季节：" + this.userProfile.season + "\n" +
      "区域风格：" + this.userProfile.regStyle + "\n" +
      "场景功能：" + this.userProfile.sceFunction + "\n" +
      "设计理念：" + this.userProfile.dsgPhilosophy + "\n" +
      "艺术风格：" + this.userProfile.artStyle + "\n" +
      "色彩搭配：" + this.userProfile.color + "\n" +
      "补充说明：" + this.suppleInput + "\n";
    console.log(this.userPrompt)
  }

  goGenerateResult() {
    this.router.navigate(['/generateResult'], {
      queryParams: { userPrompt: this.userPrompt }
    });
  }

  sendMsgAndGoGenerateResult() {
    this.sendMsg();
    this.goGenerateResult();
  }
}

