<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { DiscussItem } from '../types'
import { ElMessage, ElInput } from 'element-plus'
import DiscussItemCommentList from './DiscussItemCommentList.vue'
import FileList from './FileList.vue'
import { replyToPost } from '../api'

interface Props {
  landlordId: string
  data: DiscussItem
}
const props = defineProps<Props>()

const username = $computed(() => {
  const user = props.data.sso_user
  return user.realname || user.nickname || user.username
})

const commentListRef = $ref<InstanceType<typeof DiscussItemCommentList> | null>(null)

const formRef = $ref<FormInstance>()
const form = reactive({
  content: '',
  files: []
})
const rules = ref<FormRules>({
  content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
})

let formVisible = $ref(false)
const inputRef = $ref<InstanceType<typeof ElInput> | null>(null)
function handleReply() {
  formVisible = !formVisible
  nextTick(() => {
    formVisible && inputRef?.focus()
  })
}
// 发布回复
function handleSubmit() {
  formRef?.validate().then(() => {
    replyToPost({
      id: props.data.discussion_id,
      reply_type: 2,
      floor_id: props.data.id,
      reply_id: props.data.id,
      content: form.content
    }).then(() => {
      formVisible = false
      form.content = ''
      commentListRef?.refresh()
      ElMessage({ message: '回复成功', type: 'success' })
    })
  })
}
</script>

<template>
  <section class="discuss-item">
    <div class="discuss-item__left">
      <div class="discuss-item__landlord" v-if="data.sso_id === landlordId"><span>楼主</span></div>
      <div class="discuss-item__avatar">
        <img :src="data.sso_user.avatar || 'https://webapp-pub.ezijing.com/website/base/images/default.jpg'" />
      </div>
      <p class="discuss-item__username">{{ username }}</p>
      <template v-if="data.sso_type === 2">
        <el-button round plain size="small" type="primary">老师</el-button>
      </template>
      <template v-else>
        <img
          src="@/assets/images/icon_bbs_level_1.png"
          width="40"
          title="学徒"
          v-if="data.sso_user.discussion_level === 0" />
        <img
          src="@/assets/images/icon_bbs_level_2.png"
          width="40"
          title="学者"
          v-if="data.sso_user.discussion_level === 1" />
        <img
          src="@/assets/images/icon_bbs_level_3.png"
          width="40"
          title="大师"
          v-if="data.sso_user.discussion_level === 2" />
        <img
          src="@/assets/images/icon_bbs_level_4.png"
          width="40"
          title="智者"
          v-if="data.sso_user.discussion_level === 3" />
      </template>
    </div>
    <div class="discuss-item__right">
      <div class="discuss-item__main">
        <div class="discuss-item__content" v-html="data.content"></div>
        <FileList preview :data="data.files" v-if="data.files.length" />
      </div>
      <p class="discuss-item__time">{{ data.updated_time }}</p>
      <div class="discuss-item__comment"><p @click="handleReply">回复</p></div>
      <div class="discuss-item-form" v-if="formVisible">
        <p class="discuss-item-form__title">回复本楼</p>
        <el-form ref="formRef" :model="form" :rules="rules" hide-required-asterisk>
          <el-form-item prop="content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 6 }"
              :maxlength="100"
              v-model="form.content"
              ref="inputRef" />
          </el-form-item>
          <el-row justify="end">
            <el-button round type="primary" @click="handleSubmit">发表回复</el-button>
          </el-row>
        </el-form>
      </div>
      <DiscussItemCommentList :data="data" ref="commentListRef" />
    </div>
  </section>
</template>

<style lang="scss">
.discuss-item {
  display: flex;
  border-bottom: 4px solid #e8e8e8;
}
.discuss-item__left {
  position: relative;
  width: 240px;
  padding: 40px;
  text-align: center;
  background-color: #f9f9fc;
  box-sizing: border-box;
}
.discuss-item__landlord {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  color: #fff;
  background-color: var(--main-color);
  z-index: 2000;
  clip-path: polygon(0 0, 100% 0, 0% 100%);
  span {
    position: absolute;
    left: 5px;
    top: 10px;
    transform: rotate(-45deg);
  }
}
.discuss-item__avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.discuss-item__username {
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.discuss-item__right {
  flex: 1;
  overflow: hidden;
  padding: 40px;
  > .discuss-item__comment {
    margin-right: 20px;
  }
}
.discuss-item__main {
  min-height: 180px;
}
.discuss-item__content {
  font-size: 16px;
  color: #666;
  img {
    max-width: 100%;
  }
}
.discuss-item__time {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1;
  color: #b4b4b4;
}
.discuss-item__files {
  margin-top: 20px;
  display: flex;
}
.discuss-item__comment {
  text-align: right;
  p {
    display: inline-block;
    padding-left: 32px;
    background: url(@/assets/images/icon_comment.png) no-repeat left center;
    background-size: 22px;
    font-size: 16px;
    line-height: 28px;
    color: #9b9b9b;
    cursor: pointer;
  }
}
.discuss-item-form__title {
  font-size: 18px;
  color: #333;
  line-height: 40px;
}
</style>
