<template>
  <div>
    <div class="head">
      <a-icon type="arrow-left" class="a-icon" @click="$router.back()"/>
      <span class="title">对话记录详情</span>
    </div>
    <div>
      <a-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        bordered
      >
      </a-table>
    </div>
  </div>
</template>

<script>
import {addDataset, deleteDataset, getChatRecord, getChatRecordByChatId, listPage} from "../../api";
import moment from "moment";
import {filterObj, formatDate, formatDateTime} from "../../utils";

export default {
  data() {
    return {
      loading: false,
      dataSource: [],
      // 表头
      columns: [
        {
          title: '用户',
          align: "center",
          dataIndex: 'problem_text',
          ellipsis: true,
          customRender: (text) => (
            <a-tooltip placement="topLeft" title={text}>
              <span>{text}</span>
            </a-tooltip>
          )
        },
        {
          title: '回复',
          align: "center",
          dataIndex: 'answer_text',
          ellipsis: true,
          customRender: (text) => (
            <a-tooltip placement="topLeft" title={text}>
              <span>{text}</span>
            </a-tooltip>
          )
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'create_time',
          customRender: (text, record) => {
            return formatDateTime(text, 'yyyy-MM-dd HH:mm:ss')
          }
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'update_time',
          customRender: (text, record) => {
            return formatDateTime(text, 'yyyy-MM-dd HH:mm:ss')
          }
        }
      ],
      chatId: ''
    }
  },
  created() {
    this.chatId = this.$route.query && (this.$route.query.chat_id)
    if (this.chatId) {
      this.loadData()
    }
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        const result = await getChatRecordByChatId({chatId: this.chatId})
        if (result.code === 200) {
          this.dataSource = result.data
        } else {
          this.$message.warning(result.message)
        }
      } catch (e) {
        throw e
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table {
  background: #fff;

  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 10px;
  }
}

.title {
  text-align: left;
  font-size: 18px;
  color: #000;
  margin-bottom: 16px;
  position: relative;
  padding-left: 14px;

}

.head {
  text-align: left;
  margin-bottom: 16px;

  .mr10 {
    margin-right: 10px;
  }
}

</style>
