<template>
  <div class="template_content">
    <!-- 表格内容 -->
    <div class="content_box">
      <a-table
        :columns="columns"
        :dataSource="data"
        :loading="loading"
        :pagination="pagination"
        bordered
        size="small"
        @change="handleTableChange"
        rowKey="id"
      >
      </a-table>
      <a-form-model :label-col="{ span: 4 }">
        <div class="btn-div">
          <a-button
            type="primary"
            v-if="status != 'COMPLETE'"
            @click="showModal('')"
          >
            回复 </a-button
          >&nbsp;
          <a-button class="cancel-btn" @click="onCancel">返回</a-button>
        </div>
      </a-form-model>
    </div>

    <!-- Modal窗口 -->
    <template>
      <a-modal
        :visible="modalVisible"
        :title="modalTitle"
        @ok="onConfirm"
        @cancel="onCancel2"
      >
        <a-form-model
          :model="formModel"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
          :rules="formRules"
          ref="formModelRef"
        >
          <a-form-model-item label="回复内容" prop="content" disabled>
            <a-textarea row="2" v-model="formModel.content" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </template>
  </div>
</template>

<script>
import { answerObj, fetchAnswerList } from "@/api/biz/qa";
import { disposereq, timestampToTime } from "@/utils/util";

let columns = [
  {
    title: "用户",
    dataIndex: "nickName",
    align: "center",
  },
  {
    title: "时间",
    dataIndex: "createTime",
    align: "center",
    customRender: (text) => {
      return text ? timestampToTime(text) : "-";
    },
    width: 180,
  },
  {
    title: "内容",
    dataIndex: "content",
    align: "center",
  },
];

export default {
  data() {
    return {
      columns: columns,
      data: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      status: this.$route.query.status,
      modalVisible: false,
      modalTitle: "回复",
      loading: false,
      formModel: {
        questionId: this.$route.query.id,
        content: "",
      },
      formRules: {
        content: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 创建完毕
  created() {
      this.getAnswerList(this.pagination);
  },
  // 即将更新渲染
  beforeUpdate() {},
  methods: {
    getAnswerList(query) {
      this.loading = true;
    let questionId = this.$route.query.id;
      query.questionId = questionId;
      fetchAnswerList(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);
        });
    },
    answer() {
      let data = { ...this.formModel };
      answerObj(data)
        .then((res) => {
          if (res.resp_code == 200) {
            this.$message.info("回复成功");
            this.getAnswerList(this.pagination);
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch((err) => {
          disposereq(this, err);
        });
    },
    showModal() {
      this.modalVisible = true;
    },
    onConfirm() {
      this.$refs.formModelRef.validate((valid) => {
        if (valid) {
          this.answer();
          this.closeModal();
        } else {
          return false;
        }
      });
    },
    onCancel2() {
      this.closeModal();
    },
    closeModal() {
      this.modalVisible = false;
      this.$refs.formModelRef.resetFields();
    },

    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageIndex = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
      this.getAnswerList(this.pagination);
    },
    navigateIndexPage(row) {
      let queryParam = {
        pageIndex: 1,
        pageSize: 10,
      };
      this.$router.push({ path: "/edu/biz/qa/index", queryParam });
    },
    onCancel() {
      this.$router.push("/edu/biz/qa/index");
    },
  },
};
</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;
}
.btn-div {
  text-align: center;
}
</style>