<template>
  <Transition>
    <div v-if="modelValue" class="body">
      <div class="headerTittle">消息记录</div>
      <el-switch
        v-model="value"
        active-text="已发送消息"
        inactive-text="已确认消息"
      />
      <br />
      <el-scrollbar class="itemScrollbar">
        <div class="item" v-for="(item, index) in msgData" :key="index">
          <div>
            <div>{{ item.created }}</div>
            <div>{{ item.title }}</div>
            <div>
              {{ item.content }}
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="bottomBtn">
        <el-button
          type="primary"
          :disabled="setNextStatus"
          @click="setPage(1)"
          class="btn"
          >下一页</el-button
        >
        <el-button
          class="btn"
          :disabled="page == 1"
          type="primary"
          @click="setPage(-1)"
        >
          上一页
        </el-button>

        <el-button
          type="primary"
          class="btn"
          @click="emits('update:modelValue', false)"
          >关 闭</el-button
        >
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { useDictionaryStore } from "@/store";
import { userMessage } from "@/api/user";
import { Transform } from "stream";
import { Transition } from "vue";
const dictS = useDictionaryStore();
const value = ref(false);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const messages = ref([]);
const page = ref(1);
const pageSize = ref(5);
const msgData = ref([]);
const totalCount = ref(0);
const emits = defineEmits(["update:modelValue"]);
const getPageInfo = async () => {
  const { data, code } = await userMessage({
    pageNo: page.value,
    pageSize: pageSize.value,
    isSend: value.value ? 1 : null,
  });
  if (code == "200") {
    msgData.value = data.records;
    totalCount.value = data.totalCount;
  }
};
const setNextStatus = computed(() => {
  return totalCount.value - page.value * pageSize.value > 0 ? false : true;
});
const setPage = (num: number) => {
  page.value = page.value + num;
  getPageInfo();
};
const reset = () => {
  page.value = 0;
  msgData.value = [];
  totalCount.value = 0;
};

onMounted(() => {
  getPageInfo();
});
watch(
  () => props.modelValue,
  (Val) => {
    if (Val == true) {
      getPageInfo();
    } else {
      reset();
    }
  }
);
watch(value, () => {
  page.value = 1;
  getPageInfo();
});
</script>
<style scoped lang="scss">
.body {
  width: 400px;
  height: 80vh;
  position: fixed;
  right: 20px;
  top: 80px;
  z-index: 3;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid #00000030;

  .headerTittle {
    font-size: $f24;
    height: 40px;
    border-bottom: 1px solid #f1f3f5;
    margin-bottom: 10px;
  }

  .itemScrollbar {
    height: calc(100% - 140px);
  }

  .item {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #f1f3f5;
    border-radius: 16px;
    justify-content: space-between;
    font-size: $f20;

    .operate {
      margin-left: 10px;
    }
  }

  .bottomBtn {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    border-top: 1px solid #f1f3f5;
    margin-top: 10px;

    .btn {
      font-size: $f20;
      font-weight: 500;
    }
  }
}
</style>
