<template>
  <div class="Talk">
    <!-- <u-navbar title="Copilot小助理" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar" :is-back="false" height="88"></u-navbar> -->
    <!-- <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll"> -->
    <!-- <div class="top-select" @click="showType=true">
      {{aiConfigName || '选择应用'}} <u-icon name="arrow-down" color="#fff" size="28"></u-icon>
    </div> -->
    <div class="top-fixed">
      <div class="top-select" @click="showType=true">
        {{aiConfigName || '选择应用'}} <u-icon name="arrow-down" color="#fff" size="28"></u-icon>
      </div>
      <p>已切换至{{aiConfigName}}大模型</p>
    </div>
    <div class="service-content" v-if="!messageList.length">
      <div class="text-content">
        <div class="text-left">
          <div>嘿，你好呀！</div>
          <p>我是您的<span>「Copilot小助理」</span>，</p>
          <p>有什么问题都可以问我哟~</p>
        </div>
        <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service.png" alt="" class="service-img">
      </div>
    </div>
    <!-- <div class="list-bg" v-if="messageList.length"></div> -->
    <div class="list-content" v-if="messageList.length">
      <div v-for="(item, index) in messageList" :key="index">
        <div class="send-time">{{item.createTime.substring(5, 16)}}</div>
        <div :class="item.userType == 1 ? 'item-left' : 'item-right'">
          <img src="https://cdn.cunwuyun.cn/wechat/baiduAI/user-img.png" alt="" class="user-img" v-if="item.userType == 1">
          <div class="item" :class="'item'+index">
            <u-icon name="play-right-fill" color="#CCE2FF" size="20" v-if="item.userType != 1" class="u-icon-right"></u-icon>
            <u-icon name="play-left-fill" color="#F3F5F7" size="20" v-if="item.userType == 1" class="u-icon-left"></u-icon>
            <div class="voice-div" v-if="item.sdkFileUrl" @click="play(item.sdkFileUrl, index)">
              <span>8”</span>
              <img src="https://cdn.cunwuyun.cn/wechat/baiduAI/play-d.gif" alt="" v-if="item.isPlay">
              <img src="https://cdn.cunwuyun.cn/wechat/baiduAI/play-j.png" alt="" v-else>
            </div>
            <p v-if="!item.sdkFileUrl">{{item.content || ''}}</p>
          </div>
          <img src="https://cdn.cunwuyun.cn/wechat/baiduAI/user-img.png" alt="" class="user-img" v-if="item.userType != 1">
        </div>
      </div>
    </div>
    <!-- </scroll-view> -->
    <div class="fixed-bottom">
      <div class="type-text" v-if="type == 'text'">
        <u-input type="text" placeholder="输入您的问题…" height="80" input-align="left"  :clearable="false" placeholder-style="color:#666;" v-model="content" @confirm="sendMsg" :adjust-position="false"></u-input>
        <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/send.png" alt="" v-if="content.length" @click="sendMsg">
        <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/microphone-btn.png" alt="" v-else @click="microPhone">
      </div>
      <div class="type-record" v-else>
        <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/keyboard-btn.png" alt="" class="keyboard-btn" @click="keyboardClick">
        <div v-if="!isStart" @click="startRecord">
          <p>点击开始录音</p>
          <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/record-btn.png" alt="" class="record-btn">
        </div>
        <div v-else @click="endRecord">
          <p>正在录音中</p>
          <div class="tips-text">点击下方，停止录音</div>
          <img src="https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/shengbo.gif" alt="" class="recording">
        </div>
      </div>
    </div>
    <u-select v-model="showType" :list="typeList" value-name="dictValue"
      label-name="dictName" @confirm="confirmType"></u-select>
    <!-- <u-popup v-model="showPopup" mode="bottom">
      <div class="popup-content">
        <div class="pop-header">
          <img src="https://cdn.cunwuyun.cn/wechat/baiduAI/question-icon.png" alt=""> 慧知会言
        </div>
        <p class="pop-title">申请获取你当前的位置信息</p>
        <div class="pop-text">
          <p>微信位置信息</p>
          <u-icon name="checkbox-mark" color="#2EC871" size="36"></u-icon>
        </div>
        <div class="pop-btn">
          <div>拒绝</div>
          <div class="pop-confirm">接受</div>
        </div>
      </div>
    </u-popup> -->
    <div class="load-content" v-if="showLoad">
      <img src="https://cdn.sinoecare.com/i/2024/08/07/66b2cfd4d220d.gif" alt=""> 
    </div>
  </div>
</template>
<script>

import {mapActions, mapState} from "vuex";
import Recorder from 'recorder-core'
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
export default {
  // customNavigation: true,
  // enablePullDownRefresh: true,
  name: 'Talk',
  data() {
    return {
      backgroundNavbar: {
        background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
        backgroundSize: 'cover',
      },
      recorderManager: null,
      recorder: null,
      type: 'text',
      isStart: false,
      content: '',
      isFlag: false,
      voiceUrl: '',
      voiceId: '',
      messageList: [
        // {
        //   userType: 0,
        //   sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
        //   isPlay: false
        // }
      ],
      current: 1,
      pages: 2,
      areaId: '',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      typeList: [],
      aiConfigId: '',
      aiConfigName: '',
      showType: false,
      showPopup: true,
      showLoad: false,
      latLng: ''
    }
  },
  computed: {
    ...mapState(['user', 'token']),
  },
  onLoad() {
  },
  mounted() {
    this.getAiTypeList()
  },
  onPullDownRefresh() {
    if(this.current > this.pages) {
      return this.$u.toast('没有更多记录')
    }
    this.current = this.current + 1
    this.getHistoryList()
  },
  methods: {
    ...mapActions(['autoLogin', 'getUserInfo', 'injectJWeixin',]),
    startRecord() {
      this.isStart = true
      this.recorder = Recorder({
        type: 'mp3',
        sampleRate: 16000,
        bitRate: 16
      })
      this.recorder.open(() => {
        this.recorder.start()
      })
		},
		endRecord() {
      this.recorder.stop((blob) => {
        var formData = new FormData();
        formData.append('file', blob, 'filename.mp3');
        this.$http.post('/admin/file/add', formData, {
          withoutToken: true,
        }).then((res) => {
          uni.hideLoading()
          if (res?.data) {
            this.voiceUrl = res.data[0].split(';')[0]
            this.voiceId = res.data[0].split(';')[1]
            this.isStart = false
            this.sendVoice()
          }
        }).catch(res => {
          this.$u.toast(res)
          uni.hideLoading()
        })

        this.recorder.close()
        this.recorder = null
      }, msg => {
        console.log('录音失败:' + msg)
        this.recorder.close()
        this.recorder = null
      })
		},
    microPhone() {
      this.type = 'voice'
      this.isStart = false
    },
    keyboardClick() {
      if(this.isStart) return
      this.type = 'text'
      this.content = ''
    },
    sendMsg() {
      if(!this.user.token) {
        return this.$u.toast("请先进行登录")
      }
      // this.$loading()
      this.showLoad = true
      this.$http.post("/app/appaicopilotinfo/add", {content: this.content, appType: 0, areaId: this.areaId, aiConfigId: this.aiConfigId, supplementContent: this.latLng}).then(res => {
        if(res.code == 0) {
          this.content = ''
          this.messageList.push(res.data[0])
          this.messageList.push(res.data[1])
          this.$nextTick(() => {  
            uni.pageScrollTo({
              duration: 300,
              selector: `.item${this.messageList.length-1}`
            });
          })
          // this.$hideLoading()
          this.showLoad = false
        }
      })
    },
    sendVoice() {
      if(!this.user.token) {
        return this.$u.toast("请先进行登录")
      }
      // this.$loading()
      this.showLoad = true
      this.$http.post("/app/appaicopilotinfo/add", {sdkFileUrl: this.voiceUrl, fileId: this.voiceId, appType: 0, aiConfigId: this.aiConfigId}).then(res => {
        if(res.code == 0) {
          this.voiceUrl = ''
          this.voiceId = ''
          res.data.map((item) => {
            if(item.sdkFileUrl) {
              item.isPlay = false
            }
          })
          this.messageList.push(res.data[0])
          this.messageList.push(res.data[1])
          uni.pageScrollTo({
            duration: 300,
            selector: `.item${this.messageList.length-1}`
          });
          // this.$hideLoading()
          this.showLoad = false
        }
      })
    },
    getHistoryList() {
      if(!this.user.token) {
        return this.$u.toast("请先进行登录")
      }
      // this.$loading()
      this.showLoad = true
      this.$http.post(`/app/appaicopilotinfo/list?current=${this.current}&size=10&aiConfigId=${this.aiConfigId}`).then(res => {
        if(res.code == 0 && res.data.records.length) {
          res.data.records.map((item) => {
            if(item.sdkFileUrl) {
              item.isPlay = false
            }
          })
          this.messageList = this.current == 1 ? res.data.records : [...res.data.records, ...this.messageList]
          var idPage = res.data.records.length-1
          this.$nextTick(() => {  
            uni.pageScrollTo({
              duration: 300,
              selector: this.current == 1 ? `.item${this.messageList.length-1}` :  `.item${idPage}`
            });
          })
          this.pages = res.data.pages
          // this.$hideLoading()
          this.showLoad = false
        }
      })
    },
    // play(src, index) {
    //   innerAudioContext.stop();
    //   if(this.messageList[index].isPlay) {
    //     innerAudioContext.onStop(() => {
    //       this.messageList[index].isPlay = false
    //     })
    //     return
    //   }
      
    //   this.messageList.map((item) => {
    //     if(item.sdkFileUrl) {
    //       item.isPlay = false
    //     }
    //   })
    //   this.messageList[index].isPlay = true
    //   innerAudioContext.src = src;

    //   this.$nextTick(() => {
    //     innerAudioContext.play();
    //   })
    //   innerAudioContext.onEnded(() => {
    //     this.messageList[index].isPlay = false
    //   })
    // },
    // playStop(index) {
    //   innerAudioContext.stop();
    //   innerAudioContext.onStop(() => {
    //     this.messageList[index].isPlay = false
    //   })
    // },
    play(src, index) {
      innerAudioContext.stop();
      this.messageList.map((item) => {
        if(item.sdkFileUrl) {
          item.isPlay = false
        }
      })
      this.messageList[index].isPlay = true
      innerAudioContext.src = src;

      this.$nextTick(() => {
        innerAudioContext.play();
      })
      innerAudioContext.onEnded(() => {
        this.messageList[index].isPlay = false
      })
    },
    playStop(index) {
      innerAudioContext.stop();
      innerAudioContext.onStop(() => {
        this.messageList[index].isPlay = false
      })
    },
    confirmType(val) {
      this.aiConfigId = val[0].value
      this.aiConfigName = val[0].label
      this.messageList = []
      this.typeList.map((item) => {
        if(item.dictValue == this.aiConfigId) {
          if(item.ability == 1) {
            this.getLocation()
          }else {
            this.latLng = ''
          }
        }
      })
    },
    getAiTypeList() {
      this.$http.post(`/app/appaiconfiginfo/list?status=1`).then(res => {
        if(res.code == 0) {
          res.data.records.map((item) => {
            item.dictName = item.appName
            item.dictValue = item.id
          })
          this.typeList = res.data.records
          this.aiConfigId = this.typeList[0].dictValue
          this.aiConfigName = this.typeList[0].dictName
          if(this.typeList[0].ability == 1) {
            this.getLocation()
          }else {
            this.latLng = ''
          }
          // this.getHistoryList()
        }
      })
    },
    getLocation() {
      this.injectJWeixin(['getLocation']).then(() => {
        wx.getLocation({
          type: 'wgs84',
          success: res => {
            this.latLng = `${res.latitude},${res.longitude}`
          },
          error: res => {
            console.log(res)
          }
        })
      }).catch(e => {
      })

    },
  },
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.Talk {
  height: 100vh;
  background-color: #fff;
  position: relative;
  .top-fixed {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    padding: 32px 0 0 28px;
    z-index: 9;
    background-color: #fff;
    p {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 24px;
      color: #708099;
      text-align: center;
      padding: 10px 0 8px 0;
      line-height: 34px;
    }
  }
  .top-select {
    display: inline-block;
    line-height: 64px;
    background: #026AF2;
    border-radius: 32px;
    text-align: center;
    padding: 0 24px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 28px;
    color: #FFF;
    u-icon {
      margin-left: 8px;
    }
  }
  .service-content {
    width: 100%;
    height: 420px;
    // background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
    // background-size: 100vw;
    // background-repeat: no-repeat;
    padding-top: 148px;
    box-sizing: border-box;
    .text-content {
      margin: 0 0 0 32px;
      width: 686px;
      height: 260px;
      background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/service-content-bg.png");
      background-size: 100vw;
      background-repeat: no-repeat;
      padding: 32px;
      box-sizing: border-box;
      border-radius: 32px;
      display: flex;
      justify-content: space-between;
      .text-left {
        width: calc(100% - 192px);
        div {
          line-height: 54px;
          font-family: SourceHanSansCN-Bold;
          font-weight: 700;
          font-size: 36px;
          // background: linear-gradient(to bottom, #2A6EE9, #58A5F7);
          // -webkit-background-clip: text;
          // -webkit-text-fill-color: transparent;
          margin-bottom: 16px;
        }
        p {
          color: #222;
          font-size: 28px;
          font-family: SourceHanSansCN;
          line-height: 44px;
          span {
            display: inline-block;
            font-weight: 700;
          }
        }
      }
      .service-img {
        display: inline-block;
        width: 192px;
        height: 170px;
      }
      
    }
  }
  .list-bg {
    width: 100%;
    height: 420px;
    background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
    position: fixed;
    left: 0;
    z-index: 1;
    background-size: 100vw;
    background-repeat: no-repeat;
  }
  .list-content {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 160px 32px 364px;
    .send-time {
      display: block;
      width: 100%;
      line-height: 28px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 20px;
      color: #999;
      text-align: center;
      margin-bottom: 28px;
    }
    .user-img {
      display: inline-block;
      width: 72px;
      height: 72px;
      vertical-align: top;
    }
    .item {
      display: inline-block;
      max-width: 440px;
      border-radius: 8px;
      padding: 18px;
      box-sizing: border-box;
      margin-bottom: 28px;
      position: relative;
      .voice-div {
        img {
          width: 26px;
          height: 28px;
        }
        span {
          display: inline-block;
          color: #333;
          font-size: 28px;
          font-family: PingFangSC;
          line-height: 28px;
          margin-right: 68px;
        }
      }
      p {
        word-break: break-all;
        line-height: 40px;
        font-family: SourceHanSansCN-Regular;
        font-size: 32px;
        color: #333;
      }
    }
    .item-right {
      display: flex;
      justify-content: flex-end;
      .item {
        background-color: #CCE2FF;
      }
      .user-img {
        margin-left: 24px;
      }
      .u-icon-right {
        position: absolute;
        top: 12px;
        right: -12px;
      }
    }
    .item-left {
      .item {
        background-color: #F3F5F7;
      }
      .user-img {
        margin-right: 24px;
      }
      .u-icon-left {
        position: absolute;
        top: 12px;
        left: -12px;
      }
    }
  }

  .fixed-bottom {
    position: fixed;
    bottom: 163px;
    left: 0;
    width: 100%;
    border-top: 1px solid #eee;
    background-color: #fff;
    z-index: 10;
    .type-text {
      padding: 24px 0 24px 32px;
      display: flex;
      img {
        width: 80px;
        height: 80px;
        padding-right: 16px;
      }
    }
    ::v-deep .u-input {
      width: calc(100% - 112px);
      height: 80px;
      background: #F4F6FA;
      border-radius: 40px;
      box-sizing: border-box;
    }
    ::v-deep .u-input__input {
      padding-left: 32px;
    }
    .type-record {
      position: relative;
      text-align: center;
      padding-top: 36px;
      .keyboard-btn {
        width: 48px;
        height: 36px;
        position: absolute;
        top: 32px;
        right: 32px;
      }
      p {
        line-height: 58px;
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        font-size: 40px;
        color: #222;
      }
      .record-btn {
        width: 156px;
        height: 156px;
        margin-top: 24px;
      }
      .tips-text {
        line-height: 40px;
        font-family: SourceHanSansCN-Regular;
        font-size: 28px;
        color: #999;
        margin-top: 16px;
      }
      .recording {
        padding-top: 48px;
        width: 204px;
        height: 96px;
      }
    }
  }
  .login-btn {
    position: fixed;
    bottom: 500px;
    left: 0;
    width: 144px;
    height: 64px;
    background: #B8B8B8;
    border-top-right-radius: 44px;
    border-bottom-right-radius: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
    line-height: 40px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 28px;
    color: #FFF;
    z-index: 999;
    img {
      width: 40px;
      height: 40px;
      vertical-align: bottom;
      margin-right: 8px;
    }
  }
  .popup-content {
    padding: 32px 28px 68px;
    box-sizing: border-box;
    .pop-header {
      padding-bottom: 28px;
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 28px;
      color: #222;
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 16px;
        vertical-align: middle;
      }
    }
    .pop-title {
      line-height: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32px;
      color: #222;
      padding-bottom: 28px;
      border-bottom: 1px solid #DEDEDE;
    }
    .pop-text {
      display: flex;
      justify-content: space-between;
      padding: 38px 0;
      border-bottom: 1px solid #DEDEDE;
      p {
        line-height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #222;
      }
    }
    .pop-btn {
      padding: 56px 0;
      div {
        display: inline-block;
        width: calc(50% - 38px);
        line-height: 72px;
        background: #F2F2F2;
        border-radius: 8px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 28px;
        color: #222;
        text-align: center;
      }
      .pop-confirm {
        margin-left: 38px;
        background-color: #2EC871;
        color: #fff;
      }
    }
  }
  .load-content {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    text-align: center;
    img {
      width: 560px;
      height: 560px;
      position: relative;
      top: 50%;
      margin-top: -280px;
    }
    
  }
}
</style>
