<template>
  <el-card shadow="never">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
        <div class="right">
          <el-button type="primary" @click="goCreate">新建任务</el-button>
        </div>
      </div>
    </template>

    <el-form :inline="true" @submit.prevent>
      <el-form-item label="关键词">
        <el-input v-model="query.kws" clearable placeholder="请输入任务关键字" @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" multiple collapse-tags collapse-tags-tooltip clearable style="width: 180px">
          <el-option label="未开始" value="1" />
          <el-option label="进行中" value="2" />
          <el-option label="已完成" value="3" />
          <el-option label="已逾期" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="query.range"
          type="daterange"
          value-format="YYYY-MM-DD"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 260px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="active" @tab-change="onTabChange">
      <el-tab-pane label="我的任务" name="list" />
      <el-tab-pane label="成员任务" name="member" />
      <el-tab-pane label="@我的任务" name="at-list" />
      <el-tab-pane label="任务看板" name="table" />
    </el-tabs>

    <el-table v-loading="loading" :data="rows" border stripe>
      <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :min-width="col.minWidth || 120" />
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="goDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pager">
      <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        @size-change="load"
        @current-change="load"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { taskListAtMine, taskListByTable, taskListMineGantt, taskListSubordinateGantt } from '@/api/otr/task/core'

const props = defineProps<{ title: string; scene: 'list' | 'member' | 'at-list' | 'table' }>()
const router = useRouter()
const route = useRoute()

const active = ref(props.scene)
const loading = ref(false)
const total = ref(0)
const rows = ref<any[]>([])
const query = reactive({
  page: 1,
  pageSize: 10,
  kws: '',
  status: [] as string[],
  range: [] as string[],
})

const columns = computed(() => {
  if (active.value === 'member') {
    return [
      { prop: 'memberName', label: '成员' },
      { prop: 'name', label: '任务名称', minWidth: 220 },
      { prop: 'deadline', label: '截止时间', minWidth: 160 },
      { prop: 'statusLabel', label: '状态' },
    ]
  }
  if (active.value === 'at-list') {
    return [
      { prop: 'name', label: '任务名称', minWidth: 220 },
      { prop: 'fromName', label: '@我人' },
      { prop: 'createdAt', label: '时间', minWidth: 160 },
      { prop: 'statusLabel', label: '状态' },
    ]
  }
  if (active.value === 'table') {
    return [
      { prop: 'name', label: '任务名称', minWidth: 220 },
      { prop: 'ownerName', label: '负责人' },
      { prop: 'progress', label: '进度' },
      { prop: 'statusLabel', label: '状态' },
    ]
  }
  return [
    { prop: 'name', label: '任务名称', minWidth: 220 },
    { prop: 'ownerName', label: '负责人' },
    { prop: 'priority', label: '优先级' },
    { prop: 'deadline', label: '截止时间', minWidth: 160 },
    { prop: 'statusLabel', label: '状态' },
  ]
})

function buildParams() {
  return {
    page: query.page,
    psize: query.pageSize,
    kws: query.kws,
    sta: query.status,
    start: query.range?.[0] || '',
    end: query.range?.[1] || '',
  }
}

async function load() {
  loading.value = true
  try {
    const params = buildParams()
    let res: any
    if (active.value === 'member') res = await taskListSubordinateGantt(params)
    else if (active.value === 'at-list') res = await taskListAtMine(params)
    else if (active.value === 'table') res = await taskListByTable(params)
    else res = await taskListMineGantt(params)
    const rt = res?.result ?? {}
    rows.value = rt.records ?? rt.list ?? []
    total.value = Number(rt.total ?? rows.value.length)
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  query.page = 1
  load()
}

function reset() {
  query.page = 1
  query.pageSize = 10
  query.kws = ''
  query.status = []
  query.range = []
  load()
}

function goCreate() {
  router.push('/otr/task/form')
}

function goDetail(row: any) {
  router.push({ path: '/otr/task/detail', query: { id: String(row.taskDateId ?? row.id ?? '') } })
}

function onTabChange(name: string | number) {
  const tab = String(name)
  router.push(`/otr/task/${tab}`)
}

onMounted(() => {
  if (route.path.includes('/otr/task/member')) active.value = 'member'
  if (route.path.includes('/otr/task/at-list')) active.value = 'at-list'
  if (route.path.includes('/otr/task/table')) active.value = 'table'
  load()
})
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pager {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>
