<template>
  <div>
    <Breadcrumb :items="['营销中心', '商机管理']" :title="'商机管理'">
    </Breadcrumb>
    <div class="container">
      <a-space direction="vertical" :size="16" fill>
        <div class="space-unit">
          <Statistics />
        </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
                        />
                      </a-form-item>
                    </a-col>

                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item
                        field="typeId"
                        label="项目类型"
                        row-class="mb0"
                      >
                        <a-select
                          v-model="filterForm.typeId"
                          placeholder="全部"
                          :allow-clear="true"
                        >
                          <a-option
                            v-for="{ id, full_name } in []"
                            :key="id"
                            :value="id"
                            :label="full_name"
                          ></a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item
                        field="leaderId"
                        label="项目负责人"
                        row-class="mb0"
                      >
                        <a-select
                          v-model="filterForm.leaderId"
                          placeholder="全部"
                          :allow-search="true"
                          :allow-clear="true"
                        >
                          <a-option
                            v-for="{ id, name } in []"
                            :key="id"
                            :value="id"
                            :label="name"
                          ></a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item
                        field="regionId"
                        label="所在地区"
                        row-class="mb0"
                      >
                        <a-cascader
                          v-model="filterForm.regionId"
                          style="width: 100%"
                          :options="[]"
                          :field-names="{
                            value: 'id',
                            label: 'name'
                          }"
                          :allow-search="false"
                          :allow-clear="true"
                          placeholder="全部"
                          check-strictly
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item
                        field="customer"
                        label="客户名称"
                        row-class="mb0"
                      >
                        <a-input-search
                          v-model="filterForm.customer"
                          placeholder="根据客户名称模糊匹配"
                          allow-clear
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24">
                      <a-form-item
                        field="phase"
                        label="项目阶段"
                        row-class="mb0"
                      >
                        <a-select
                          v-model="filterForm.phase"
                          placeholder="全部"
                          :allow-search="true"
                          :allow-clear="true"
                        >
                          <a-option
                            v-for="{ id, name } in []"
                            :key="id"
                            :value="id"
                            :label="name"
                          ></a-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :xxl="12" :xl="24" :lg="12">
                      <a-form-item
                        hide-label
                        :row-class="expandForm ? 'mb0' : ''"
                      >
                        <a-space>
                          <a-button type="outline">
                            <template #icon>
                              <icon-plus />
                            </template>
                            创建项目
                          </a-button>
                          <a-button type="primary"> 重置 </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-col v-if="expandForm" :span="24">
                      <a-form-item
                        field="phase"
                        label="启动时间"
                        row-class="mb0"
                      >
                        <a-row style="width: 100%" :gutter="[16, 16]">
                          <a-col flex="505px">
                            <a-form-item no-style row-class="mb0">
                              <a-button-group size="large" shape="round">
                                <a-button
                                  v-for="item in filterDateList"
                                  :key="item.key"
                                  :type="changeStartAtBtnType(item.key)"
                                  @click="changeStartAt(item.key, item.value)"
                                >
                                  {{ item.title }}
                                </a-button>
                              </a-button-group>
                            </a-form-item>
                          </a-col>
                          <a-col flex="auto">
                            <a-form-item no-style row-class="mb0">
                              <a-range-picker
                                v-model="filterForm.startAt"
                                show-time
                                format="YYYY-MM-DD HH:mm:ss"
                              />
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-form-item>
                    </a-col>
                    <a-col v-if="expandForm" :span="24">
                      <a-form-item field="phase" label="预计时间">
                        <a-row style="width: 100%" :gutter="[16, 16]">
                          <a-col flex="505px">
                            <a-form-item no-style>
                              <a-button-group size="large" shape="round">
                                <a-button
                                  v-for="item in filterDateList"
                                  :key="item.key"
                                  :type="changeDeliverAtBtnType(item.key)"
                                  @click="changeDeliverAt(item.key, item.value)"
                                >
                                  {{ item.title }}
                                </a-button>
                              </a-button-group>
                            </a-form-item>
                          </a-col>
                          <a-col flex="auto">
                            <a-form-item no-style>
                              <a-range-picker
                                v-model="filterForm.deliverAt"
                                show-time
                                format="YYYY-MM-DD HH:mm:ss"
                              />
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </template>
              <a-divider style="margin-top: 0" />
            </a-card>
          </a-col>
        </a-row>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { format, startOfDay, subDays, subYears, subMonths } from 'date-fns'
import { filterDateList } from '@/enums/api'
import Statistics from './components/statistics.vue'
/**
 * 条件筛选表单
 */
const filterForm = reactive<{
  name?: string
  typeId?: string
  leaderId?: string
  regionId?: number
  customer?: string
  phase?: string
  startAt?: string[]
  deliverAt?: string[]
}>({
  name: undefined,
  typeId: undefined,
  leaderId: undefined,
  regionId: undefined,
  customer: undefined,
  phase: undefined,
  startAt: undefined,
  deliverAt: undefined
})

const startAtRadioValue = ref('no-limit')
const deliverAtRadioValue = ref('no-limit')
const expandForm = ref(false)
const changeStartAtBtnType = (value: string) => {
  return startAtRadioValue.value === value ? 'outline' : undefined
}

const changeDeliverAtBtnType = (value: string) => {
  return deliverAtRadioValue.value === value ? 'outline' : undefined
}

/**
 * 设置时间范围快捷方式
 * @param type 0 今天，1 昨天，2 本周， 3，本月  4，上月
 */
const getDateRange = (type: number) => {
  let date: string[] | undefined = []
  switch (type) {
    case 1:
      date = [
        format(subDays(new Date(), 6), 'yyyy-MM-dd 00:00:00'),
        format(startOfDay(new Date()), 'yyyy-MM-dd 23:59:59')
      ]
      break
    case 2:
      date = [
        format(subMonths(new Date(), 1), 'yyyy-MM-dd 00:00:00'),
        format(startOfDay(new Date()), 'yyyy-MM-dd 23:59:59')
      ]
      break
    case 3:
      date = [
        format(subMonths(new Date(), 3), 'yyyy-MM-dd 00:00:00'),
        format(startOfDay(new Date()), 'yyyy-MM-dd 23:59:59')
      ]
      break
    case 4:
      date = [
        format(subMonths(new Date(), 6), 'yyyy-MM-dd 00:00:00'),
        format(startOfDay(new Date()), 'yyyy-MM-dd 23:59:59')
      ]
      break
    case 5:
      date = [
        format(subYears(new Date(), 1), 'yyyy-MM-dd 00:00:00'),
        format(startOfDay(new Date()), 'yyyy-MM-dd 23:59:59')
      ]
      break
    case 0:
    default:
      date = undefined
      break
  }
  return date
}

const changeStartAt = (value: string, type: number) => {
  startAtRadioValue.value = value
  filterForm.startAt = getDateRange(type)
}

const changeDeliverAt = (value: string, type: number) => {
  deliverAtRadioValue.value = value
  filterForm.deliverAt = getDateRange(type)
}
</script>

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