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

const router = useRouter()

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

// 关键字搜索
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() {
  console.log(1)
  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 {
    router.push(`/home?conversationId=${id}`)
    // emits("updateCurConversation", id)
  }
}

// 编辑
function editPage() {
  editStatus.value = !editStatus.value
  if (!list.length) return
}

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

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

<template>
  <div>
    <div>
      <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">
                <img src="./images/delete-icon.png" alt="">
                <div>删除</div>              
              </div>
            </div>
            <div class="header">
              <!-- <img class="icon" src="./images/h-q.png" alt="" /> -->
              <div class="title">历史会话</div>
              <div class="edit" :class="{'dis-edit': !list.length}" @click="editPage">
                {{ 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>
                  <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 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 v-else class="no-data">
              <img src="./images/empty.png" alt="" />
              <div class="text">暂无历史会话</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cps-history-record-container {
  // background: yellow;
  height: calc(100vh - 120px);
  // width: 365px;
  display: flex;
  .wrap-main {
    width: 345px;
    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: 120px;
          background: #29B6FD;
          border-radius: 18px;
          font-size: 13px;
          color: #ffffff;
          line-height: 18px;
          padding: 9px 0;
          text-align: center;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            display: block;
            margin-right: 8px;
          }
        }
      }
      .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-top: 2px;
        }
        .edit {
          font-size: 13px;
          color: #27353C;
          line-height: 18px;
          margin-top: 3px;
          &.dis-edit {
            color: #ABB1B8;
          }
        }
      }
      .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: #29B6FD;
          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>
