<template>
  <div>
    <Breadcrumb :items="['项目中心', '组员任务']" :title="'组员任务'">
    </Breadcrumb>
    <div class="container">
      <a-space direction="vertical" :size="16" fill>
        <a-row :gutter="20" align="stretch">
          <a-col :span="24">
            <a-card class="general-card" style="min-height: 80vh">
              <template #title>
                <a-row>
                  <a-col :flex="1">
                    <a-form
                      ref="filterFormRef"
                      :model="filterForm"
                      :label-col-props="{ span: 6 }"
                      :wrapper-col-props="{ span: 18 }"
                      label-align="left"
                      auto-label-width
                    >
                      <a-row :gutter="[16, 16]">
                        <a-col :xxl="5" :xl="5" :lg="24" :md="24" :sm="24">
                          <a-form-item field="member_id" label="项目组员">
                            <a-select
                              v-model="filterForm.member_id"
                              allow-clear
                              allow-search
                              placeholder="选择项目组员"
                              @change="filterTask()"
                            >
                              <a-option
                                v-for="{ id, name } in crewList"
                                :key="id"
                                :value="id"
                                :label="name"
                              ></a-option>
                            </a-select>
                          </a-form-item>
                        </a-col>
                        <!-- <a-col :xxl="5" :xl="5" :lg="24" :md="24" :sm="24">
                          <a-form-item field="prjId" label="所属项目">
                            <a-select
                              v-model="filterForm.prjId"
                              allow-clear
                              allow-search
                              placeholder="选择项目信息"
                            >
                              <a-option
                                v-for="{ id, name } in prjList"
                                :key="id"
                                :value="id"
                                :label="name"
                              ></a-option>
                            </a-select>
                          </a-form-item>
                        </a-col> -->
                        <a-col :xxl="6" :xl="5" :lg="24" :md="24" :sm="24">
                          <a-form-item field="keyword" label="任务时间">
                            <a-range-picker
                              v-model="filterForm.date"
                              style="width: 100%"
                              format="YYYY-MM-DD"
                              @change="filterTask()"
                            />
                          </a-form-item>
                        </a-col>
                        <a-col flex="auto">
                          <a-button type="primary" @click="resetFilter()">
                            重置
                          </a-button>
                        </a-col>
                      </a-row>
                    </a-form>
                  </a-col>
                </a-row>
              </template>

              <a-divider style="margin-top: 0" />
              <List ref="taskListRef" :filter-form="filterForm"></List>
            </a-card>
          </a-col>
        </a-row>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import { getProjectList } from '@/api/project/info'
import { getStaffList } from '@/api/base/staff'
import { getCrewList } from '@/api/project/plan-task'
import List from './components/List.vue'

/**
 * 条件筛选表单
 */
const filterForm = reactive<{
  member_id?: string
  date?: string[]
  prjId?: string
}>({
  member_id: undefined,
  prjId: undefined,
  date: []
})

const crewList = ref<{ id: string; name: string }[]>([])
const prjList = ref<{ id: string; name: string }[]>([])
const taskListRef = ref<any>(null)
const filterFormRef = ref<FormInstance>()

const filterTask = () => {
  taskListRef.value?.filterTask()
}

const resetFilter = (): void => {
  filterFormRef.value?.resetFields()
  filterTask()
}

/**
 * 获取项目列表
 */
const getProjects = async () => {
  try {
    const { list } = await getProjectList({ page_no: 1, page_size: 9999 })
    prjList.value = list
  } catch (e) {
    console.error(e)
  }
}

/**
 * 获取项目列表
 */
const getAccounts = async () => {
  try {
    const { list } = await getCrewList()
    crewList.value = list
  } catch (e) {
    console.error(e)
  }
}

onMounted(() => {
  filterTask()
  getAccounts()
  getProjects().then(() => console.log('获取列表'))
})
</script>

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

<style scoped lang="less">
.container {
  padding: 20px 20px 20px 20px;
  .general-card {
    :deep(.arco-card-header) {
      padding: 20px 20px 0 20px;
    }
  }
}
.dtree {
  padding: 0 10px;
  // max-height: 350px;
  :deep(.arco-tree-node-selected) {
    background-color: rgb(var(--gray-2));
  }
  :deep(.arco-tree-node:hover) {
    background-color: rgb(var(--gray-2));
  }
  :deep(.arco-tree-node-title:hover) {
    background-color: transparent;
  }
}

:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
</style>
