<template>
  <div class="accrod-with-name ff-pp">
    <!-- 标题介绍 -->
    <div class="introduce row-center-center fs-24 fw-4">
      <div class="col-center-center">
        <span>本趣味测评需要输入您的姓名和TA的名字</span>
        <span>点击即可参与趣味配对，据说很有料哦~</span>
      </div>
    </div>

    <!-- 表单 -->
    <div class="form col-center-center fs-40 ff-pp fw-500">
      <div class="row-around-center" style="width: 100%">
        <div class="label1 row-between-center">
          <template v-for="(item, index) in genderInfo">
            <div
              :key="index"
              class="row-center-center"
              :style="{
                backgroundColor: item.active ? item.bgc : '#fff',
                color: item.active ? item.color : item.de_color,
                opacity: item.active ? 1 : 0.4,
              }"
              @click="converGender(item)"
            >
              {{ item.gender }}
            </div>
          </template>
        </div>
        <div class="in-name1 row-center-center">
          <input
            v-model="female"
            class="input-text fs-34"
            type="text"
            placeholder="请输入姓名"
          />
        </div>
      </div>

      <div class="row-around-center" style="width: 100%">
        <div class="label2 row-between-center">
          <template v-for="(item, index) in genderInfo2">
            <div
              :key="index"
              class="row-center-center"
              :style="{
                backgroundColor: item.active ? item.bgc : '#fff',
                color: item.active ? item.color : item.de_color,
                opacity: item.active ? 1 : 0.4,
              }"
              @click="converGender2(item)"
            >
              {{ item.gender }}
            </div>
          </template>
        </div>
        <div class="in-name2 row-center-center">
          <input
            v-model="male"
            class="input-text fs-34"
            type="text"
            placeholder="请输入姓名"
          />
        </div>
      </div>
    </div>

    <!-- 配对按钮 -->
    <div class="row-center-center" style="margin-top: 0.4rem">
      <div class="btn row-center-center fc-f fs-36 fw-5" @click="begin">
        开始配对
      </div>
    </div>

    <template v-if="toast">
      <div class="toast fc-f fs-28 ff-pp fw-5">请将信息填写完整</div>
    </template>
  </div>
</template>

<script>
import utils from "@/utils";
export default {
  data() {
    return {
      genderInfo: [
        {
          gender: "女",
          color: "#fff",
          active: true,
          bgc: "#FD5F99",
          de_color: "#FD5F99",
          id: 1,
        },
        {
          gender: "男",
          color: "#fff",
          active: false,
          bgc: "#FD5F99",
          de_color: "#5FAEFD",
          id: 2,
        },
      ],
      genderInfo2: [
        {
          gender: "男",
          color: "#fff",
          active: true,
          bgc: "#5FAEFD",
          de_color: "#5FAEFD",
          id: 1,
        },
        {
          gender: "女",
          color: "#fff",
          active: false,
          bgc: "#5FAEFD",
          de_color: "#FD5F99",
          id: 2,
        },
      ],
      female: "",
      male: "",
      toast: false,
    };
  },

  methods: {
    converGender(option) {
      this.genderInfo.map((item) => {
        if (option.id == item.id) {
          return (option.active = true);
        } else {
          return (item.active = false);
        }
      });
    },

    converGender2(option) {
      this.genderInfo2.map((item) => {
        if (option.id == item.id) {
          return (option.active = true);
        } else {
          return (item.active = false);
        }
      });
    },

    // 开始配对
    begin() {
      if (this.male == "" || this.female == "") {
        this.toast = true;
        setTimeout(() => {
          this.toast = false;
        }, 1000);
        return;
      }

      let params = {
        info: [
          { gender: 1, name: this.male },
          { gender: 0, name: this.female },
        ],
      };
      utils.setCookie("baseInfo", JSON.stringify(params.info), 0);
      this.$router.push({ path: "/pay", query: params });
    },
  },
};
</script>

<style scpoed>
.accrod-with-name {
  width: 6.9rem;
  height: 4.8rem;
  background-color: #fff;
  border-radius: 0.2rem;
  position: relative;
}

.introduce {
  margin-top: 0.3rem;
}

.introduce > div {
  width: 4.4rem;
  height: 0.64rem;
}

.form {
  margin-top: 0.2rem;
}

.form > div:nth-child(1) {
  margin-bottom: 0.2rem;
}

.label1,
.label2 {
  width: 1.48rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  border: 0.03rem solid #fd5f99;
}

.in-name1,
.in-name2 {
  width: 3.4rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  border: 0.03rem solid #fd5f99;
}

.label2 {
  border: 0.03rem solid #5faefd;
}

.in-name2 {
  border: 0.03rem solid #5faefd;
}

.btn {
  width: 5.7rem;
  height: 0.92rem;
  background-color: #fd5f99;
  border-radius: 0.06rem;
}

.label1 > div,
.label2 > div {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background-color: #fff;
  /* margin: 0 0.06rem; */
}

.input-text {
  height: 0.4rem;
  border: 0;
  width: 80%;
  outline: none;
}

.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.1rem;
  background-color: #000;
  opacity: 0.4;
  z-index: 2;
  border-radius: 0.2rem;
}
</style>