<script lang="ts" setup>
import { replyPosts, getReplyPostItem, delPosts } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
const emit = defineEmits<Emits>()
const props = defineProps({
  firstFloor: {
    type: Object
  },
  discussionId: {
    type: String
  }
})
interface Emits {
  (e: 'update'): void
}
const currentPage = ref(1)
const totalItem = ref(0)
const reply_content = ref('')
const isShowReply = ref(false)
const id = ref('')
const postItem: any = ref({})
const postItemList: any = ref([])
const previewList: any = ref([])
watchEffect(() => {
  postItemList.value = props.firstFloor?.comments || []
  totalItem.value = props.firstFloor?.comments_total || 0
})
// 最上面的回复
const handleReply = (val: any) => {
  isShowReply.value = true
  id.value = val.id
  postItem.value = ''
}
// 回复列表下面的回复
const handleReplyItem = (val: any) => {
  isShowReply.value = true
  postItem.value = val
}
// 提交回复
const handleReplySubmit = () => {
  const params: any = {
    discussion_id: props.discussionId,
    reply_type: '2',
    content: reply_content.value,
    reply_id: postItem.value !== '' ? postItem.value.id : props.firstFloor?.id
  }
  replyPosts(params).then(() => {
    reply_content.value = ''
    isShowReply.value = false
    emit('update')
  })
}
// 查看更多
const handleViewMore = (val: any) => {
  handleGetItemFloor(val)
}
// 收起帖子
const handleClosePosts = () => {
  postItemList.value = props.firstFloor?.comments
  currentPage.value = 1
}
// 获取评论二级列表数据
const handleGetItemFloor = (val: any) => {
  const params: any = {
    page: currentPage.value++,
    ['per-page']: 20,
    reply_id: val
  }
  getReplyPostItem(params).then(res => {
    if (params.page === 1) {
      postItemList.value = res.data.list
      console.log(postItemList.value)
    } else {
      postItemList.value = postItemList.value.concat(res.data.list)
    }
    totalItem.value = res.data.total
  })
}
//  用户标签图片
const imgUrl = computed(() => {
  if (props.firstFloor?.tag === '学者') {
    return '/center_resource/xz.png'
  } else if (props.firstFloor?.tag === '大师') {
    return '/center_resource/ds.png'
  } else if (props.firstFloor?.tag === '智者') {
    return '/center_resource/zz.png'
  } else if (props.firstFloor?.tag === '学徒') {
    return '/center_resource/xt.png'
  }
})
// 图片预览
if (props.firstFloor?.files.length > 0) {
  previewList.value = props.firstFloor?.files.map((it: any) => {
    if (it?.name.includes('.png') || it?.name.includes('.jpg') || it?.name.includes('.jpeg')) {
      return it.url
    }
  })
}

// 删除楼层
const handleDelFloor = (val: any) => {
  ElMessageBox.confirm('确定要删除该楼层吗？', '提示').then(() => {
    const params: any = { id: val, type: 'reply' }
    delPosts(params).then(() => {
      ElMessage.success('帖子删除成功')
      emit('update')
    })
  })
}
const getContent = (val: any) => {
  if (val.includes('\n')) {
    return val.replace('\n', '<br/>')
  }
  return val
}
</script>
<template>
  <div class="main_post">
    <div class="post_left">
      <div class="left_logo" v-if="props.firstFloor?.floor === 1"></div>
      <div class="left_logo_txt">楼主</div>
      <img :src="props.firstFloor?.avatar || '/center_resource/avatar.png'" class="left_avatar" />
      <div class="left_floor">{{ props.firstFloor?.floor }}楼</div>
      <div class="left_name">{{ props.firstFloor?.name }}</div>
      <div class="left_remark" v-if="props.firstFloor?.tag !== '老师'">
        <img :src="imgUrl" class="remark_img" />
        <div class="remark_name">{{ props.firstFloor?.tag }}</div>
      </div>
      <div class="left_remark" v-else>
        <div class="remark_name1">{{ props.firstFloor?.tag }}</div>
      </div>
    </div>
    <div class="post_right">
      <el-button
        type="primary"
        round
        class="right_btn"
        v-if="props.firstFloor?.floor > 1"
        @click="handleDelFloor(props.firstFloor?.id)"
        >删除当前楼层</el-button
      >

      <div class="right_con" v-html="props.firstFloor?.content"></div>
      <template v-if="props.firstFloor?.files.length > 0">
        <div class="right_files">
          <template v-for="(it, index) in props.firstFloor?.files" :key="index">
            <div
              class="files_img"
              v-if="it?.name.includes('.png') || it?.name.includes('.jpg') || it?.name.includes('.jpeg')">
              <el-image :src="it?.url" :preview-src-list="previewList" :initial-index="4" fit="cover" />
              <div class="img_txt">查看大图</div>
            </div>
            <video v-if="it?.name.includes('.mp4')" controls id="video">
              <source :src="it?.url" />
            </video>
          </template>
        </div>
      </template>
      <div class="right_time">发表于&nbsp;&nbsp; {{ props.firstFloor?.updated_time }}</div>
      <el-link :underline="false" class="right_btn" @click="handleReply(props.firstFloor)">
        <img src="/center_resource/reply_btn.png" alt="" />
        <div class="btn_txt">回复</div>
      </el-link>
      <div class="right_list" v-if="props.firstFloor?.comments_total > 0">
        <div v-for="(item, index) in postItemList" :key="index">
          <div class="list_top">
            <img :src="item.avatar || '/center_resource/avatar.png'" alt="" class="top_img" />

            <div class="top_name" v-if="item.floor_id !== item.reply_id">
              {{ item.from_name }}&nbsp;回复 &nbsp;<span style="color: #3571e0">{{ item.to_name }}</span>
            </div>
            <div class="top_name" v-if="item.floor_id === item.reply_id">
              {{ item.from_name }}
            </div>
          </div>
          <div class="list_con" v-html="getContent(item.content)"></div>
          <div class="list_bottom">
            <div class="bottom_time">来自于&nbsp;&nbsp;{{ item.updated_time }}</div>
            <el-link :underline="false" class="bottom_reply" @click="handleReplyItem(item)">
              <img src="/center_resource/reply_btn.png" alt="" />
              <div class="reply_txt" @click="handleReplyItem(item)">回复</div>
            </el-link>
          </div>
        </div>
        <div class="list_more" v-if="totalItem > 3">
          <el-link
            :underline="false"
            type="primary"
            size="mini"
            @click="handleViewMore(props.firstFloor?.id)"
            v-if="postItemList.length !== totalItem"
            >查看更多</el-link
          >
          <el-link @click="handleClosePosts" v-else :underline="false" type="primary" size="mini">收起帖子</el-link>
        </div>
      </div>
      <!-- 回复框 -->
      <div class="reply_input" v-if="isShowReply === true">
        <div class="input_txt" v-if="postItem === ''">回复本楼</div>
        <el-input
          v-model="reply_content"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          style="width: 100%"
          :placeholder="postItem.to_name ? `回复@${postItem.from_name}:` : ''" />
        <el-button class="input_btn" type="primary" @click="handleReplySubmit">发表回复</el-button>
      </div>
    </div>
  </div>
  <div class="line"></div>
</template>
<style lang="scss" scoped>
.main_post {
  width: 100%;
  display: flex;
  .post_left {
    width: 240px;
    padding: 40px;
    background: #f9f9fc;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .left_floor {
      position: absolute;
      top: 5px;
      right: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }

    .left_logo {
      height: 0;
      width: 0;
      border-top: 25px solid #ba143e;
      border-left: 25px solid #ba143e;
      border-bottom: 25px solid transparent;
      border-right: 25px solid transparent;
      align-self: flex-start;
      position: absolute;
      top: 0;
      left: 0;
    }
    .left_logo_txt {
      position: absolute;
      top: 5px;
      left: 5px;
      transform: rotate(-45deg);
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
    }
    .left_avatar {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    .left_name {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      margin-top: 14px;
    }
    .left_remark {
      text-align: center;
      margin-top: 8px;
      .remark_img {
        width: 40px;
        height: 40px;
      }
      .remark_name {
        font-size: 10px;
        font-weight: 400;
        color: #666666;
        margin-top: 2px;
      }
      .remark_name1 {
        width: 42px;
        height: 20px;
        border: 1px solid #ba143e;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 400;
        color: #ba143e;
        line-height: 20px;
        text-align: center;
      }
    }
  }
  .post_right {
    width: 100%;
    padding: 40px 21px 40px 40px;
    display: flex;
    flex-direction: column;
    .right_con {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 27px;
      word-break: break-word;
    }
    .right_files {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .files_img {
        position: relative;
        width: 160px;
        height: 90px;
        margin: 20px;

        .el-image {
          width: 160px;
          height: 90px;
        }
        .img_txt {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 53px;
          height: 18px;
          background: rgba(0, 0, 0, 0.18);
          opacity: 1;
          border-radius: 2px 0px 0px 0px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;
        }
      }

      video {
        width: 300px;
        height: 200px;
      }
    }
    .right_time {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #b4b4b4;
      margin-top: 20px;
    }
    .right_btn {
      align-self: flex-end;
      display: flex;
      img {
        width: 22px;
        height: 22px;
      }
      .btn_txt {
        margin-left: 9px;
        font-size: 16px;
        font-weight: 400;
        line-height: 27px;
        color: #9b9b9b;
      }
    }
    .reply_input {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      .input_txt {
        font-size: 18px;
        font-weight: 400;
        line-height: 31px;
        color: #333333;
        margin: 20px 0;
      }
      .input_btn {
        align-self: flex-end;
        margin: 20px 0;
      }
    }
    .right_list {
      padding: 20px;
      background: #f4f5f8;
      margin: 20px 0 40px 0;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      .list_more {
        align-self: center;
      }
      .list_top {
        display: flex;
        .top_img {
          width: 30px;
          height: 30px;
        }
        .top_name {
          font-size: 16px;
          font-weight: 400;
          line-height: 27px;
          color: #666666;
          margin: 0 10px;
        }
      }
      .list_con {
        font-size: 16px;
        font-weight: 400;
        line-height: 27px;
        color: #666666;
        padding-left: 40px;
        word-break: break-word;
      }
      .list_bottom {
        display: flex;
        justify-content: space-between;
        padding-left: 40px;

        .bottom_time {
          font-size: 12px;
          font-weight: 400;
          line-height: 20px;
          color: #b4b4b4;
        }
        .bottom_reply {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 22px;
            height: 22px;
          }
          .reply_txt {
            font-size: 16px;
            font-weight: 400;
            line-height: 27px;
            color: #9b9b9b;
            margin-left: 9px;
          }
        }
      }
    }
  }
}
.line {
  width: 99%;
  height: 4px;
  background: #e8e8e8;
}
:deep(.el-textarea) {
  .el-textarea__inner {
    padding: 20px 0 0 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    color: #999999;
  }
}
</style>
