<template>
  <a-table
    row-key="id"
    :columns="columns"
    :data-source="tasks"
    :loading="loading"
    :pagination="pagination"
    :show-header="false"
    :class="$style.list"
    @change="handleTableChange"
  >
    <a
      slot="bt"
      slot-scope="text, record"
      :class="$style.title"
      :href="`#/sd-webflow/${makePath(record)}`"
      target="_blank"
    >
      <h3>{{ text }}<a-tag color="volcano">顶</a-tag><a-tag color="volcano">急</a-tag></h3>
      <div>
        <span>{{ record.processName }}</span>
        <span>{{ record.senderName }}</span>
        <span>{{ record.sentDate | sdDateFormat }}</span>
      </div>
    </a>
    <span slot="sentDate" slot-scope="text">
      {{ text | sdDateFormat }}
    </span>
    <div slot="action" :class="$style.action">
      <span class="action">•••</span>
      <a-button-group>
        <a-button type="primary"> 关注 </a-button>
        <a-button type="primary"> 沟通 </a-button>
      </a-button-group>
    </div>
  </a-table>
</template>

<script>
import Vue from 'vue'
import { Table } from 'ant-design-vue'
import components from './_import-components/sd-mytodo-list-import'
import TodoListService from './todo-list-service'

Vue.use(Table)

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    scopedSlots: { customRender: 'bt' },
  },
  {
    title: '环节名',
    dataIndex: 'currentStep',
    width: '150px',
  },
  {
    title: '发送时间',
    dataIndex: 'sentDate',
    scopedSlots: { customRender: 'sentDate' },
    width: '200px',
  },
  {
    title: 'Action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: '200px',
  },
]

export default {
  name: 'SdMytodoList',
  components,
  data() {
    return {
      tasks: [],
      columns,
      loading: true,
      pagination: {
        listType: '',
        current: 1,
        pageSize: 5,
        showQuickJumper: true,
        showTotal(total) {
          return `总共 ${total} 条`
        },
      },
    }
  },
  mounted() {
    this.pagination.listType = this.listType
    this.handleTableChange(this.pagination)
  },
  methods: {
    makePath(task) {
      return TodoListService.makePath(task, this.listType)
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.fetch(pagination)
    },
    fetch({ current, pageSize, listType }) {
      this.loading = true
      TodoListService.getList({ current, pageSize, listType }).then((data) => {
        this.pagination.total = data.total
        this.tasks = data.datas
        this.loading = false
        const newInfo = { ...this.pagination }
        newInfo.total = data.total
        this.pagination = newInfo
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.list table tr {
  td {
    padding: 10px 16px;
    :global(.ant-btn-group) {
      display: none;
    }
    :global(.action) {
      // display: initial;
    }
    .title {
      div {
        display: flex;
        justify-content: space-between;
        width: 100%;
        span {
          width: 20%;
        }
        span:first-child,
        span:last-child {
          width: 40%;
        }
      }
    }
    .action {
      text-align: center;
    }
  }
  td:hover {
    :global(.ant-btn-group) {
      // display: initial;
    }
    :global(.action) {
      display: none;
    }
  }
}
</style>
