<template>
  <a-skeleton v-if="loading" :paragraph="{ rows: 5 }" />
  <a-card v-else>
    <sd-log-filter
      v-if="filterUser"
      v-model="userFilter"
      type="checkbox"
      :options="userOptions"
      v-bind="$attrs"
    />
    <a-table
      :row-key="(record, index) => index"
      size="middle"
      :columns="columns"
      :data-source="dataView"
      :pagination="false"
      :class="$style.loginfo"
    >
      <span slot="informSenderName" slot-scope="text, record"
        ><sd-user-item
          :users="[{ code: record.informSenderAccount, name: record.informSenderName }]"
        ></sd-user-item
      ></span>
      <span slot="sentTime" slot-scope="sentTime">{{
        sentTime | sdDateFormat('YYYY-MM-DD HH:mm:ss')
      }}</span>
      <template slot="signContent" slot-scope="text, record">
        {{ record.signContent }}
        <sd-attachment
          v-if="record.content.attrs"
          :group-id="record.content.attrs.attachment"
          :read-only="true"
        ></sd-attachment>
      </template>
      <template slot="expandedRowRender" slot-scope="record">
        <a-table
          :row-key="(record, index) => index"
          size="middle"
          :columns="innerColumns"
          :data-source="record.receiveRead"
          :pagination="false"
        >
          <span slot="name" slot-scope="text, record2"
            ><sd-user-item :users="[{ code: record2.account, name: record2.name }]"></sd-user-item
          ></span>
          <template slot="opinionData" slot-scope="text, readrecord">
            {{ readrecord.opinionData }}
            <sd-attachment
              v-if="readrecord.content && readrecord.content.attrs"
              :group-id="readrecord.content.attrs.attachment"
              :read-only="true"
            ></sd-attachment>
          </template>
        </a-table>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import components from './_import-components/sd-inform-log-import'

const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '70px',
  },
  {
    title: '发送人',
    dataIndex: 'informSenderName',
    scopedSlots: { customRender: 'informSenderName' },
    width: '130px',
  },
  {
    title: '时间',
    dataIndex: 'sentTime',
    scopedSlots: { customRender: 'sentTime' },
    sorter: (a, b) => a.sentTime - b.sentTime,
    width: '190px',
  },
  {
    title: '知会信息',
    dataIndex: 'signContent',
    scopedSlots: { customRender: 'signContent' },
  },
]

export default {
  name: 'SdInformLog',
  components,
  inject: {
    webflow: { default: () => {} },
  },
  mixins: [storeMixin],
  props: {
    filterUser: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columns: columns,
      innerColumns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
          width: '70px',
        },
        {
          title: '接收人',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          width: '130px',
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: '190px',
        },
        {
          title: '反馈信息',
          dataIndex: 'opinionData',
          scopedSlots: { customRender: 'opinionData' },
        },
      ],
      loading: true,
      userFilter: [],
    }
  },
  computed: {
    dataSource() {
      return this.webflow.FlowData.informLogInfo || []
    },
    dataView() {
      // 按人员过滤
      if (this.userFilter.length > 0) {
        return this.dataSource.filter((item) => {
          return (
            this.userFilter.includes(item.informSenderAccount) ||
            item.receiveRead.filter((rec) => this.userFilter.includes(rec.account)).length > 0
          )
        })
      }
      return this.dataSource
    },
    userOptions() {
      return [{ label: '与我相关的', value: this.userInfo.account }]
    },
  },
  mounted() {
    this.webflow.getLog('inform').then(() => {
      this.loading = false
    })
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.loginfo {
  :global(.ant-list-split .ant-list-item) {
    border-bottom: none;
  }
}
</style>
