<template>
  <div>
    <el-card class="card">
      <div slot="header" class="clearfix">
        <span>用户反馈</span>
      </div>

      <el-table style="margin-top: 20px" v-loading="loading" :data="list">
        <el-table-column type="index" width="80" align="center" label="序号"/>
        <el-table-column align="center"  prop="userId" label="用户昵称"/>
        <el-table-column align="center"  prop="userName" label="用户昵称"/>
        <el-table-column align="center"  prop="userMobile" label="用户手机号"/>
        <el-table-column align="center"  prop="content" label="反馈内容"/>
        <el-table-column align="center"  prop="screenshot_url" label="截图信息">
          <template slot-scope="scope">
            <span v-if="JSON.parse(scope.row.screenshotUrl).length>0" v-for="(item,index) in JSON.parse(scope.row.screenshotUrl)" :key="index" >
              <img class="list-avatar" :src="baseUrl + item">
            </span>
            <span v-if="scope.row.screenshotUrl=='[]'">暂无截图信息</span>
          </template>
        </el-table-column>
        <el-table-column align="center"  prop="createTime" label="创建时间"/>
      </el-table>

      <pagination
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getFeekBackList"
      />

    </el-card>
  </div>
</template>

<script>
import {listFeekBack} from "@/api/feedback/feedBack";

export default {
  data(){
    return {
      baseUrl:process.env.VUE_APP_BASE_API,
      list:[],
      total:0,
      loading:false,
      queryParams:{
        page:1,
        pageSize:10,
      },
    }
  },
  created() {
    this.getFeekBackList()
  },
  methods:{
    getFeekBackList(){
      this.loading = true;
      listFeekBack(this.queryParams).then(res => {
        this.list = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
