<script lang="ts" setup>
import { onMounted } from "vue";
import { queryUserConversationPage, deleteUserConversation } from "@/api/conversation";
import moment from "moment";
import { showToast } from "vant";

const emits = defineEmits(["updateCurConversation"]);

// 展开历史记录
const historyRecordShow = ref(false);

// 关键字搜索
const keyWord = ref("");

// 展示页面可编辑状态
const editStatus = ref(false);

// 查询会话历史记录
const list = ref([]) as any;
async function fetchUserConversationPage() {
  const params = {
    keyword: keyWord.value,
    pageNum: 0,
    pageSize: 100,
  };
  const res = await queryUserConversationPage(params);
  list.value = JSON.parse(res.data).data.records;
  list.value.map((i: any) => {
    i.showTime = moment(i.endTime).format("HH:mm:ss");
    i.showDate = moment(i.endTime).format("MM月DD日");
    i.showFullDate = moment(i.endTime).format("YYYY年MM月DD日");
    i.deleteSelect = false;
    if (moment().isSame(moment(i.endTime), "day")) {
      i.timeTag = "今天";
    } else if (
      moment(i.endTime).isBefore(moment().endOf("isoWeek")) &&
      moment(i.endTime).isAfter(moment().startOf("isoWeek"))
    ) {
      i.timeTag = "本周";
    } else if (moment(i.endTime).isSame(new Date(), 'year')) {
      i.timeTag = "之前";
      i.isYear = true
    } else {
      i.timeTag = "之前";
    }
  });
  console.log(list.value);
}

// 删除会话历史记录
async function deleteConversation() {
  let ids: string[] = [];
  list.value.forEach((item: any) => {
    if (item.deleteSelect) {
      ids.push(item.conversationId);
    }
  });
  if (!ids.length) {
    showToast('请选择会话');
    return
  }
  await deleteUserConversation({
    conversationIdList: ids,
  });

  showToast('删除成功');
  fetchUserConversationPage();
}

// 全选/反选
let selectAllMark = false;
function selectAll() {
  list.value.map((item: any) => {
    item.deleteSelect = !selectAllMark;
    item.currentConversationFlag ? (item.deleteSelect = false) : "";
  });
  selectAllMark = !selectAllMark;
}

// 选择会话
function changeConversation(id: string, item?: any) {
  if (editStatus.value) {
    console.log(item)
    item.deleteSelect = !item.deleteSelect
  } else {
    historyRecordShow.value = false;
    emits("updateCurConversation", id);
  }
}

// 组件初始化
function initCps() {
  historyRecordShow.value = true;
  keyWord.value = "";
  editStatus.value = false;
  fetchUserConversationPage();
}

onMounted(() => {});
</script>

<template>
  <div v-if="historyRecordShow">
    <div class="mask">
      <div class="cps-history-record-container">
        <div class="wrap-main">
          <div class="main">
            <div class="delete-btn" v-if="editStatus">
              <div class="btn" @click="deleteConversation">删除</div>
            </div>
            <div class="header">
              <img class="icon" src="./images/h-q.png" alt="" />
              <div class="title">历史会话</div>
              <div class="edit" @click="editStatus = !editStatus">
                {{ editStatus ? "完成" : "编辑" }}
              </div>
            </div>
            <div class="search-box" v-if="!editStatus">
              <img src="./images/history-search.png" alt="" />
              <input
                @blur="fetchUserConversationPage"
                type="text"
                v-model="keyWord"
                placeholder="关键字"
              />
            </div>
            <div class="list" v-if="list.length">
              <div v-for="(item, index) in list" :key="index">
                <div
                  class="tag"
                  v-if="index === 0 || list[index - 1].timeTag !== item.timeTag"
                >
                  <div class="select-all-wrap" v-if="editStatus && index === 0">
                    <div class="select-all" @click="selectAll">全选</div>
                  </div>
                  <div class="text" v-if="index === 0">{{ item.timeTag }}</div>
                  <div v-else>
                    <div class="text" v-if="list[index - 1].timeTag !== item.timeTag">
                      {{ item.timeTag }}
                    </div>
                  </div>
                </div>
                <div
                  @click="changeConversation(item.conversationId)"
                  class="cur-conv"
                  v-if="item.currentConversationFlag"
                >
                  <div class="text">{{ item.conversationTitle }}</div>
                  <img src="./images/arrow-right-green.png" alt="" />
                </div>
                <div class="item" v-else>
                  <div class="l-i">
                    <div
                      class="select-group"
                      v-if="editStatus"
                      @click="changeConversation(item.conversationId, item)"
                    >
                      <img v-if="item.deleteSelect" src="./images/checked.png" alt="" />
                      <img v-else src="./images/unchecked.png" alt="" />
                    </div>
                    <div class="content" @click="changeConversation(item.conversationId, item)">
                      {{ item.conversationTitle }}
                    </div>
                  </div>
                  <div class="time" v-if="item.timeTag === '今天'">
                    {{ item.showTime }}
                  </div>
                  <div class="time" v-if="item.timeTag === '本周'">{{ item.showDate }}</div>
                  <div class="time" v-if="item.timeTag === '之前' && !item.isYear">{{ item.showFullDate }}</div>
                  <div class="time" v-if="item.timeTag === '之前' && item.isYear">{{ item.showDate }}</div>
                </div>
              </div>
            </div>
            <div class="no-data">
              <img src="./images/empty.png" alt="" />
              <div class="text">暂无历史会话</div>
            </div>
          </div>
        </div>
        <div class="expend-btn" @click="historyRecordShow = false">
          <img src="./images/history-reverse.png" alt="" />
        </div>
      </div>
    </div>
  </div>
  <img v-else @click="initCps" class="expend" src="./images/history.png" alt="" />
</template>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 375px;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  z-index: 999;
  .cps-history-record-container {
    // background: yellow;
    height: 100%;
    width: 365px;
    display: flex;
    .wrap-main {
      width: 345px;
      background: #3975c6;
      border-radius: 0px 20px 20px 0px;
      .main {
        box-sizing: border-box;
        width: 333px;
        height: 100%;
        background: #fff;
        border-radius: 0px 24px 24px 0px;
        padding: 20px 16px;
        position: relative;
        .delete-btn {
          position: absolute;
          bottom: 0;
          left: 16px;
          right: 16px;
          padding: 8px 0;
          border-top: 1px solid #e3f2f2;
          .btn {
            width: 200px;
            background: #29a794;
            border-radius: 18px;
            font-size: 13px;
            color: #ffffff;
            line-height: 18px;
            padding: 9px 0;
            text-align: center;
            margin: 0 auto;
          }
        }
        .header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          .icon {
            width: 28px;
            height: 28px;
          }
          .title {
            font-weight: 600;
            font-size: 18px;
            color: #222222;
            line-height: 24px;
            margin: 2px auto 0 11px;
          }
          .edit {
            font-size: 13px;
            color: #586462;
            line-height: 18px;
            margin-top: 3px;
          }
        }
        .search-box {
          box-sizing: border-box;
          width: 301px;
          height: 36px;
          background: #f6f7f9;
          border-radius: 20px;
          margin-bottom: 24px;
          position: relative;
          font-size: 13px;
          img {
            display: block;
            position: absolute;
            top: 10px;
            left: 16px;
            width: 16px;
            height: 16px;
          }
          input {
            position: relative;
            width: 301px;
            font-size: 13px;
            color: #393d46;
            line-height: 20px;
            background: none;
            padding: 8px 40px;
            &::placeholder {
              color: #b2b8c1;
            }
          }
        }
        .cur-conv {
          display: flex;
          justify-content: space-between;
          padding-bottom: 8px;
          .text {
            font-size: 13px;
            color: #29a794;
            line-height: 20px;
            max-width: 191px;
            max-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          img {
            width: 7px;
            height: 10px;
          }
        }
        .list {
          margin-top: 23px;
          overflow: scroll;
          height: calc(100vh - 180px);
          position: relative;

          .tag {
            display: flex;
            margin-bottom: 16px;
            .select-all-wrap {
              // width: 27px;
              height: 20px;
              margin-right: 12px;
              .select-all {
                font-size: 13px;
                color: #393d46;
                line-height: 20px;
              }
            }
            .text {
              font-size: 13px;
              color: #9ea9a7;
              line-height: 20px;
              text-overflow: ellipsis;
            }
          }
          .item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            // margin-top: -12px;
            .l-i {
              display: flex;
              // width: 16px;
              // height: 16px;
              .select-group {
                width: 16px;
                height: 16px;
                margin-right: 17px;
                margin-top: 3px;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }
              .content {
                font-size: 13px;
                color: #393d46;
                line-height: 20px;
                max-width: 191px;
                max-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .time {
              font-size: 12px;
              color: #b2b8c1;
              line-height: 20px;
            }
          }
        }
        .no-data {
          img {
            width: 120px;
            height: 120px;
            margin: 100px auto 16px;
            display: block;
          }
          .text {
            font-size: 13px;
            color: #9699A0;
            line-height: 20px;
            text-align: center;
          }
        }
      }
    }
    .expend-btn {
      width: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 20px;
        height: 152px;
      }
    }
  }
}

.mask-hidden {
  // left: -375px;
}

.expend {
  position: fixed;
  left: 0;
  top: 50%;
  width: 20px;
  height: 152px;
  transform: translate(0, -50%);
}
</style>
