<template>
  <div class="AppRecord">
    <u-navbar title="Copilot小助理" title-color="#000" title-width="300" title-size="32" :title-bold="true" 
      :background="backgroundNavbar" :is-back="false" :is-fixed="true" height="44"></u-navbar>
    <div class="list-bg"></div>
    <div class="search-content">
      <u-search v-model="searchVal" :clearabled="true" placeholder="请输入搜索关键词…" :show-action="false"
        bg-color="#fff" search-icon-color="#E2E8F1" color="#666" height="72" @search="getSearchList" @clear="handerClear">
      </u-search>
    </div>
    <div class="list-content" :style="{'top': `${statusBarHeight+110}px`}">
      <div class="item" v-for="(item, index) in messageList" :key="index">
        <p class="item-text">{{item.content}}</p>
        <div class="time-flex">
          <p class="time-text">{{item.createTime}}</p>
          <div class="item-view">
            <p @click="toDetail(item)">查看对话</p>
            <div class="del-btn" @click="del(item)">
              <img src="./img/del-img.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <AiEmpty v-if="!messageList.length"/>
    </div>
  </div>
</template>

<script>

import {mapActions, mapState} from "vuex";
export default {
  customNavigation: true,
  enablePullDownRefresh: true,
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black',
  name: 'AppRecord',
  appName: 'Copilot小助理(记录)',
  data() {
    return {
      backgroundNavbar: {
        background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
        backgroundSize: 'cover',
      },
      searchVal: '',
      messageList: [
        // {
        //   userType: 0,
        //   sdkFileUrl: 'http://test87ftp.cunwuyun.cn/20240104/output.mp3',
        //   isPlay: false
        // }
      ],
      current: 1,
      pages: 2,
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
    }
  },
  computed: {
    ...mapState(['user', 'token']),
  },
  onShow() {
    this.getHistoryList()
  },
  onPullDownRefresh() {
    if(this.current > this.pages) {
      return this.$u.toast('没有更多记录')
    }
    this.current = this.current + 1
    this.getHistoryList()
  },
  methods: {
    ...mapActions(['autoLogin']),
    getHistoryList() {
      if(!this.token) {
        return this.$u.toast("请先进行登录")
      }
      this.$loading()
      this.$instance.post(`/app/appaicopilotinfo/listHistory?current=${this.current}&size=10&content=${this.searchVal}`).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()
        }else {
          if(this.current == 1) {
            this.messageList = []
          }
          
        }
      })
    },
    getSearchList() {
      this.current = 1
      this.getHistoryList()
    },
    handerClear() {
      this.searchVal = ''
      this.getSearchList()
    },
    toDetail(e) {
      uni.navigateTo({url: `./Detail?aiConfigId=${e.aiConfigId}&conversationId=${e.conversationId}`})
    },
    del(e) {
      this.$dialog.confirm({content: "确定删除该数据?"}).then(() => {
        uni.showLoading()
        this.$instance.post(`/app/appaicopilotinfo/deleteConversation?conversationId=${e.conversationId}`).then((res) => {
          if (res.code == 0) {
            this.$u.toast('删除成功！')
            this.getSearchList()
          }
          uni.hideLoading()
        })
      }).catch(() => {
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "~dvcp-wui/common";
page {
  height: 100%;
}
.AppRecord {
  height: 100vh;
  background-color: #fff;
  position: relative;
  .list-bg {
    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;
    position: fixed;
    left: 0;
  }
  .search-content {
    padding: 32px;
    width: 100%;
    // background: linear-gradient(to bottom, #D7EDFE, #EAF5FE);
    background-image: url("https://cdn.sinoecare.com/i/2024/07/15/6694f173557c9.png");
    background-size: 100vw;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    z-index: 99;
  }
  .list-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32px 32px;
    position: absolute;
    left: 0;
    z-index: 2;
    .item {
      .item-text {
        line-height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #333;
        padding: 18px;
        background-color: #CCE2FF;
        border-radius: 8px;
      }
      .time-flex {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        .time-text {
          color: #999;
          padding-top: 34px;
        }
        .item-view {
          p {
            display: inline-block;
            font-size: 28px;
            color: #216AFD;
            padding: 16px;
          }
          div {
            display: inline-block;
            padding: 34px 0 34px 38px;
            img {
              width: 40px;
              height: 40px;
              vertical-align: bottom;
            }
          }
        }
      }
    }
  }
}
</style>
