<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-input
        v-model="searchParams.search_name"
        placeholder="代理名称"
        class="filter-item filter-input"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="filter-item"
        @click="searchParams.page_index = 1;getList()"
      >
        搜索
      </el-button>
    </div>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="id"
        label="Id"
        align="center"
        width="60"
      />
      <el-table-column
        prop="user"
        label="反馈代理"
        width="250"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.user.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="反馈时间"
        width="250"
        align="center"
      />
      <el-table-column
        prop="contents"
        label="反馈问题"
      >
        <template
          slot-scope="{ row }"
        >
          <p style="text-align:left; margin: 0;line-height:30px;">
            <span>{{ row.contents.length > 40 ? `${row.contents.slice(0,40)}` : row.contents }}</span>
            <el-button
              v-if="row.contents.length > 40"
              type="text"
              @click="handleSeeInfo(row)"
            >
              ...查看详情
            </el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <!-- 公告详情 -->
    <el-drawer
      :title="`销售(${questionInfo.user.nickname})反馈`"
      :visible.sync="visible.question"
      direction="rtl"
    >
      <div class="app-container">
        <el-form label-width="80px">
          <el-form-item label="反馈内容:">{{ questionInfo.contents }}</el-form-item>
          <el-form-item label="反馈时间:">{{ questionInfo.created_at }}</el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// api
import {
  getList
} from '@/api/team/question'
export default {
  data() {
    return {
      searchParams: {
        search_name: '',
        page_index: 1,
        page_size: 20
      },
      table: [],
      tableTotal: 0,
      visible: {
        question: false
      },
      questionInfo: {
        user: {
          nickname: ''
        },
        contents: '',
        created_at: ''
      },
      loadingFull: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取问题反馈
    async getList() {
      this.loadingFull = true
      try {
        const res = await getList(this.searchParams)
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.tableTotal = total
          this.table = list
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取销售问题反馈失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getList()
    },
    // 查看反馈详情
    handleSeeInfo(row) {
      this.questionInfo = row
      this.visible.question = true
    }
  }
}
</script>
