<template>
  <div class="d_box" v-loading="isloading">
    <div class="dialog">
      <div class="d_img">
        <img
          :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
          alt=""
        />
      </div>
      <div class="d_content_message">
        <div>Hello,以下是我们这次口语练习的要求：</div>
        <div class="d_name" v-if="answerArray.time">
          练习时长：{{
            answerArray.time == "all" ? "不限时" : answerArray.time + "min"
          }}
        </div>
        <div class="d_name" v-if="answerArray.difficulty">
          设置难度：{{
            answerArray.difficulty == 0
              ? "简单"
              : answerArray.difficulty == 1
              ? "一般"
              : "困难"
          }}
        </div>
        <div
          class="d_name"
          v-if="fName && sName"
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            width: 100%;
          "
        >
          <div style="min-width: 60px">对话主题：</div>
          <div style="width: calc(100% - 80px)">
            {{ fName - sName }}
          </div>
        </div>
        <div class="gotoTalk">我已了解，开始对话</div>
        <div class="nowTime">{{ currentTime }}</div>
      </div>
    </div>
    <div class="dialog">
      <div class="d_img">
        <img
          :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
          alt=""
        />
      </div>
      <div class="d_content">
        <div class="d_voice">
          <mini-audio :audio-source="voice" class="audio_class"></mini-audio>
        </div>
        <div class="d_log">
          {{ content }}
        </div>
      </div>
      <div class="nowTime" style="margin: 0 0 0 50px">
        {{ currentTime }}
      </div>
    </div>
    <div class="dialog dialog_right">
      <div class="d_img">
        <img
          :src="require('../../../assets/icon/englishVoice/icon_portal.png')"
          alt=""
        />
      </div>
      <div class="d_content">
        <div class="d_voice">
          <mini-audio :audio-source="voice" class="audio_class"></mini-audio>
        </div>
        <div class="d_log2">
          {{ content }}
        </div>
      </div>
      <report v-if="lookReport"></report>
      <div
        @click="lookReport = true"
        class="reportButton"
        :style="{ bottom: lookReport ? '-360px' : '-35px' }"
      >
        查看报告
      </div>
      <div
        class="nowTime"
        style="margin: 0 50px 0 0; bottom: -60px"
        :style="{ bottom: lookReport ? '-390px' : '-60px' }"
      >
        {{ currentTime }}
      </div>
    </div>
    <!-- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
                src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe> -->
  </div>
</template>
    
<script>
import report from "./report.vue";
export default {
  components: {
    report,
  },
  props: {
    checkJson: {
      type: Object,
    },
  },
  data() {
    return {
      json: [],
      answerArray: [],
      isRecord: false,
      isPlayerRecord: false,
      isloading: false,
      fName: "",
      sName: "",
      currentTime: "",
      lookReport: false,
      content:
        "Read the following text aloud.A Car Accident I saw a car accident this morning. A boy wanted to cross the road but he did not look carefully. He just ran out into the road. A car was coming and the driver stopped at once. Luckily, the boy was not hurt. However, there was a bus behind the car. It could not stop and hit the back of the car. Someone called the police and they arrived quickly.",
    };
  },
  methods: {
    setVoiceJson(val) {
      let a = JSON.parse(JSON.stringify(val));
      // this.json = a;
      this.answerArray = a;
      // this.answerArray.push(
      //     {
      //         isY: false,
      //         content: a.content3,
      //         name: a.content,
      //         img: a.img
      //     }
      // )
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  watch: {
    checkJson: {
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.setVoiceJson(this.checkJson);
        }
      },
      deep: true,
    },
  },
  created() {
    this.currentTime = this.formatDate(new Date());
  },
  mounted() {
    this.setVoiceJson(this.checkJson);
  },
};
</script>
    
<style scoped>
.d_box {
  width: 100%;
  height: 100%;
  /* background: #000; */
  padding: 25px 50px;
  box-sizing: border-box;
  overflow: auto;
}

.dialog_answer > img {
  height: 100%;
  margin-left: auto;
  cursor: pointer;
}

.dialog {
  display: flex;
  position: relative;
}

.dialog + .dialog {
  margin-top: 40px;
}

.dialog_right {
  flex-direction: row-reverse;
}

.dialog > .d_img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 5px;
}

.dialog > .d_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dialog_right > .d_img {
  margin-right: 0;
  margin-left: 5px;
}

.dialog > .d_content,
.dialog > .d_content_message {
  width: 100%;
}
.dialog > .d_content_message {
  display: flex;
  width: 300px;
  background: #f6f9ff;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  border-radius: 10px;
  margin: 0 0 0 10px;
  position: relative;
}
.dialog > .d_content_message > div {
  padding: 5px;
}
.nowTime {
  position: absolute;
  bottom: -30px;
  color: #9c9d9f;
  font-size: 12px;
}
.dialog_right > .d_content,
.dialog_right > .d_content_message {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.dialog > .d_content > .d_name,
.dialog > .d_content_message > .d_name {
  color: #7c7c7c;
  font-size: 12px;
  margin-bottom: 5px;
}

.dialog_right > .d_content > .d_name,
.dialog_right > .d_content_message > .d_name {
  text-align: right;
}

.dialog > .d_content > .d_log,
.dialog > .d_content_message > .d_log {
  color: #000;
  font-size: 16px;
  background: #fff;
  width: 100%;
  max-width: 800px;
  border: 2px solid #e05d63;
  border-radius: 40px;
  line-height: 26px;
  padding: 20px 35px;
  box-sizing: border-box;
  position: relative;
}

.dialog > .d_content > .d_log::before,
.dialog > .d_content_message > .d_log::before {
  content: "";
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  border: 1px dashed #e05d63;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  border-radius: 30px;
  transform: translate(-50%, -50%);
}

.dialog > .d_content > .d_log2,
.dialog > .d_content_message > .d_log2 {
  color: #000;
  font-size: 14px;
  background: #fff;
  width: 100%;
  max-width: 800px;
  border: 1px dashed #0f94ce;
  border-radius: 5px;
  line-height: 26px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  margin-top: 10px;
}

.dialog > .d_content > .d_voice,
.dialog > .d_content_message > .d_voice {
  width: 100%;
  max-width: 600px;
}

.audio_class {
  background: #3680fb !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.d_voice >>> .vueAudioBetter span:before {
  color: #fff;
}

.audio_class >>> .slider .process {
  background: #000;
}

.d_voice >>> .vueAudioBetter .iconfont:active {
  position: unset !important;
}

.gotoTalk {
  margin: 0 5px 10px 5px;
  background: #3681fc;
  color: #fff;
  text-align: center;
  width: calc(100% - 20px);
  height: 30px;
  line-height: 30px;
  padding: 0 !important;
  border-radius: 5px;
  cursor: pointer;
}

.checkFooter {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.checkFooter > div {
  min-width: 100px;
  width: 100px;
  text-align: center;
  border-radius: 5px;
  background: #ffffff;
  color: #3681fc;
  border: 1px solid #3681fc;
  height: 35px;
  line-height: 35px;
  margin-right: 10px;
  font-size: 12px;
  cursor: pointer;
}

.reportButton {
  position: absolute;
  bottom: -35px;
  right: 50px;
  background: #16c267;
  color: #fff;
  width: 70px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  border-radius: 5px;
}
</style>
    