<!--
<suggest-table :activeTab="activeTab"></suggest-table>

import suggestTable from '@/components/suggest/suggest-table.vue'
components: {
  suggestTable
}
-->
<template>
  <div class="log-content border-box">
    <div class="table-condition font-0">
      <el-select class="w-180" v-model="issueType" placeholder="所有问题类型" @change="changeType" clearable>
        <el-option v-for="item in typeOptions" :key="item.key" :label="item.value" :value="item.key"> </el-option>
      </el-select>
      <el-select class="w-180 m-l-10" v-model="issueStatus" placeholder="所有状态" @change="changeStatus" clearable>
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.value" :value="item.key"> </el-option>
      </el-select>
      <el-input placeholder="请输入用户昵称/手机号" v-model="searchInput" class="w-264 m-l-10" style="width: 330px;" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearSearch"> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input>
    </div>
    <el-table :data="tableData" class="table-no-line-wrap">
      <el-table-column prop="categoryName" label="用户昵称" show-overflow-tooltip>
        <template slot-scope="scoped">
          {{ scoped.row.nikeName || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="用户手机号" width="110px">
        <template slot-scope="scoped">
          {{ scoped.row.phoneNumber || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="企业" show-overflow-tooltip>
        <template slot-scope="scoped">
          {{ scoped.row.enterpriseName || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="部门/门店" show-overflow-tooltip>
        <template slot-scope="scoped">
          {{ scoped.row.storeName ? '' : scoped.row.groupName }} {{ scoped.row.storeName }} {{ !scoped.row.groupName && !scoped.row.storeName ? '--' : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="问题类型">
        <template slot-scope="scoped">
          <span v-if="scoped.row.issueType == 0">功能异常</span>
          <span v-if="scoped.row.issueType == 1">产品建议</span>
          <span v-if="scoped.row.issueType == 2">安全问题</span>
          <span v-if="scoped.row.issueType == 3">其他问题</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="问题描述" show-overflow-tooltip>
        <template slot-scope="scoped">
          {{ scoped.row.issueDetail || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="状态">
        <template slot-scope="scoped">
          <span v-if="scoped.row.issueStatus == 0" class="status-block status--block-default">未解决</span>
          <span v-if="scoped.row.issueStatus == 1" class="status-block">待解决</span>
          <span v-if="scoped.row.issueStatus == 2" class="status-block status-success">已解决</span>
        </template>
      </el-table-column>
      <el-table-column label="问题截图" width="160px">
        <template slot-scope="scope">
          <el-popover popper-class="notice-img-popover" placement="right" width="400" trigger="hover" v-for="(item, index) in scope.row.issueImageList" :key="index">
            <div class="img-preview flex">
              <img :src="item" alt="" style="max-width: 400px;" />
            </div>
            <img slot="reference" :src="item" alt="" class="task-imgs" style="width: 30px;height: 30px;border-radius: 2px; margin-right: 10px; cursor: pointer;" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="parentCode" label="操作" width="150px">
        <template slot-scope="scoped">
          <el-button @click="toShow(scoped.$index, scoped.row)" type="text">查看详情</el-button>
          <el-button @click="toReply(scoped.$index, scoped.row)" type="text">快速回复</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
        <div class="no-data-wrap">
          <div class="no-data-icon">
            <img src="../../../static/img/no-data_icon.png" alt="" />
          </div>
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <div class="pagination block text-right" v-if="tableData.length != 0">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <reply-dialog :editRow="editRow" :publishShow="publishShow" @hidePublishDialog="hidePublishDialog"> </reply-dialog>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
import replyDialog from '@/components/suggest/reply-dialog.vue';
export default {
  name: 'tableList',
  components: {
    replyDialog
  },
  props: {
    activeTab: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      requestProject: '',
      issueType: '',
      typeOptions: [],
      issueStatus: '',
      statusOptions: [],
      searchInput: '',
      tableData: [
        /* {
          nikeName: '1',
          phoneNumber: 'GXG',
          enterpriseName: 1554356700000,
          storeGroupName: '',
          issueType: '',
          issueDetail: '',
          issueImageList: [],
          issueStatus: ''
        } */
      ],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      publishShow: false,
      editRow: {}
    };
  },
  methods: {
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      let that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    /**
     * 清空
     *
     */
    clearSearch() {
      let that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 类型
     */
    changeType(e) {
      let that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 状态
     */
    changeStatus(e) {
      let that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 查看详情
     */
    toShow(index, row) {
      const that = this;
      that.$router.push(`/suggestDetail?issueId=${row.issueId}&name=${that.$route.query.name}&icon=${that.$route.query.icon}&code=${that.$route.query.code}&tabCode=${that.$route.query.tabCode || that.activeMenuTab}`);
    },
    /**
     * 快速回复
     */
    toReply(index, row) {
      const that = this;
      that.publishShow = true;
      that.editRow = row;
    },
    hidePublishDialog(flag) {
      const that = this;
      if (!flag) {
        that.publishShow = false;
        that.editRow = {};
        return false;
      }
      that.publishShow = false;
      that.editRow = {};
      that.getTableList();
    },
    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getTableList();
    },
    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      // let fullPath = that.$route.fullPath;
      that.getTableList();
    },
    /**
     * 获取类型列表
     */
    getTypeData() {
      const that = this;
      getRequest(`/gic-platform-operation/feedback/list/type`, {})
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.typeOptions = data.result || [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    },
    /**
     * 获取状态列表
     */
    getStatusData() {
      const that = this;
      getRequest(`/gic-platform-operation/feedback/list/status`, {})
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.statusOptions = data.result || [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    },
    /**
     * 获取列表数据
     *
     */
    getTableList() {
      const that = this;
      let para = {
        search: that.searchInput,
        issueType: that.issueType,
        issueStatus: that.issueStatus,
        currentPage: that.currentPage, // 当前页
        pageSize: that.pageSize // 一页显示个数
      };
      getRequest(`/gic-platform-operation/feedback`, para)
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.total = data.totalCount;
            if (data.result.length) {
              data.result.forEach(ele => {
                ele.issueImageList = ele.issueImageList ? ele.issueImageList : [];
              });
            }
            that.tableData = !!data.result ? data.result : [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    }
  },
  watch: {
    activeTab(newDate) {
      let that = this;
      that.searchInput = '';
      if (!newDate) {
        return false;
      }
      that.getTableList();
    }
  },
  mounted() {
    let that = this;
    if (that.activeTab != '') {
      that.getTableList();
      that.getStatusData();
      that.getTypeData();
    }
  }
};
</script>
<style lang="less" scoped>
.w-180 {
  width: 180px;
}
.log-content {
  padding: 20px;
  .table-condition {
    margin-bottom: 20px;
  }
}
</style>
