<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div id="top"></div>
    <!-- 主体内容 -->
    <div class="contnet">
      <!-- 头部 -->
      <div class="head">
        <img src="../../assets/icon/icon-loginout.png" alt="">
        <div class="head-exit">
          <img src="../../assets/icon/icon-loginoutwhite.png" alt="">
          退出聊天
        </div>
      </div>
      <!-- 显示模板区 -->
      <div class="showBody">
        <!-- 底部渐变区 -->
        <div class="showBody-bottom">
          <!-- 更换人物模板列表 -->
          <div v-show="PersonButtonAction" class="showBody-modelList">
          <div v-for="item,index in modelList" :key="item.name" class="showBody-modelList-item"  @click="modelItemAction=index">
            <div class="modelName">{{ item.name }}
              <div v-show="modelItemAction==index" class="showBody-modelList-item-boxBorder"></div>
            </div>
            <img :src="item.url" alt="">
          </div>
          </div>
          <!-- 四大按钮 -->
          <div class="showBody-bottom-buttons">
            <!--  -->
            <div class="showBody-bottom-buttons-item">
              <div :class="{'buleBtn':PersonButtonAction}" class="defaultBtn" @click="clickPersonButton">
                <img src="@/assets/icon/icon-person.png" alt="">
              </div>
              <p>更换人物模板</p>
            </div>
            <!--  -->
            <div class="showBody-bottom-buttons-item">
              <div :class="{'buleBtn':CameraAction}" class="defaultBtn" @click="clickCameraButton">
                <img src="@/assets/icon/icon-openCamera.png" alt="">
              </div>
              <p>摄像头开启</p>
            </div>
            <!--  -->
            <div class="showBody-bottom-buttons-item">
              <div :class="{'buleBtn':CloseChatAction}" class="defaultBtn" @click="clickCloseChatButton">
                <img src="@/assets/icon/icon-closeChat.png" alt="">
              </div>
              <p>对话框关闭</p>
            </div>
            <!--  -->
            <div class="showBody-bottom-buttons-item">
              <div :class="{'buleBtn':GlobalAction}" class="defaultBtn" @click="clickGlobalButton">
                <img src="@/assets/icon/icon-global.png" alt="">
              </div>
              <p>选择对话语言</p>
            </div>
          </div>
          <!-- 语音说话 -->
          <div class="showBody-bottom-speakDiv">
            <!-- 没点麦克风 -->
            <div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮，快来跟我对话吧！</div>
            <div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
                <img src="../../assets/icon/icon-microphone2.png" alt="">
            </div>
            <!-- 点了麦克风 -->
            <div v-show="speakingAction" class="showBody-bottom-speakDiv-text whiteDiv">按住说话</div>
            <div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
                <img src="../../assets/icon/icon-speaking.png" alt="">
            </div>
          </div>
        </div>
        <!-- 摄像头窗口 -->
        <div v-show="CameraAction" class="showBody-myCamera"></div>
        <!-- 聊天框 -->
        <div v-show="CloseChatAction" class="showBody-chatBox">
          <!-- 关闭 -->
          <div class="showBody-chatBox-close">
            <i @click="CloseChatAction=false" class="el-icon-close"></i>
          </div>
          <!-- 聊天记录 -->
          <div class="showBody-chatBox-record">
            <div class="showBody-chatBox-record-my" :class="{'others':item.form!='me'}" v-for="item,index in chatRecordList" :key="index">
              <span>{{ item.message }}</span>
            </div>

          </div>
          <!-- 底部说话按钮 -->
          <div class="showBody-bottom-speakDiv">
            <!-- 没点麦克风 -->
            <div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮，快来跟我对话吧！</div>
            <div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
                <img src="../../assets/icon/icon-microphone2.png" alt="">
            </div>
            <!-- 点了麦克风 -->
            <div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
            <div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
                <img src="../../assets/icon/icon-speaking.png" alt="">
            </div>
          </div>
        </div>
        <!-- 选择语言 -->
        <div v-show="GlobalAction" class="showBody-global">
          <!--  -->
          <div class="showBody-global-choose">
            <div class="showBody-global-choose-language">
              <div class="showBody-global-choose-language-item" v-for="item in languageList" :key="item.type">
              {{ item.type }}
              </div>
            </div>
            <div class="showBody-global-choose-btn">
              <div @click="GlobalAction=false" class="showBody-global-choose-btn-no">取消</div>
              <div class="showBody-global-choose-btn-yes">确定</div>
            </div>
          </div> 
          <!-- 底部说话按钮 -->
          <div class="showBody-bottom-speakDiv">
            <!-- 没点麦克风 -->
            <div v-show="!speakingAction" class="showBody-bottom-speakDiv-text">点击语音按钮，快来跟我对话吧！</div>
            <div @click="speakingAction=!speakingAction" v-show="!speakingAction" class="defaultBtn buleBtn">
                <img src="../../assets/icon/icon-microphone2.png" alt="">
            </div>
            <!-- 点了麦克风 -->
            <div v-show="speakingAction" class="showBody-bottom-speakDiv-text">按住说话</div>
            <div @click="speakingAction=!speakingAction" v-show="speakingAction" class="defaultBtn buleBtn">
                <img src="../../assets/icon/icon-speaking.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
// 工具
import { scrollToID } from "../../utils";

Vue.use(Toast);
export default {
  data() {
    return {
      inPage: false,
      PersonButtonAction: false,//个人按钮状态
      CameraAction:false,// 摄像头按钮状态
      CloseChatAction:false,// 聊天框按钮状态
      GlobalAction:false,// 语音按钮状态
      speakingAction: false,  // 底部是否说话按钮状态
      modelList: [
        { name:'甘雨',url:require('../../assets/img/module_3_1.png')},
        { name:'莫甘娜',url:require('../../assets/img/module_3_1.png')},
        { name:'达尔文',url:require('../../assets/img/module_3_1.png')},
        { name:'雨果',url:require('../../assets/img/module_3_1.png')},
      ],// 人物模板列表
      modelItemAction: -1,// 人物模板列表选中高亮
      chatRecordList: [
        { form: 'me', message: '生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1生于忧患死于安乐1' },
        { form: 'you', message: '生于忧患死于安乐2' },
        { form: 'me', message: '生于忧患死于安乐3' },
        { form: 'you', message: '生于忧患死于安乐4' },
        { form: 'me', message: '生于忧患死于安乐5' },
        { form: 'me', message: '生于忧患死于安乐6' },
        { form: 'me', message: '生于忧患死于安乐7' },
      ],// 聊天记录列表
      languageList: [
        {type:'AUTO'},
        {type:'璃月语'},
        {type:'JP语'},
        {type:'english'},
        {type:'中国话'},
        {type:'四川话'},
        {type:'东百话'},
        {type:'阿拉伯语'},
        {type:'朝鲜语'},
      ], //语种列表
    };
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
    }),
  },

  methods: {
    ...mapActions(["setCharacters"]),
    // 点击个人按钮事件
    clickPersonButton() {
      this.PersonButtonAction=!this.PersonButtonAction
    },
    // 点击摄像头按钮事件
    clickCameraButton() {
      this.CameraAction=!this.CameraAction
    },
    // 点击聊天框按钮事件
    clickCloseChatButton() {
      this.CloseChatAction=!this.CloseChatAction
    },
    // 点击语音按钮事件
    clickGlobalButton() {
      this.GlobalAction=!this.GlobalAction
    },  
    go(url) {
      this.$router.push(url);
    },
  },
  created() {},
  mounted() {
    this.inPage = true;
    scrollToID("top");
  },
};
</script>

<style lang="scss" scoped>
.page {
  transform: translateX(30%);
  opacity: 0;
  transition: all 0.5s; // global-transition
  &.active {
    opacity: 1;
    transform: translateX(0);
  }
}
.contnet {

  .head {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    >img {
      width: 36px;
      height: 36px;
    }
    &-exit {
      margin-top: 4px;
      width: 97px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      background: #24A9FF;
      color: #fff;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
      border-radius: 33px;
      >img {
        margin-top: -2px;
        margin-right: 4px;
      }
    }
  }
  .showBody {
    position: relative;
    width: 100%;
    height: calc(100vh - 44px) ;
    background-color: red;
    &-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      // height: 150px;
      padding-bottom: 33px;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
      &-buttons {
        display: flex;
        justify-content: space-evenly;
        padding: 0 20px;
        color: #fff;
        font-size: 10px;
        &-item {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          p {
            margin-top: 4px;
          }
        }
      }
      .defaultBtn {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: rgba(0,0,0,0.3);
        border-radius: 22px;
        img {
          width: 24px;
          height: 24px;
        }
      }
      &-speakDiv {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding: 0 15px;
        &-text {
          margin-top: 4px;
          width: 290px;
          height: 36px;
          border-radius: 18px;
          border: 1px solid #FFFFFF;
          font-size: 14px;
          color: #FFFFFF;
          text-align: center;
          line-height: 34px;
        }
        .whiteDiv {
          background-color: #ececec;
          color: #000;
        }
      }
    }
    &-modelList {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 200px;
      padding-left: 15px;
      overflow-x: scroll;
      &-item {
        position: relative;
        margin-right: 15px;
        &-boxBorder {
          position: absolute;
          top: -2px;
          width: 123px;
          height: 183px;
          border-radius: 8px;
          transition: all 0.5s; // 
          border: 3px solid #00ffe1;
        }
        .modelName {
          position: absolute;
          top: 0;
          left: 0;
          width: 48px;
          height: 28px;
          background: rgba(0,0,0,0.5);
          border-radius: 8px 0px 8px 0px;
          color: #fff;
          font-size: 13px;
          line-height: 28px;
          text-align: center;
        }
        img {
          width: 120px;
          height: 180px;
          border-radius:8px 5px 5px 8px;
        }
      }

    }
    &-myCamera {
      position: absolute;
      top: 0;
      right: 0;
      width: 96px;
      height: 180px;
      background-image:url(../../assets/img/bg.png);
      background-size: contain;
    }
    &-chatBox {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 375px;
      background-color: #ECECEC;
      &-close {
        padding: 10px 15px;
        height: 35px;
        i {
          float: right;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
        }
      }
      &-record {
        padding: 5px 10px 0;
        height: 255px;
        overflow-y: scroll;
        font-size: 15px;
        color: #333333;
        line-height: 21px;
        &-my {
          float: right;
          padding: 10px 20px;
          margin-bottom: 15px;
          background: #9EE445;
          border-radius: 20px 20px 2px 20px;
          clear: both;
        }
        .others {
          float: left;
          background: #FFFFFF;
          border-radius: 20px 20px 20px 2px;
        }
      }
      .showBody-bottom-speakDiv {
        margin-top: 0;
        height: 85px;
        padding-top: 15px;
        background-color: #fff;
        &-text {
          color: #666;
          border-radius: 18px;
          border: 1px solid #666666;
        }
      }
    }
    &-global {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 385px;
      background-color: #ECECEC;
      &-choose {
        padding: 20px 36px 0;
        height: 304px;
        overflow-y: scroll;
        font-size: 15px;
        color: #333333;
        line-height: 21px;
        &-language {
          display: flex;
          justify-content: start;
          flex-wrap: wrap;
          width: 300px;
          height: 210px;
          background-color: #fff;
          overflow: hidden;
          border: none;
          border-radius: 15px;
          &-item {
            width: 100px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            font-size: 14px;
            color: #333;
            border: 1px solid #ECECEC;
          }
        }
        &-btn {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          >div {
            width: 139px;
            height: 37px;
            border-radius: 31px;
            text-align: center;
            line-height: 37px;
            font-size: 15px;
            font-weight: 600;
          }
          &-no {
            color: #333333;
            background: #FFFFFF;
          }
          &-yes {
            color: #FFFFFF;
            background: #24A9FF;
          }
        }
      }
      .showBody-bottom-speakDiv {
        margin-top: 0;
        height: 85px;
        padding-top: 15px;
        background-color: #fff;
        &-text {
          color: #666;
          border-radius: 18px;
          border: 1px solid #666666;
        }
      }
    }
  }
}
.showBody-modelList::-webkit-scrollbar {
  width:0;
}
.showBody-chatBox-record::-webkit-scrollbar {
  width:0;
}
.defaultBtn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.3);
  border-radius: 22px;
  img {
    width: 24px;
    height: 24px;
  }
}
</style>
