<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <el-card shadow="hover">
        <div>
          <div class="user-info">
            <div class="info-left">
              <el-avatar size="small" :src="question.userPhotograph || defaultAvatar" />
              <span>{{ question.userName || '-' }}</span>
            </div>
            <span class="time">发布于：{{ question.problemTime || '-' }}</span>
          </div>
          <div class="question">
            <div class="question-title">标题：{{ question.problemTitle || '-' }}</div>
            <div class="question-content">
              {{ question.problem || '-' }}
            </div>
          </div>
          <div v-if="type == 'reply'" style="margin-top: 20px">
            <el-input v-model="reply" type="textarea" :rows="5" placeholder="请输入解答内容" resize="none"></el-input>
          </div>
          <div class="reply" v-else>
            <div class="reply-content">
              <div class="user-info">
                <div class="info-left">
                  <el-avatar size="small" :src="question.replyPhotograph || defaultAvatar" />
                  <span>{{ question.replyName || '-' }}</span>
                </div>
                <span class="time">{{ question.replyTime || '-' }}</span>
              </div>
              <div class="question">
                {{ question.reply || '-' }}
              </div>
            </div>
          </div>
          <div style="text-align: right; margin-top: 20px">
            <el-button @click="goBack">返回</el-button>
            <el-button type="primary" v-show="type == 'reply'" @click="Reply">确定</el-button>
          </div>
        </div>
      </el-card>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { getQuestionInfo, replyQuestion } from '@/api/question';
const defaultAvatar = new URL('@/assets/images/avatar.png', import.meta.url).href;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const id = computed(() => proxy?.$route.query.id);
const type = computed(() => proxy?.$route.query.type);

const question = ref({});
const getQusestion = async () => {
  const res = await getQuestionInfo(id.value);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  question.value = res.data;
};
const reply = ref('');
const Reply = () => {
  if (!reply.value) {
    ElNotification({
      title: '提示',
      message: '请输入解答',
      type: 'error'
    });
    return;
  }
  ElMessageBox.confirm('确定提交吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const params = {
        id: id.value,
        reply: reply.value
      };
      let res = await replyQuestion(params);
      if (res.code != 200) {
        ElNotification({
          title: '提示',
          message: res.msg,
          type: 'error'
        });
        return;
      }
      ElNotification({
        title: '提示',
        message: '解答成功',
        type: 'success'
      });
      proxy.$router.push({
        path: `/questionDetail`,
        query: {
          id: id.value,
          type: 'view'
        }
      });
    })
    .catch(() => {});
};
const goBack = () => {
  proxy?.$tab.closePage(proxy?.$route).then(() => {
    proxy?.$router.push('/backStage/question');
  });
};
onActivated(() => {
  getQusestion();
});
onMounted(() => {
  getQusestion();
});
</script>

<style scoped lang="scss">
.p-2 {
  height: calc(100vh - 84px);
  font-size: 14px;
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .time {
      color: #999;
    }
  }
  .question {
    padding: 10px 0 0;
    .question-title {
      font-size: 16px;
    }
    .question-content {
      text-indent: 2em;
      margin-top: 10px;
    }
  }
  .reply {
    padding-left: 50px;
    margin-top: 20px;
    .reply-content {
      padding: 16px;
      background-color: #f1f1f1;
      border-radius: 4px;
    }
  }
}
</style>
