<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"
      :class="$style.loginfo"
    >
      <sd-user-item
        slot="senterName"
        slot-scope="text, record"
        :users="[{ code: record.senterAccount, name: record.senterName }]"
      ></sd-user-item>
      <sd-user-item
        slot="name"
        slot-scope="text, record"
        :users="[{ code: record.account, name: record.name }]"
      ></sd-user-item>
      <span slot="sentDate" slot-scope="sentDate">{{
        sentDate | sdDateFormat('YYYY-MM-DD HH:mm:ss')
      }}</span>
    </a-table>
  </a-card>
</template>

<script>
import components from './_import-components/sd-reminder-log-import'

// 催办记录
const remindercolumns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    class: 'reminder-col-no',
  },
  {
    title: '发送人',
    dataIndex: 'senterName',
    scopedSlots: { customRender: 'senterName' },
    class: 'reminder-col-senter',
  },
  {
    title: '时间',
    dataIndex: 'sentDate',
    scopedSlots: { customRender: 'sentDate' },
    sorter: (a, b) => a.sentDate - b.sentDate,
    class: 'reminder-col-date',
  },
  {
    title: '被催办人',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    class: 'reminder-col-name',
  },
  {
    title: '催办内容',
    dataIndex: 'content',
  },
]

export default {
  name: 'SdReminderLog',
  components,
  inject: {
    webflow: { default: () => {} },
  },
  data() {
    return {
      loading: true,
    }
  },
  computed: {
    showColumns() {
      return remindercolumns
    },
    dataSource() {
      return this.webflow.reminderInfo
    },
  },
  mounted() {
    this.webflow.getLog('reminder').then(() => {
      this.loading = false
    })
  },

  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@use '@/common/components/sd-web-print.scss' as print;
@include print.wrapper {
  .loginfo {
    :global(.reminder-col-no) {
      width: 60px;
    }
    :global(.reminder-col-senter) {
      width: 100px;
    }
    :global(.reminder-col-date) {
      width: 106px;
    }
    :global(.reminder-col-name) {
      width: 100px;
    }
  }
}
.loginfo {
  :global(.ant-list-split .ant-list-item) {
    border-bottom: none;
  }
  :global(.ant-table-tbody) {
    td:last-child {
      max-width: 400px;
    }
  }
  :global(.reminder-col-no) {
    width: 80px;
  }
  :global(.reminder-col-senter) {
    width: 130px;
  }
  :global(.reminder-col-date) {
    width: 190px;
  }
  :global(.reminder-col-name) {
    width: 130px;
  }
  .actionicon {
    margin-right: 10px;
  }
  .actionspan {
    min-width: 50px;
  }
  :global(.ant-table-row-cell-break-word) {
    span {
      white-space: pre-wrap;
    }
  }
}
</style>
