<template>
  <div class="user-list">
    <!-- 头部 -->
    <div class="head">
      <div>意见反馈</div>
    </div>
    <!-- 主体 -->
    <div class="app-container calendar-list-container">
      <!-- 数据列表 -->
      <el-table
        :data="list"
        v-loading.body="listLoading"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="用户ID" width="120">
          <template slot-scope="scope">
            {{ scope.row.userId }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="姓名"
          prop="name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="电话"
          prop="phone"
        ></el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.crtTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="回复内容">
          <template slot-scope="scope">
            {{ scope.row.responseInfo }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.responseInfo"
              type="text"
              class="el-button el-button--text el-button--small"
              @click="handleDeal(scope.row)"
              >回复</el-button
            >
          </template>
        </el-table-column>
        <!--        <el-table-column align="center" label="状态">-->
        <!--          <template slot-scope="scope">-->
        <!--            &lt;!&ndash; 根据状态获取对应中文 &ndash;&gt;-->
        <!--            {{ getStatus(scope.row.status) }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!--  回复  -->
    <deal-dialog
      v-if="dealVisible"
      :one-row="oneRow"
      v-on:dealEvent="dealEvent"
    ></deal-dialog>
  </div>
</template>
<script type="javascript">
import dealDialog from "./dealDialog";
import { feedbackInfoList } from "api/userManagement/index";
import { timestamp2Date } from "@/utils/dateUtils";
export default {
  name: "userManagement",
  components: {
    dealDialog,
  },
  computed: {
    getStatus(status) {
      return (status) => {
        let a = "";
        switch (status) {
          case 0:
            a = "启用";
            break;
          case 1:
            a = "禁用";
            break;
          default:
            a = "未知";
            break;
        }
        return a;
      };
    },
  },
  data() {
    return {
      times: [],
      listLoading: false,
      list: [], // 用户列表
      total: 0, // 总条数
      listQuery: {
        page: 1,
        limit: 20,
        type: 2, //1、联系客服，2、意见反馈，3、订单反馈
      },
      oneRow: {}, // 当前操作项
      dealVisible: false, // 回复弹窗
      invoiceDialogVisible: false, // 查看发票弹窗
      addressDialogVisible: false, // 查看地址弹窗
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 搜索
     */
    handleSearch() {
      this.listQuery.page = 1;
      this.getList(); // 获取用户列表
    },
    /**
     * 查看发票-返回界面
     */
    invoiceEvent() {
      this.invoiceDialogVisible = false;
    },
    /**
     * 查看地址-返回界面
     */
    addressEvent() {
      this.addressDialogVisible = false;
    },
    /**
     * 启用、禁用
     */
    changeStatus(row) {
      this.$confirm("是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 0、启用，1、禁用
          updateStatus({
            id: row.userId,
            status: row.status == 1 ? 0 : 1,
          }).then((response) => {
            if (response.status == 200) {
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
                duration: 2000,
              });
              this.getList();
            } else {
              this.$notify({
                title: "失败",
                message: response.message,
                type: "error",
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 查看发票
     */
    handleInvoice() {
      this.invoiceDialogVisible = true;
    },
    /**
     * 查看地址
     */
    handleAddress() {
      this.addressDialogVisible = true;
    },
    /**
     * 回复
     */
    handleDeal(row) {
      this.oneRow = row;
      this.dealVisible = true;
    },
    /**
     * 回复-返回
     */
    dealEvent(e) {
      this.dealVisible = false;
      if (e) {
        this.getList();
      }
    },
    /**
     * 清除搜索
     */
    handleCleanSearch() {
      this.listQuery = {
        page: 1,
        limit: 20,
        mobile: undefined, // 手机号
        realName: undefined, // 真实姓名
        userId: undefined, // 用户id
        status: undefined, // 0：启用  1：禁用
        registrationTimeBegin: undefined, // 开始时间
        registrationTimeEnd: undefined, // 结束时间
      };
      this.times = [];
      this.getList(); // 获取用户列表
    },
    /**
     * 获取用户列表
     */
    getList() {
      this.listLoading = true;
      feedbackInfoList(this.listQuery).then((response) => {
        if (response.status == 200) {
          response.data.data.map(function (item) {
            item.crtTimeStr = timestamp2Date(item.createTime);
          });
          this.list = response.data.data;
          this.total = response.data.totalCount;
          this.listLoading = false;
        } else {
          this.listLoading = false;
          this.$notify({
            title: "失败",
            message: response.message,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.user-list {
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    height: 57px;
  }
}
</style>
