<template>
  <a-table
    row-key="id"
    :columns="getColumns(listType)"
    :data-source="tasks"
    :loading="loading"
    :pagination="false"
    :show-header="false"
    :class="$style.atable"
    size="middle"
  >
    <a slot="bt" slot-scope="text, record" :title="text" @click="click(record)">
      {{ text }}
    </a>
    <span :slot="getColumns(listType)[1].dataIndex" slot-scope="text">
      {{ text | sdDateFormat('YYYY-MM-DD') }}
    </span>
  </a-table>
</template>

<script>
import Vue from 'vue'
import { Table } from 'ant-design-vue'
import TodoListService from './todo-list-service'
Vue.use(Table)
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    scopedSlots: { customRender: 'bt' },
  },
  {
    title: '创建时间',
    dataIndex: 'sentDate',
    scopedSlots: { customRender: 'sentDate' },
    width: '200px',
  },
]

export default {
  name: 'SdTodoListSimple',
  metaInfo: {
    title: '任务',
  },
  props: {
    listType: {
      default: 'todo',
      type: String,
    },
  },
  data() {
    return {
      tasks: [],
      columns,
      loading: true,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    click(record) {
      TodoListService.openTaskItem(record, this.listType).then((refreshFlag) => {
        if (refreshFlag) this.init()
      })
    },
    getColumns(listType) {
      if (listType === 'application') {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            ellipsis: true,
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '创建时间',
            dataIndex: 'startDate',
            scopedSlots: { customRender: 'startDate' },
            width: '200px',
          },
        ]
      } else {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            ellipsis: true,
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '创建时间',
            dataIndex: 'sentDate',
            scopedSlots: { customRender: 'sentDate' },
            width: '200px',
            ellipsis: true,
          },
        ]
      }
    },
    init() {
      this.fetch({ current: 1, pageSize: 5, listType: this.listType })
    },
    fetch({ current, pageSize, listType }) {
      this.loading = true
      let extParams = {}
      if (listType === 'application') {
        // 我的申请
        extParams = {
          expressions: [{ dataType: 'str', name: 'stepsn', op: 'ne', stringValue: '1' }],
          orderBy: 'startDate desc',
        }
      } else if (listType === 'attention') {
        // 我的关注
        extParams = { orderBy: 'instLastRunDate desc' }
      }
      TodoListService.getList(Object.assign({ current, pageSize, listType }, extParams)).then(
        (data) => {
          this.tasks = data.datas
          this.loading = false
        }
      )
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.atable {
  :global(.ant-table-row-cell-ellipsis) {
    a {
      margin-top: 0;
      margin-bottom: 0.5em;
      font-weight: 500;
      color: $heading-color;
    }
  }
}
</style>
