<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="clearfix" slot="header">
        <el-form :inline="true" :model="queryParams" size="small">
          <el-form-item label="许愿树">
            <el-select v-model="queryParams.tree_id" placeholder="请选择许愿树" clearable @change="handleTreeChange">
              <el-option v-for="item in treeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="节点">
            <el-select v-model="queryParams.node_id" placeholder="请选择节点" clearable>
              <el-option v-for="item in nodeList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable>
              <el-option label="显示" :value="1" />
              <el-option label="隐藏" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="node_title" label="所属节点" width="120" />
        <el-table-column label="头像" width="80" align="center">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.user_avatar" :size="40" />
          </template>
        </el-table-column>
        <el-table-column prop="user_nickname" label="昵称" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.is_anonymous === 1 ? '匿名用户' : scope.row.user_nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="留言内容" min-width="250" show-overflow-tooltip />
        <el-table-column label="图片" width="100" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.images && scope.row.images.length" type="text" @click="handleViewImages(scope.row)">查看({{ scope.row.images.length }})</el-button>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="匿名" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_anonymous === 1" type="warning" size="small">是</el-tag>
            <el-tag v-else type="info" size="small">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="留言时间" width="160" align="center" />
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" size="small" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top: 20px; text-align: right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </el-card>

    <el-dialog title="留言详情" :visible.sync="detailVisible" width="600px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户昵称">{{ detailData.is_anonymous === 1 ? '匿名用户' : detailData.user_nickname }}</el-descriptions-item>
        <el-descriptions-item label="是否匿名">{{ detailData.is_anonymous === 1 ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="所属节点">{{ detailData.node_title }}</el-descriptions-item>
        <el-descriptions-item label="留言时间">{{ detailData.create_time }}</el-descriptions-item>
        <el-descriptions-item label="留言内容" :span="2">{{ detailData.content }}</el-descriptions-item>
      </el-descriptions>
      <div v-if="detailData.images && detailData.images.length" style="margin-top: 20px">
        <div style="margin-bottom: 10px; font-weight: bold">图片：</div>
        <el-image v-for="(img, index) in detailData.images" :key="index" :src="img" :preview-src-list="detailData.images" style="width: 100px; height: 100px; margin-right: 10px" fit="cover" />
      </div>
    </el-dialog>

    <el-dialog title="图片预览" :visible.sync="imageVisible" width="800px">
      <div style="text-align: center">
        <el-image v-for="(img, index) in previewImages" :key="index" :src="img" :preview-src-list="previewImages" style="width: 150px; height: 150px; margin: 10px" fit="cover" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { wishTreeListApi, wishTreeInfoApi, wishTreeMessageListApi, wishTreeMessageDeleteApi, wishTreeMessageStatusApi } from '@/api/wishTree';

export default {
  name: 'WishTreeMessage',
  data() {
    return {
      loading: false,
      treeList: [],
      nodeList: [],
      tableData: [],
      total: 0,
      queryParams: { page: 1, limit: 10, tree_id: '', node_id: '', nickname: '', status: '' },
      detailVisible: false,
      detailData: {},
      imageVisible: false,
      previewImages: [],
    };
  },
  created() {
    this.getTreeList();
    this.getList();
  },
  methods: {
    async getTreeList() {
      try {
        const res = await wishTreeListApi({ page: 1, limit: 1000 });
        this.treeList = res.list || [];
      } catch (error) {
        console.error(error);
      }
    },
    async getNodeList(treeId) {
      try {
        const res = await wishTreeInfoApi(treeId);
        this.nodeList = res.nodes || [];
      } catch (error) {
        console.error(error);
      }
    },
    async getList() {
      this.loading = true;
      try {
        const res = await wishTreeMessageListApi(this.queryParams);
        this.tableData = (res.list || []).map(item => ({
          ...item,
          images: item.images ? (typeof item.images === 'string' ? JSON.parse(item.images) : item.images) : [],
        }));
        this.total = res.total || 0;
      } catch (error) {
        console.error(error);
      }
      this.loading = false;
    },
    handleTreeChange(val) {
      this.queryParams.node_id = '';
      this.nodeList = [];
      if (val) {
        this.getNodeList(val);
      }
    },
    handleSearch() {
      this.queryParams.page = 1;
      this.getList();
    },
    handleReset() {
      this.queryParams = { page: 1, limit: 10, tree_id: '', node_id: '', nickname: '', status: '' };
      this.nodeList = [];
      this.getList();
    },
    handleView(row) {
      this.detailData = row;
      this.detailVisible = true;
    },
    handleViewImages(row) {
      this.previewImages = row.images;
      this.imageVisible = true;
    },
    handleDelete(row) {
      this.$confirm('确定要删除该留言吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await wishTreeMessageDeleteApi(row.id);
          this.$message.success('删除成功');
          this.getList();
        } catch (error) {
          console.error(error);
        }
      });
    },
    async handleStatusChange(row) {
      try {
        await wishTreeMessageStatusApi(row.id);
        this.$message.success('状态修改成功');
      } catch (error) {
        row.status = row.status === 1 ? 0 : 1;
        console.error(error);
      }
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.divBox { padding: 20px; }
</style>
