<script setup lang="ts">
import dayjs from 'dayjs'
import { rangeShortcuts } from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import XjDailyStatistics from './components/XjDailyStatistics.vue'
import XjNonProductionEfficiency from './components/XjNonProductionEfficiency.vue'

defineOptions({
  name: 'IotRyXjDailyReportSummary'
})

const deptId = useUserStore().getUser.deptId

interface Query {
  pageNo: number
  pageSize: number
  deptId: number
  contractName?: string
  taskName?: string
  createTime: string[]
  projectClassification: 2
}

const id = deptId

const createDefaultQuery = (): Query => ({
  pageNo: 1,
  pageSize: 10,
  deptId: deptId,
  contractName: '',
  taskName: '',
  createTime: [
    ...rangeShortcuts[1].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))
  ],
  projectClassification: 2
})

const query = ref<Query>(createDefaultQuery())
const activeTab = ref<'日报统计' | '非生产时效'>('日报统计')
const deptName = ref('瑞鹰国际修井')
const refreshKey = ref(0)

const handleDeptNodeClick = (node: any) => {
  deptName.value = node.name
  handleQuery()
}

const handleQuery = () => {
  query.value.pageNo = 1
  refreshKey.value += 1
}

const resetQuery = () => {
  query.value = createDefaultQuery()
  deptName.value = '瑞鹰国际修井'
  handleQuery()
}
</script>

<template>
  <div
    class="grid grid-cols-[auto_1fr] grid-rows-[48px_44px_1fr] gap-3 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
    <DeptTreeSelect
      :deptId="id"
      :top-id="158"
      v-model="query.deptId"
      @node-click="handleDeptNodeClick"
      class="row-span-3" />
    <el-form
      size="small"
      class="summary-query-form bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 flex items-center justify-between">
      <div class="flex items-center gap-5 min-w-0">
        <el-form-item label="项目">
          <el-input
            v-model="query.contractName"
            placeholder="请输入项目"
            clearable
            @keyup.enter="handleQuery()"
            class="!w-220px" />
        </el-form-item>
        <el-form-item label="任务">
          <el-input
            v-model="query.taskName"
            placeholder="请输入任务"
            clearable
            @keyup.enter="handleQuery()"
            class="!w-220px" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="query.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="rangeShortcuts"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-260px" />
        </el-form-item>
      </div>
      <el-form-item class="summary-query-actions">
        <el-button size="small" type="primary" @click="handleQuery()">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button size="small" @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-button-group class="justify-self-start self-center">
      <el-button
        size="default"
        :type="activeTab === '日报统计' ? 'primary' : 'default'"
        @click="activeTab = '日报统计'">
        日报统计
      </el-button>
      <el-button
        size="default"
        :type="activeTab === '非生产时效' ? 'primary' : 'default'"
        @click="activeTab = '非生产时效'">
        非生产时效
      </el-button>
    </el-button-group>

    <XjDailyStatistics
      v-if="activeTab === '日报统计'"
      :query="query"
      :dept-name="deptName"
      :refresh-key="refreshKey" />
    <XjNonProductionEfficiency
      v-else
      :query="query"
      :dept-name="deptName"
      :refresh-key="refreshKey" />
  </div>
</template>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}

.summary-query-form {
  min-height: 48px;

  :deep(.el-form-item__label) {
    height: 28px;
    line-height: 28px;
  }
}

.summary-query-actions {
  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
    gap: 8px;
  }

  :deep(.el-button + .el-button) {
    margin-left: 0;
  }
}
</style>
