<template>
  <a-skeleton v-if="loading" :paragraph="{ rows: 5 }" />
  <a-card v-else>
    <a-table
      :row-key="(record, index) => index + Math.random()"
      size="middle"
      :columns="showColumns"
      :data-source="dataSource"
      :pagination="false"
    >
      <sd-user-item
        slot="operator"
        slot-scope="text, record"
        :users="[{ code: record.operatorAccount, name: record.operator }]"
      ></sd-user-item>
      <span slot="finishDate" slot-scope="finishDate">{{
        finishDate | sdDateFormat('YYYY-MM-DD HH:mm:ss')
      }}</span>
    </a-table>
  </a-card>
</template>

<script>
import components from './_import-components/sd-invalid-log-import'
const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '70px',
  },
  {
    title: '作废人',
    dataIndex: 'operator',
    scopedSlots: { customRender: 'operator' },
    width: '130px',
  },
  {
    title: '作废原因',
    dataIndex: 'remark',
  },
  {
    title: '作废时间',
    dataIndex: 'finishDate',
    sorter: (a, b) => a.finishDate - b.finishDate,
    scopedSlots: { customRender: 'finishDate' },
    width: '190px',
  },
]
export default {
  name: 'SdInvalidLog',
  metaInfo: {
    title: 'SdInvalidLog',
  },
  components,
  inject: {
    webflow: { default: () => {} },
  },
  data() {
    return {
      loading: true,
    }
  },
  computed: {
    showColumns() {
      return columns
    },
    dataSource() {
      return this.webflow.invalidInfo
    },
  },
  mounted() {
    this.webflow.getLog('process').then(() => {
      this.loading = false
    })
  },
}
</script>

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