<template>
  <div>
    <Breadcrumb :items="['我的工作', '全部工作']" :title="'全部工作'">
    </Breadcrumb>
    <div class="container">
      <a-space direction="vertical" :size="16" fill>
        <div class="space-unit">
          <DataOverview />
        </div>
        <a-row :gutter="20" align="stretch">
          <a-col :span="24">
            <a-card class="general-card" style="min-height: 70vh">
              <template #title>
                <a-form
                  ref="filterFormRef"
                  :model="filterForm"
                  :label-col-props="{ span: 6 }"
                  :wrapper-col-props="{ span: 18 }"
                  label-align="right"
                  auto-label-width
                >
                  <a-row :gutter="[16, 16]">
                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item field="name" label="工作名称" row-class="mb0"
                        ><a-input-search
                          v-model="filterForm.name"
                          placeholder="根据工作名称模糊匹配"
                          allow-clear
                          @search="filterWork()"
                          @clear="filterWork()"
                          @keyup.enter="filterWork()"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item
                        field="prjId"
                        label="所属项目"
                        row-class="mb0"
                      >
                        <a-select
                          v-model="filterForm.prjId"
                          placeholder="全部"
                          :allow-search="true"
                          :allow-clear="true"
                          @change="filterWork()"
                        >
                          <a-option
                            v-for="{ id, name } in projectList"
                            :key="id"
                            :value="id"
                            :label="name"
                          ></a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col
                      v-if="expandForm"
                      :xxl="6"
                      :xl="8"
                      :lg="12"
                      :md="12"
                      :sm="24"
                    >
                      <a-form-item
                        field="type"
                        label="工作类型"
                        row-class="mb0"
                      >
                        <a-select
                          v-model="filterForm.type"
                          placeholder="全部"
                          :allow-search="true"
                          :allow-clear="true"
                          @change="filterWork()"
                        >
                          <a-option
                            v-for="{ label, value } in typeList"
                            :key="value"
                            :value="value"
                            :label="label"
                          ></a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col
                      v-if="expandForm"
                      :xxl="6"
                      :xl="8"
                      :lg="12"
                      :md="12"
                      :sm="24"
                    >
                      <a-form-item
                        field="handlerId"
                        label="时间范围"
                        row-class="mb0"
                      >
                        <a-range-picker
                          v-model="filterForm.date"
                          style="width: 100%"
                          format="YYYY-MM-DD"
                          @change="filterWork()"
                        />
                      </a-form-item>
                    </a-col>

                    <a-col :xxl="12" :xl="24" :lg="12">
                      <a-form-item hide-label>
                        <a-space>
                          <a-button type="primary" @click="resetFilter()">
                            重置
                          </a-button>
                          <a-typography-text
                            type="primary"
                            style="cursor: pointer; font-size: 14px"
                            @click="expandForm = !expandForm"
                          >
                            {{ expandForm ? '收起' : '更多' }}
                            <icon-up v-if="expandForm" />
                            <icon-down v-else />
                          </a-typography-text>
                        </a-space>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
              <a-divider style="margin-top: 0" />
              <List
                ref="workListRef"
                :table-columns="tableColumns"
                :filter-form="filterForm"
                :status-list="statusList"
                :type-list="typeList"
                :status="3"
              ></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 { TableColumnData } from '@arco-design/web-vue'
import DataOverview from './components/statistics.vue'
import List from '../components/List.vue'

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

const expandForm = ref(false)
const workListRef = ref<any>(null)
const statusList: {
  label: string
  value: number
  color: string
  subLable?: string
}[] = [
  {
    label: '未完成',
    subLable: '未阅',
    value: 0,
    color: 'gray'
  },
  {
    label: '已过期',
    value: 1,
    color: 'gray'
  },
  {
    label: '已完成',
    subLable: '已阅',
    value: 2,
    color: 'green'
  }
]
const typeList: { label: string; value: number; font: string }[] = [
  {
    label: '待办',
    value: 1,
    font: 'my-to-be-done'
  },
  {
    label: '待阅',
    value: 2,
    font: 'my-to-be-read'
  }
]
const tableColumns: TableColumnData[] = [
  {
    title: '创建时间',
    dataIndex: 'started_at',
    width: 220,
    ellipsis: true,
    slotName: 'date'
  },
  {
    title: '工作名称',
    dataIndex: 'name',
    width: 300,
    tooltip: true,
    ellipsis: true
  },
  // {
  //   title: '处理类型',
  //   dataIndex: 'process_type',
  //   width: 200,
  //   slotName: 'type'
  // },
  {
    title: '工作状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 200
  },
  {
    title: '所属项目',
    dataIndex: 'prj_name',
    slotName: 'prj_name',
    width: 250,
    tooltip: true,
    ellipsis: true
  },
  {
    title: '工作负责人',
    dataIndex: 'leader_name',
    tooltip: true,
    ellipsis: true
    // align: 'center'
  },

  {
    title: '完成时间',
    dataIndex: 'completed_at',
    tooltip: true,
    ellipsis: true
    // align: 'center'
  },
  {
    title: '过期时间',
    dataIndex: 'due_at',
    width: 250,
    tooltip: true,
    ellipsis: true
    // align: 'center'
  },

  {
    title: '操作',
    slotName: 'operate',
    width: 150,
    // align: 'left',
    fixed: 'right'
  }
]
const projectList = ref<{ id: string; name: string }[]>([])
const filterFormRef = ref<FormInstance>()

const filterWork = () => {
  workListRef.value?.filterWork()
}

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

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

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

<script lang="ts">
export default {
  name: 'IncompletedWork'
}
</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>
