<template>
  <div class="template_content">
    <!-- 搜索 -->
    <div class="search_box">
      <a-form layout="inline">
        <a-form-item label="">
          <a-input
            v-model="searchPage.condition"
            placeholder="请输入用户昵称或手机号码"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="handlSearch"
            >查询</a-button
          >
        </a-form-item>
      </a-form>
    </div>

    <!-- 表格内容 -->
    <div class="content_box">
      <a-table
        :columns="columns"
        :dataSource="data"
        :loading="loading"
        :pagination="pagination"
        bordered
        size="small"
        @change="handleTableChange"
        rowKey="id"
      >
        <!-- 状态 -->
        <div slot="status" slot-scope="text, record">
          <span>{{
            statusList.filter((e) => e.key == record.status)[0].label
          }}</span>
        </div>

        <!-- 操作 -->
        <template slot="action" slot-scope="text, record">
          <span v-if="record.status != 'COMPLETE'">
            <a-button type="link" @click="changeStatus(record)"
              >结束</a-button
            ></span
          >

          <a-button icon="edit" type="link" @click="navigateDetailPage(record)"
            >查看</a-button
          >
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { fetchList, modifyStatus } from "@/api/biz/qa";
import { disposereq } from "@/utils/util";

let columns = [
  {
    title: "编号",
    dataIndex: "id",
    align: "center",
  },
  {
    title: "用户昵称",
    dataIndex: "nickName",
    align: "center",
    customRender: (text) => {
      return text ? text : "-";
    },
  },
  {
    title: "课程名称",
    dataIndex: "courseName",
    align: "center",
  },
  {
    title: "问题内容",
    dataIndex: "content",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    align: "center",
    scopedSlots: { customRender: "status" },
    width: 100,
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 180,
  },
];
export default {
  data() {
    return {
      columns: columns,
      data: [],
      searchPage: {
        pageIndex: 1,
        pageSize: 10,
        condition: "",
      },
      pagination: {
        showQuickJumper: true,
        showSizeChanger: true,
      },
      loading: false,
      statusList: [
        {
          key: "WAIT_REPLY",
          label: "待回复",
        },
        {
          key: "REPLY",
          label: "已回复",
        },
        {
          key: "COMPLETE",
          label: "已完成",
        },
      ],
    };
  },
  // 创建完毕
  created() {
    this.getList(this.searchPage);
  },
  // 即将更新渲染
  beforeUpdate() {},
  methods: {
    getList(query) {
      this.loading = true;
      fetchList(query)
        .then((res) => {
          if (res.code == 200) {
            this.data = res.data;
            let paper = { ...this.pagination };
            paper.current = query.pageIndex;
            paper.total = res.count;
            this.pagination = paper;
          } else {
            this.$message.info(res.resp_msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          disposereq(this, err);
        });
    },
    handlSearch() {
      let queryParam = { ...this.searchPage };
      this.getList(queryParam);
    },
    handleTableChange(pagination) {
      let queryParam = { ...this.searchPage };
       const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageIndex = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;

      queryParam.pageIndex = pagination.current;
      queryParam.pageSize = pagination.pageSize;
      this.getList(queryParam);
    },
    navigateDetailPage(row) {
      this.$router.push({
        path: "/edu/biz/qa/detail",
        query: { id: row.id, status: row.status },
      });
    },
    changeStatus(row) {
      console.log(row.id);
      let modifyStatusObj = {};
      modifyStatusObj.questionId = row.id;
      modifyStatus(modifyStatusObj)
        .then((res) => {
          if (res.resp_code == 200) {
            this.$message.info("修改状态成功");
            this.getList(this.searchPage);
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch((err) => {
          disposereq(this, err);
        });
    },
  },
};
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
</style>