<template>
  <div>
    <el-dialog
      :center="true"
      :visible.sync="show"
      :close-on-click-modal="true"
      width="95vw"
      class="settingsDialog"
    >
      <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
      <div class="sd_top">
        <div class="sd_t_topTit">设置</div>
        <div class="sd_t_right">
          <span @click.stop="close()">×</span>
        </div>
      </div>
      <div class="sd_box">
        <div class="sd_b_head">
          <span
            :class="[showType == 0 ? 'sd_b_h_active' : '']"
            @click.stop="changeShowType(0)"
            >个人信息</span
          >
          <span
            :class="[showType == 1 ? 'sd_b_h_active' : '']"
            @click.stop="changeShowType(1)"
            >学伴资料
          </span>
        </div>

        <div class="sd_b_main">
          <div class="sd_b_m_type" v-show="showType == 0">
            <div class="sd_b_m_t_avatarArea">
              <el-image
                class="sd_b_m_t1_avatar"
                :src="form.avatar"
                fit="cover"
              ></el-image>
            </div>
            <div class="sd_b_m_t_formArea">
              <div class="sd_b_m_t_fa_item">
                <span class="sd_b_m_t_fa_i_inputLabel">姓名</span>

                <div class="sd_b_m_t_fa_i_inputArea">
                  <el-input
                    class="sd_b_m_t_fa_i_input"
                    v-model="form.userName"
                    placeholder="请输入姓名"
                  ></el-input>
                </div>
              </div>

              <div class="sd_b_m_t_fa_item">
                <span class="sd_b_m_t_fa_i_inputLabel">年级</span>
                <div class="sd_b_m_t_fa_i_inputArea">
                  <el-select
                    v-model="form.grade"
                    placeholder="请选择年级"
                    class="sd_b_m_t_fa_i_input"
                  >
                    <el-option
                      v-for="(item, index) in gradeList"
                      :key="index"
                      :label="item"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="sd_b_m_t_bottomArea">
              <span @click.stop="saveSefMessage()">保存修改</span>
            </div>
          </div>
          <div class="sd_b_m_type" v-show="showType == 1">
            <div class="sd_b_m_t_avatarArea">
              <div class="sd_b_m_t_characterList">
                <el-carousel
                  :interval="4000"
                  type="card"
                  height="150px"
                  :autoplay="false"
                  :initial-index="form.characterIndex"
                  indicator-position="none"
                  @change="changeCharacter"
                >
                  <el-carousel-item
                    v-for="(item, index) in characterList"
                    :key="index"
                  >
                    <div class="characterCard">
                      <el-image
                        class="cc_image"
                        :src="item.image"
                        style="height: 100%;"
                      ></el-image>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <div class="sd_b_m_t_formArea">
              <div class="sd_b_m_t_fa_item">
                <span class="sd_b_m_t_fa_i_inputLabel">昵称</span>

                <div class="sd_b_m_t_fa_i_inputArea">
                  <div>{{ form.characterName }}</div>
                </div>
              </div>

              <div class="sd_b_m_t2_fa_item">
                <span class="sd_b_m_t_fa_i_inputLabel">性格</span>
                <div class="sd_b_m_t2_fa_i_inputArea">
                  <textarea v-model="form.personality" disabled></textarea>
                </div>
              </div>
            </div>
            <div class="sd_b_m_t_bottomArea">
              <span @click.stop="updateCharacter()">更新学伴设置</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    gradeList: {
      type: Array,
      default: () => []
    },
    characterList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: false,
      showType: 0, //0：个人信息 1：学伴资料
      form: {
        avatar: require("../../../assets/images/pocAiClassroom/defaultAvatar.png"),
        userName: "科科",
        grade: 7,
        characterIndex: 0,
        characterName: "迷人的大反派",
        personality:
          "心思细腻，能够敏锐捕捉到别人的需求，喜欢支持和鼓励他人，富有耐心"
      }
    };
  },
  methods: {
    open(data, type = 0) {
      this.form.userName = data.userName;
      this.form.grade = data.grade;
      this.form.characterIndex = data.choseCharacter;
      this.form.personality = data.personality;
      let character = this.characterList.find(
        i => i.index == data.choseCharacter
      );
      this.form.characterName = character.name;
      this.form.personality = character.personality;
      this.showType = type;
      this.show = true;
    },
    close() {
      this.show = false;
      this.init();
    },
    init() {
      this.$nextTick(() => {
        this.form = {
          avatar: require("../../../assets/images/pocAiClassroom/defaultAvatar.png"),
          userName: "",
          grade: 0,
          characterIndex: 0,
          characterName: "",
          personality:""
        };
      });
    },
    changeShowType(newType) {
      this.showType = newType;
    },
    saveSefMessage() {
      this.$emit("changeUserInfo", {
        avatar: this.form.avatar,
        userName: this.form.userName,
        grade: this.form.grade
      });
    },
    updateCharacter() {
      this.$emit("changeCharacterInfo",{
        index: this.form.characterIndex,
        name: this.form.characterName,
        personality: this.form.personality
      });
    },
    changeCharacter(_index) {
      this.form.characterIndex = _index;
      this.form.characterName = this.characterList[_index].name;
      this.form.personality = this.characterList[_index].personality;
    }
  }
};
</script>

<style scoped>
.settingsDialog >>> .el-dialog {
  min-width: 95vw;
  max-width: 700px;
  height: 500px;
  max-height: 80%;
  box-shadow: 0px 0 8px 0px #555555;
  border-radius: 8px;
  background-color: #fff;
  /* top: 0px; */
  /* margin: 0 auto; */
  overflow: hidden;
}
.settingsDialog >>> .el-dialog__body {
  height: 100%;
  min-width: 95vw;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding-top: 10px;
}
.settingsDialog >>> .el-dialog__header {
  display: none;
}

.sd_top {
  /* background: #adadad; */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  border-radius: 8px 8px 0 0;
  user-select: none;
  font-size: 24px;
  font-weight: bold;
  color: black;
  /* border-bottom: 1px #ccc solid; */
}
.sd_top >>> .el-input__icon {
  line-height: 32px;
}

.sd_t_right {
  cursor: pointer;
}

.sd_box {
  width: 100%;
  padding: 0 30px 20px 30px;
  box-sizing: border-box;
  height: calc(100% - 30px);
}

.sd_b_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sd_b_head > span {
  font-size: 24px;
  width: 220px;
  margin: 0 10px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.sd_b_h_active::after {
  position: relative;
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #3681fc;
}

.sd_b_main {
  width: 100%;
  height: calc(100% - 60px);
}

.sd_b_m_type {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sd_b_m_t_avatarArea {
  width: 100%;
  max-height: 150px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd_b_m_t_characterList {
  width: 100%;
  height: 100%;
	margin: auto;
	margin-top: 10px;
}

.sd_b_m_t_characterList >>> .is-active .cc_image {
  opacity: 1;
}

.characterCard {
  height: 100%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  background-color: #fff;
}

.cc_image {
  opacity: 0.4;
  transition: 0.3s;
}

.sd_b_m_t1_avatar {
  width: 100px;
  height: 100px;
}

.sd_b_m_t_formArea {
  width: 100%;
  height: calc(100% - 220px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sd_b_m_t_fa_item {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  background-color: #f0f2f5;
  border: 1px solid #e7e7e7;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.sd_b_m_t_fa_i_inputLabel {
  width: 90px;
  height: 45px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
  font-size: 20px;
  border-right: 2px solid #e7e7e7;
}

.sd_b_m_t_fa_i_inputArea {
  width: calc(100% - 110px);
  height: 45px;
  margin: 0 10px;
}

.sd_b_m_t_fa_i_inputArea > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  font-size: 16px;
}

.sd_b_m_t_bottomArea {
  width: 100%;
  height: 70px;
	margin-top: 20px;
}

.sd_b_m_t_bottomArea > span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  width: 100%;
  height: 90%;
  background-color: #3681fc;
  border-radius: 6px;
  cursor: pointer;
}

.sd_b_m_t_fa_i_input {
  width: 100%;
  height: 100%;
  font-size: 16px;
}

.sd_b_m_t_fa_i_input >>> .el-input__inner {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
}

.sd_b_m_t_fa_i_input >>> .el-input {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 16px;
  background-color: transparent;
}

.sd_b_m_t2_fa_item {
  width: 100%;
  height: 50px;
  max-height: 50px;
  border-radius: 6px;
  background-color: #f0f2f5;
  border: 1px solid #e7e7e7;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  /* padding-top: 7.5px; */
  box-sizing: border-box;
}

.sd_b_m_t2_fa_i_inputArea {
  width: calc(100% - 110px);
  height: 100%;
  max-height: 50px;
}

.sd_b_m_t2_fa_i_inputArea > textarea {
  height: 90%;
  width: calc(100%);
  margin: 0 0px 5px 10px;
  font-size: 16px;
  background: none;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
}
</style>
