<script>
import FlowService from '@/webflow/flow-service'
import { Table } from 'ant-design-vue'
import moment from 'moment'

const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '发送人',
    dataIndex: 'senderName',
  },
  {
    title: '所在流程环节',
    dataIndex: 'stepName',
  },
  {
    title: '时间',
    dataIndex: 'sendDate',
    customRender: (text, recode) => {
      return moment(text).format('YYYY-MM-DD HH:mm:ss')
    },
  },

  {
    title: '沟通信息',
    dataIndex: 'sendContext',
  },
]
const innerColumns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '接收人',
    dataIndex: 'receiverName',
  },
  {
    title: '反馈时间',
    dataIndex: 'feedbackDate',
    customRender: (text, recode) => {
      if (text) return moment(text).format('YYYY-MM-DD HH:mm:ss')
      else return ''
    },
  },
  {
    title: '反馈信息',
    dataIndex: 'feedbackContext',
    scopedSlots: { customRender: 'feedbackContext' },
  },
  {
    title: '状态',
    dataIndex: 'feedbackStatusName',
  },
]

export default {
  name: 'SdFeedbackInfo',
  inject: {
    webflow: { default: () => {} },
  },
  data() {
    return {
      columns,
      innerColumns,
      FeedBackData: [],
    }
  },
  created() {
    FlowService.getConnectData(this.webflow.FlowData.instId).then((res) => {
      if (res.status === 200) {
        this.FeedBackData = res.data
      }
    })
  },
  methods: {
    creatTable(h, data) {
      let columnsToShow = []
      let isSend = true
      if (data && data.length > 0 && data[0].execType !== 1) {
        columnsToShow = this.innerColumns
        isSend = false
      } else {
        columnsToShow = this.columns
      }
      return h(Table, {
        class: {
          'feedback-is-send': isSend,
        },
        attrs: {
          indentSize: 15,
          dataSource: data,
          pagination: false,
          rowKey: (record, index) => index,
          customRow: (record) => {
            return {
              class: {
                'feedback-hide-expanded': record.childrens.length === 0,
              },
            }
          },
        },
        props: {
          columns: columnsToShow,
          tableLayout: 'fixed',
        },
        on: this.$listeners,
        scopedSlots: {
          expandedRowRender: (record, index, indent, expanded) => {
            if (record.childrens && record.childrens.length > 0) {
              return this.creatTable(h, record.childrens)
            } else {
              return this.creatTable(h, [])
            }
          },
        },
      })
    },
  },
  render(h, context) {
    return this.creatTable(h, this.FeedBackData)
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
:global(.feedback-is-send) {
  background-color: $body-background;
}
:global(.feedback-hide-expanded) {
  :global(.ant-table-row-expand-icon-cell) {
    visibility: hidden;
  }
}
</style>
