<script setup lang="ts">
import ReplyPostDialog from '../components/ReplyPostDialog.vue'
import ReplyPostItem from '../components/ReplyPostItem.vue'
import { getPostFirst, delPosts } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const isShowReplyDialog = ref(false)
const postInfo: any = ref({})
const firstPostList: any = ref([])
const totalFloor: any = ref(0)
const discussionId: any = route.query.id
const currentPage = ref(1)
const page = reactive({
  size: 10,
  currentPage: 1
})
onMounted(() => {
  handleGetFirstFloor()
})
const handleGetFirstFloor = () => {
  const params: any = { discussion_id: discussionId, page: page.currentPage, ['per-page']: page.size }
  getPostFirst(params).then(res => {
    totalFloor.value = res.data.total
    postInfo.value = res.data.info
    firstPostList.value = res.data.list
    firstPostList.value.map((item: any) => {
      if (item.files !== '') {
        item.files = JSON.parse(item.files)
      }
    })
  })
}

const handleReplyNewFloor = () => {
  isShowReplyDialog.value = true
}
const handleSizeChange = (val: any) => {
  page.currentPage = 1
  page.size = val
  handleFresh()
}
const handleCurrentChange = (val: any) => {
  page.currentPage = val
  handleFresh()
}
const handleDelPosts = () => {
  ElMessageBox.confirm('确定要删除该帖子吗？', '提示').then(() => {
    const params: any = { id: discussionId, type: 'discussion' }
    delPosts(params).then(() => {
      ElMessage.success('帖子删除成功')
      history.go(-1)
    })
  })
}
const handleFresh = () => {
  handleGetFirstFloor()
}
const backToTop = () => {
  window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
  })
}
</script>
<template>
  <AppCard title="帖子详情">
    <div class="card">
      <div class="card-header">
        <span>{{ postInfo.title }}</span>
        <div class="content_btn">
          <el-button type="primary" round @click="handleDelPosts" v-permission="'v1-teaching-discussion-delete'"
            >删除当前帖子</el-button
          >
          <el-button @click="handleReplyNewFloor" round v-permission="'v1-teaching-discussion-reply'"
            >回复新楼层</el-button
          >
        </div>
      </div>
      <ReplyPostItem
        v-for="(item, index) in firstPostList"
        :key="index"
        :firstFloor="item"
        :discussionId="discussionId"
        @update="handleFresh" />
      <el-pagination
        class="pagination"
        v-model:currentPage="currentPage"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalFloor"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <div class="to_top" @click="backToTop">
      <img src="/center_resource/to_top.png" alt="" class="top_img" />
      <div class="top_txt">
        <div>返回</div>
        <div>顶部</div>
      </div>
    </div>
  </AppCard>
  <ReplyPostDialog
    v-model:isShowReplyDialog="isShowReplyDialog"
    v-if="isShowReplyDialog"
    :discussionId="discussionId"
    @create="handleGetFirstFloor" />
</template>
<style lang="scss" scoped>
.card {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 19px;
    background: rgba(255, 255, 255, 0.39);
    padding: 20px 46px 20px 19px;
    box-shadow: 0 0 10px 0 #e4e4e4;
  }
  .pagination {
    margin: 30px 20px 50px 0;
    align-self: flex-end;
  }
}
.to_top {
  width: 60px;
  height: 60px;
  background: #ffffff;
  box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.11);
  border-radius: 50%;
  opacity: 1;
  text-align: center;
  line-height: 60px;
  position: fixed;
  top: 60%;
  right: 50px;
  cursor: pointer;
  .top_txt {
    display: none;
  }
  &:hover {
    background: #ba143e;
    text-align: center;

    .top_img {
      display: none;
    }
    .top_txt {
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 1.2;
      padding-top: 15px;
    }
  }
}
</style>
