<script setup lang="ts">
import type { Post } from '../types'
import { DArrowLeft, ArrowUp } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import DiscussItem from '../components/DiscussItem.vue'

import { getPostAndDiscussList } from '../api'
import { collectionResource } from '@/api/base'

const DiscussForm = defineAsyncComponent(() => import('../components/DiscussForm.vue'))

interface Props {
  id: string
  onBack?: () => void
}
const props = defineProps<Props>()
const router = useRouter()

let detail = $ref<Post>()

const appList = $ref<InstanceType<typeof AppList> | null>(null)
const params = reactive({ page: 1, limit: 10 })
// 列表配置
const listOptions = computed(() => {
  return {
    hasFilterButton: false,
    remote: {
      httpRequest: getPostAndDiscussList,
      params: { id: props.id },
      beforeRequest(requestParams: any) {
        Object.assign(params, requestParams)
        return requestParams
      },
      callback(res: { total: number; data: any; info: any }) {
        detail = res.info
        return { total: res.total, list: res.data }
      }
    }
  }
})
// 刷新
function handleRefetch() {
  appList?.refetch()
}
const discussFormVisible = $ref(false)

// 收藏/取消收藏
function toggleCollection() {
  collectionResource({
    course_id: detail.course_id,
    semester_id: detail.semester_id,
    chapter_id: detail.chapter_id,
    source_id: detail.id,
    type: 6,
    status: detail.collection_count ? 0 : 1
  }).then(() => {
    detail.collection_count = detail.collection_count ? 0 : 1
  })
}

// 返回列表
function handleBack() {
  props.onBack ? props.onBack() : router.replace('/bbs')
}
</script>

<template>
  <div class="comeback">
    <div class="comeback__inner" @click="handleBack">
      <el-icon><DArrowLeft /></el-icon>
      <p>返回列表</p>
    </div>
  </div>
  <div class="bbs">
    <div class="bbs-hd" v-if="detail">
      <h1>{{ detail.title }}</h1>
      <el-button round auto-insert-space @click="toggleCollection">
        {{ detail.collection_count ? '取消收藏' : '收藏' }}
      </el-button>
      <el-button round type="primary" auto-insert-space @click="discussFormVisible = true">回复</el-button>
    </div>
    <AppList v-bind="listOptions" ref="appList">
      <template #body="{ data }">
        <DiscussItem :landlordId="detail.sso_id" :data="item" v-for="(item, index) in data" :key="item.id">
          <template #index>{{ (params.page - 1) * params.limit + (index + 1) }}楼</template>
        </DiscussItem>
      </template>
    </AppList>
  </div>
  <DiscussForm v-model="discussFormVisible" :id="id" @update="handleRefetch" v-if="discussFormVisible"></DiscussForm>
  <el-backtop :right="22" :bottom="100">
    <el-icon><ArrowUp /></el-icon>
    <span class="t1">返回<br />顶部</span>
  </el-backtop>
</template>

<style lang="scss">
.comeback {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}
.comeback__inner {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  color: #666666;
  cursor: pointer;
  p {
    padding: 0 5px;
  }
}
.bbs {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  .table-list-ft {
    padding: 40px;
  }
}
.bbs-hd {
  position: relative;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  box-shadow: #e4e4e4 0px 5px 10px;
  z-index: 10;
  h1 {
    flex: 1;
    font-size: 20px;
    font-weight: 400;
    color: #666666;
  }
}
.el-backtop {
  width: 60px;
  height: 60px;
  color: #000;
  .t1 {
    display: none;
    font-size: 14px;
    color: #fff;
  }
  &:hover {
    background-color: var(--main-color);
    .el-icon {
      display: none;
    }
    .t1 {
      display: inline-block;
    }
  }
}
.is-h5 {
  .el-backtop {
    width: 40px;
    height: 40px;
    .t1 {
      font-size: 12px;
    }
  }
}
</style>
