<template>
  <div class="">
    <a-table
      :columns="tableColumns"
      :data="taskList"
      :scroll="{
        x: 1400
      }"
      stripe
      :pagination="false"
      :bordered="{
        cell: false,
        headerCell: true,
        wrapper: false
      }"
      :hoverable="false"
    >
      <template #progress="{ record }">
        <a-tooltip :content="`${record.progress}%`">
          <a-progress
            :percent="record.progress / 100"
            :style="{ width: '100%' }"
            :show-text="false"
            size="large"
          />
        </a-tooltip>
      </template>
      <template #status="{ record }">
        <a-tag
          v-for="item in selectedTaskStatus(record.status)"
          :key="item.value"
          :color="item['tag-props'].color"
          >{{ item.label }}</a-tag
        >
      </template>
    </a-table>
    <Page :page="page" @change="pageChangehandle" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TableColumnData } from '@arco-design/web-vue/es/table/interface'
import Page from '@/components/page/index.vue'
import usePage, { IPage } from '@/components/page/index'
import { getCrewTaskList } from '@/api/project/plan-task'
import { CrewTask } from '@/types/plan-task'
import { selectedTaskStatus } from '@/utils'

const { page } = usePage()
const props = defineProps({
  filterForm: {
    type: Object,
    default() {
      return {}
    }
  }
})
const taskList = ref<CrewTask[]>([])
const tableColumns: TableColumnData[] = [
  {
    title: '项目组员',
    dataIndex: 'handler_name',
    width: 150
  },
  {
    title: '任务名称',
    dataIndex: 'name'
  },
  {
    title: '任务进度',
    dataIndex: 'progress',
    slotName: 'progress'
  },
  {
    title: '任务状态',
    dataIndex: 'status',
    slotName: 'status'
  },

  {
    title: '计划开始时间',
    dataIndex: 'begin_at'
  },
  {
    title: '计划结束时间',
    dataIndex: 'end_at'
  },
  {
    title: '计划完成时间',
    dataIndex: 'completed_at'
  }
]
/**
 * 获取筛选框列表
 */
const getFilterForm = () => {
  const { member_id: memberId, prjId, date } = props.filterForm
  const beginFrom = date ? date[0] : date
  const endTo = date ? date[1] : date
  return {
    memberId: memberId === '' ? undefined : memberId,
    prjId: prjId === '' ? undefined : prjId,
    endTo,
    beginFrom
  }
}

// 获取合同列表
const getList = async () => {
  try {
    const { pageIndex, pageSize } = page
    const { memberId, endTo, beginFrom, prjId } = getFilterForm()
    const params = {
      page_no: pageIndex,
      page_size: pageSize,
      begin_from: beginFrom,
      end_to: endTo,
      member_id: memberId,
      prj_id: prjId
    }
    const { list, total } = await getCrewTaskList(params)
    page.total = total
    taskList.value = list
  } catch (e) {
    console.error(e)
  }
}

/**
 * 分页变化事件
 * @param argPage
 */
const pageChangehandle = (argPage: IPage): void => {
  page.pageIndex = argPage.pageIndex
  page.pageSize = argPage.pageSize
  getList().then(() => console.log('获取列表'))
}

/**
 * 根据表单按条件筛选分类项
 */
const filterTask = (): void => {
  getList().then(() => console.log('获取列表'))
}

defineExpose({ filterTask }) // 暴露子组件的方法或者数据
</script>

<script lang="ts">
export default {
  name: 'CrewTaskList'
}
</script>
