<script setup lang="ts">
import type { SuggestionType } from '../types'
import SuggestionsForm from './SuggestionsForm.vue'
import { getSuggestionList } from '../api'

const dialogVisible = ref<boolean>(false)

const dataset = reactive<{ total: number; list: SuggestionType[] }>({ total: 0, list: [] })
const params = reactive({ limit: 100, status: '' })
function fetchList() {
  getSuggestionList(params).then(res => {
    const { total = 0, data = [] } = res.data
    dataset.total = total
    dataset.list = data
  })
}

watchEffect(() => {
  fetchList()
})

function handleUpdate() {
  dialogVisible.value = false
  fetchList()
}
</script>

<template>
  <div>
    <el-button
      round
      type="warning"
      @click="dialogVisible = true"
      style="width: 80px; margin-bottom: 20px; background-color: #d38846"
      >创建</el-button
    >
  </div>
  <el-tabs v-model="params.status">
    <el-tab-pane label="全部" name=""> </el-tab-pane>
    <el-tab-pane label="待处理" name="1" lazy></el-tab-pane>
    <el-tab-pane label="已处理" name="2" lazy></el-tab-pane>
  </el-tabs>
  <el-collapse v-if="dataset.list.length" style="border-top: 0">
    <el-collapse-item v-for="item in dataset.list" :name="item.id" :key="item.id">
      <template #title>
        <el-button type="primary" size="small" plain round style="margin-right: 10px" v-if="item.status === 1"
          >待处理</el-button
        >
        <el-button color="#E8E8E8" size="small" round style="margin-right: 10px" v-if="item.status === 2"
          >已处理</el-button
        >
        <h2 class="suggestion-title">{{ item.title }}</h2>
      </template>
      <div class="suggestion-main">
        <div class="suggestion-content" v-html="item.content"></div>
        <a :href="file.url" target="_blank" class="suggestion-file" v-for="file in item.files" :key="file.url">
          {{ file.name }}
        </a>
        <p class="t1">发布于：{{ item.created_time }}</p>
        <template v-if="item.status === 2">
          <h2 class="suggestion-title">问题回复</h2>
          <div class="suggestion-content" v-html="item.reply"></div>
        </template>
      </div>
    </el-collapse-item>
  </el-collapse>
  <SuggestionsForm v-model="dialogVisible" @update="handleUpdate"></SuggestionsForm>
</template>

<style lang="scss" scoped>
.suggestion-main {
  margin-left: 70px;
  .t1 {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #999999;
  }
  .suggestion-title {
    margin-top: 28px;
  }
}
.suggestion-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  color: #333333;
}
.suggestion-content {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #666666;
  :deep(img) {
    max-width: 100%;
  }
}
.suggestion-file {
  display: inline-block;
  margin-top: 10px;
  color: blue;
}
</style>
