<template>
  <a-card>
    <sd-data-table
      data-url="api/xcoa-mobile/v1/kmknowledge/knowledge_borrowlist"
      :columns="columns"
      :row-key="'borroeDate'"
      :search-fields="['title']"
    >
      <a slot="bt" slot-scope="text, record" :title="text" @click="click(record)">{{ text }} </a>
      <template slot="name" slot-scope="text">
        <span v-if="text === null">永久</span>
        <sapn v-else>{{ text | sdDateFormat('YYYY-MM-DD') }}</sapn>
      </template>
    </sd-data-table>
  </a-card>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import components from './_import-components/km-my-borrow-import'
const columns = [
  {
    title: '序号',
    width: '100px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '标题',
    dataIndex: 'title',
    sdClickable: true,
    width: '260px',
    align: 'center',
    scopedSlots: { customRender: 'bt' },
  },
  {
    title: '版本号',
    dataIndex: 'versionNum',
    width: '100px',
    align: 'center',
  },
  {
    title: '所属分类',
    dataIndex: 'category',
    align: 'center',
  },
  {
    title: '借阅日期',
    dataIndex: 'borroeDate',
    align: 'center',
    sorter: (a, b) => a.borroeDate - b.borroeDate,
    sdRender: TableColumnTypes.date, // 特殊处理的数据类型，时间戳会自动调用sdDateFormat处理
  },
  {
    title: '归还日期',
    align: 'center',
    dataIndex: 'returnDate',
    sdRender: TableColumnTypes.date, // 特殊处理的数据类型，时间戳会自动调用sdDateFormat处理
    sorter: (a, b) => a.returnDate - b.returnDate,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'flowState',
  },
]
export default {
  name: 'KmMyBorrow',
  metaInfo: {
    title: '借阅记录',
  },
  components,
  data() {
    return {
      columns,
    }
  },
  methods: {
    click(record) {
      window.open(`#/km-knowledage-view?id=${record.id}&title=${record.title}`, '_blank')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
