<script setup lang="ts">
import { useTableComponents } from '@/components/ZmTable/useTableComponents'
import { IotProjectTaskScheduleApi } from '@/api/pms/iotprojecttaskschedule'
import { IotProjectTaskApi, IotProjectTaskVO } from '@/api/pms/iotprojecttask'
import * as DeptApi from '@/api/system/dept'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import dayjs from 'dayjs'

defineOptions({ name: 'IotProjectTask' })

type ProjectTaskRow = IotProjectTaskVO & {
  manufactureName?: string
  contractName?: string
  contractCode?: string
  deptNames?: string
  statusLabel?: string
  createTime?: string
}

interface QueryParams extends PageParam {
  companyId?: number
  projectId?: number
  manufactureName?: string
  contractName?: string
  contractCode?: string
  wellName?: string
  wellType?: string
  location?: string
  technique?: string
  workloadDesign?: string
  createTime?: string[]
  userName?: string
  userId?: number
  platformFlag?: string
  remark?: string
  deptName?: string
}

interface PlanRow {
  id?: number
  status: string
  startTime: string
  endTime: string
  showEndTime: boolean
  [key: string]: any
}

interface PlanExtColumn {
  name: string
  identifier: string
  dataType?: string
  required?: number
  unit?: string
  defaultValue?: string | number | null
  sort?: number
}

const message = useMessage()
const { t } = useI18n()
const { push } = useRouter()
const { ZmTable, ZmTableColumn } = useTableComponents<ProjectTaskRow>()

const COMPLETED_STATUS = 'wg'
const REPORT_DEPT_ID = 163

const initQuery: QueryParams = {
  pageNo: 1,
  pageSize: 10,
  companyId: undefined,
  projectId: undefined,
  manufactureName: '',
  contractName: undefined,
  contractCode: undefined,
  wellName: undefined,
  wellType: undefined,
  location: undefined,
  technique: undefined,
  workloadDesign: undefined,
  createTime: [],
  userName: undefined,
  userId: undefined,
  platformFlag: '',
  remark: undefined,
  deptName: undefined
}

const queryParams = reactive<QueryParams>({ ...initQuery })
const queryFormRef = ref()
const loading = ref(false)
const exportLoading = ref(false)
const list = ref<ProjectTaskRow[]>([])
const total = ref(0)
const companyDeptList = ref<any[]>([])

const planDialogVisible = ref(false)
const planList = ref<PlanRow[]>([])
const saveLoading = ref(false)
const currentRow = ref<ProjectTaskRow | null>(null)
const workProgressDictOptions = ref<any[]>([])
const generateReportDialogVisible = ref(false)
const generateReportLoading = ref(false)
const generateReportRow = ref<ProjectTaskRow | null>(null)
const reportDate = ref('')

const getWorkProgressDictOptions = () => {
  workProgressDictOptions.value = getStrDictOptions(DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE)
}

const timestampToDateTime = (timestamp: number | string | null | undefined): string => {
  if (timestamp === null || timestamp === undefined || timestamp === '') return ''

  let value = typeof timestamp === 'string' ? Number.parseInt(timestamp, 10) : timestamp
  if (Number.isNaN(value)) return ''
  if (value < 1000000000000) value *= 1000

  return dayjs(value).format('YYYY-MM-DD HH:mm')
}

const currentTableColumns = ref<PlanExtColumn[]>([])

const normalizeWorkloadColumns = (res: any): PlanExtColumn[] => {
  const columns = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
  return columns
    .filter((item: PlanExtColumn) => item?.identifier)
    .sort((a: PlanExtColumn, b: PlanExtColumn) => (a?.sort ?? 0) - (b?.sort ?? 0))
}

const isRequiredColumn = (column: PlanExtColumn) => Number(column.required) === 1

const isEmptyValue = (value: unknown) =>
  value === undefined || value === null || (typeof value === 'string' && value.trim() === '')

const getPlanDynamicValues = (row: PlanRow) =>
  currentTableColumns.value.reduce<Record<string, any>>((values, column) => {
    values[column.identifier] = row[column.identifier] ?? ''
    return values
  }, {})

const createPlanRow = (plan?: any): PlanRow => {
  const row: PlanRow = {
    id: plan?.id,
    status: plan?.status || '',
    startTime: timestampToDateTime(plan?.startTime),
    endTime: timestampToDateTime(plan?.endTime),
    showEndTime: plan?.status !== COMPLETED_STATUS
  }

  currentTableColumns.value.forEach((column) => {
    row[column.identifier] = plan?.[column.identifier] ?? column.defaultValue ?? ''
  })

  return row
}

const openPlanDialog = async (row: ProjectTaskRow) => {
  currentRow.value = row
  planList.value = []
  currentTableColumns.value = []

  try {
    const res = await IotProjectTaskScheduleApi.getWorkload(row.id)
    currentTableColumns.value = normalizeWorkloadColumns(res)
  } catch {
    message.error('获取部门数据失败')
  }

  try {
    getWorkProgressDictOptions()
    const taskSchedules = await IotProjectTaskScheduleApi.getIotProjectTaskSchedules({
      taskId: row.id
    })

    if (taskSchedules?.length) {
      planList.value = taskSchedules.map((plan: any) => createPlanRow(plan))
    }

    planDialogVisible.value = true
  } catch {
    message.error('获取计划数据失败')
  }
}

const rowShowEndTime = (row: PlanRow) => row.showEndTime

const onStatusChange = (row: PlanRow) => {
  if (row.status === COMPLETED_STATUS) {
    row.showEndTime = false
    row.endTime = ''
    return
  }

  row.showEndTime = true
}

const addNewRow = () => {
  planList.value.push(createPlanRow())
}

const removeRow = (index: number) => {
  planList.value.splice(index, 1)
}

const savePlan = async () => {
  try {
    saveLoading.value = true

    for (let index = 0; index < planList.value.length; index++) {
      const row = planList.value[index]

      if (!row.startTime) {
        message.error(`第${index + 1}行请选择开始时间`)
        return
      }

      const emptyRequiredColumn = currentTableColumns.value.find(
        (column) => isRequiredColumn(column) && isEmptyValue(row[column.identifier])
      )
      if (emptyRequiredColumn) {
        message.error(`第${index + 1}行请填写${emptyRequiredColumn.name}`)
        return
      }
    }

    const submitData = planList.value.map((item) => ({
      id: item.id,
      taskId: currentRow.value?.id,
      status: item.status,
      startTime: item.startTime ? new Date(item.startTime).getTime() : null,
      endTime:
        item.status !== COMPLETED_STATUS && item.endTime ? new Date(item.endTime).getTime() : null,
      ...getPlanDynamicValues(item)
    }))

    await IotProjectTaskScheduleApi.saveTaskSchedule(submitData)
    message.success('保存成功')
    planDialogVisible.value = false
    getList()
  } catch (error) {
    console.log(error)
    message.error('保存失败')
  } finally {
    saveLoading.value = false
  }
}

const openGenerateReportDialog = (row: ProjectTaskRow) => {
  generateReportRow.value = row
  reportDate.value = ''
  generateReportDialogVisible.value = true
}

const submitGenerateReport = async () => {
  if (!generateReportRow.value?.id) {
    message.error('未找到任务信息')
    return
  }
  if (!reportDate.value) {
    message.error('请选择日报日期')
    return
  }

  try {
    generateReportLoading.value = true
    await IotProjectTaskApi.generateReport({
      id: generateReportRow.value.id,
      reportDate: dayjs(reportDate.value).valueOf()
    })
    message.success('生成日报成功')
    generateReportDialogVisible.value = false
  } catch {
    message.error('生成日报失败')
  } finally {
    generateReportLoading.value = false
  }
}

const getList = async () => {
  loading.value = true
  try {
    const data = await IotProjectTaskApi.getIotProjectTaskList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  Object.assign(queryParams, { ...initQuery })
  queryFormRef.value?.resetFields()
  handleQuery()
}

const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  handleQuery()
}

const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getList()
}

const openForm = (type: string, id?: number, projectId?: number, deptId?: number) => {
  if (id === undefined) {
    push({ name: 'IotProjectTaskInfo', params: { type } })
    return
  }

  console.log('sssssssssssssssssssssss', deptId)

  push({
    name: 'IotProjectTaskInfo',
    params: { type, id, projectId, deptId }
  })
}

const handleDelete = async (id: number) => {
  try {
    await message.delConfirm()
    await IotProjectTaskApi.deleteIotProjectTask(id)
    message.success(t('common.delSuccess'))
    await getList()
  } catch {}
}

const handleExport = async () => {
  try {
    exportLoading.value = true
    const data = await IotProjectTaskApi.exportIotProjectTask(queryParams)
    download.excel(data, '项目信息任务拆分.xls')
  } finally {
    exportLoading.value = false
  }
}

onMounted(async () => {
  companyDeptList.value = await DeptApi.companyLevelDepts()
  getWorkProgressDictOptions()
  getList()
})
</script>

<template>
  <div
    class="iot-project-task-page grid grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
    <el-form
      ref="queryFormRef"
      :model="queryParams"
      size="default"
      label-width="72px"
      class="iot-project-task-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0">
      <div class="query-row">
        <el-form-item label="公司" prop="companyId">
          <el-select
            v-model="queryParams.companyId"
            placeholder="请选择公司"
            clearable
            filterable
            class="w-full">
            <el-option
              v-for="item in companyDeptList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称" prop="manufactureName">
          <el-input
            v-model="queryParams.manufactureName"
            placeholder="请输入客户名称"
            clearable
            class="w-full"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="合同名称" prop="contractName">
          <el-input
            v-model="queryParams.contractName"
            placeholder="请输入合同名称"
            clearable
            class="w-full"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="合同编号" prop="contractCode">
          <el-input
            v-model="queryParams.contractCode"
            placeholder="请输入合同编号"
            clearable
            class="w-full"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="施工队伍" prop="deptName">
          <el-input
            v-model="queryParams.deptName"
            placeholder="请输入施工队伍"
            clearable
            class="w-full"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="井号" prop="wellName">
          <el-input
            v-model="queryParams.wellName"
            placeholder="请输入井号"
            clearable
            class="w-full"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="平台井" prop="platformFlag">
          <el-select
            v-model="queryParams.platformFlag"
            placeholder="请选择平台井"
            clearable
            class="w-full"
            @change="handleQuery">
            <el-option label="全部" value="A" />
            <el-option label="是" value="Y" />
            <el-option label="否" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="w-full" />
        </el-form-item>

        <el-form-item class="query-actions">
          <el-button type="primary" @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />搜索
          </el-button>
          <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
          <el-button type="success" plain :loading="exportLoading" @click="handleExport">
            <Icon icon="ep:download" class="mr-5px" />导出
          </el-button>
        </el-form-item>
      </div>
    </el-form>

    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0">
      <div class="flex-1 relative min-h-0">
        <el-auto-resizer class="absolute">
          <template #default="{ width, height }">
            <ZmTable
              :data="list"
              :loading="loading"
              :width="width"
              :height="height"
              :max-height="height"
              show-border>
              <ZmTableColumn
                type="index"
                :label="t('monitor.serial')"
                :width="70"
                fixed="left"
                hide-in-column-settings />
              <ZmTableColumn prop="manufactureName" label="客户名称" min-width="180" fixed="left" />
              <ZmTableColumn prop="contractName" label="合同名称" min-width="220" />
              <ZmTableColumn prop="contractCode" label="合同编号" min-width="150" />
              <ZmTableColumn prop="wellName" label="井号" min-width="120" />
              <ZmTableColumn prop="location" label="施工地点" min-width="140" />
              <ZmTableColumn prop="deptNames" label="施工队伍" min-width="150" />
              <ZmTableColumn prop="statusLabel" label="施工状态" min-width="120" />
              <ZmTableColumn prop="createTime" label="创建时间" min-width="180">
                <template #default="{ row }">
                  {{ dateFormatter(row, null, row.createTime) }}
                </template>
              </ZmTableColumn>
              <ZmTableColumn label="操作" width="220" fixed="right" action>
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    @click="openPlanDialog(row)"
                    v-hasPermi="['rq:iot-project-task:update']">
                    计划
                  </el-button>
                  <el-button
                    v-if="Number(row.deptId) === REPORT_DEPT_ID"
                    link
                    type="primary"
                    @click="openGenerateReportDialog(row)">
                    生成日报
                  </el-button>
                  <el-button
                    link
                    type="primary"
                    @click="openForm('update', row.id, row.projectId, row.deptId)"
                    v-hasPermi="['rq:iot-project-task:update']">
                    编辑
                  </el-button>
                  <el-button
                    link
                    type="danger"
                    @click="handleDelete(row.id)"
                    v-hasPermi="['rq:iot-project-task:delete']">
                    删除
                  </el-button>
                </template>
              </ZmTableColumn>
            </ZmTable>
          </template>
        </el-auto-resizer>
      </div>

      <div class="h-8 mt-2 flex items-center justify-end">
        <el-pagination
          v-show="total > 0"
          size="default"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          :background="true"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>

  <el-dialog
    v-model="planDialogVisible"
    width="min(1440px, calc(100vw - 40px))"
    class="plan-dialog">
    <template #header>
      <div class="plan-dialog-title">
        <span class="plan-dialog-title__icon">
          <Icon icon="ep:calendar" />
        </span>
        <div class="plan-dialog-title__content">
          <h3>任务计划</h3>
          <p>
            {{ currentRow?.contractName || '未关联合同' }}
            <span class="plan-dialog-title__separator">·</span>
            {{ currentRow?.wellName || '未填写井号' }}
          </p>
        </div>
      </div>
    </template>

    <div class="plan-dialog-content">
      <div class="plan-toolbar">
        <div>
          <div class="plan-toolbar__title">计划明细</div>
          <div class="plan-toolbar__subtitle">维护任务开始时间、结束时间及工作量</div>
        </div>
        <div class="plan-toolbar__actions">
          <span class="plan-count">共 {{ planList.length }} 条</span>
          <el-button size="default" type="primary" @click="addNewRow">
            <Icon icon="ep:plus" class="mr-5px" />新增计划
          </el-button>
        </div>
      </div>

      <el-table :data="planList" border stripe max-height="50vh" class="plan-table">
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="施工状态" min-width="200">
        <template #default="scope">
          <el-select
            v-model="scope.row.status"
            placeholder="请选择施工状态"
            clearable
            class="w-full"
            @change="onStatusChange(scope.row)">
            <el-option
              v-for="dict in workProgressDictOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </template>
      </el-table-column> -->
        <el-table-column label="开始时间" min-width="200">
          <template #default="scope">
            <el-date-picker
              v-model="scope.row.startTime"
              type="datetime"
              placeholder="选择开始时间"
              value-format="YYYY-MM-DD HH:mm"
              format="YYYY-MM-DD HH:mm"
              class="w-full" />
          </template>
        </el-table-column>
        <el-table-column label="结束时间" min-width="200">
          <template #default="scope">
            <el-date-picker
              v-if="rowShowEndTime(scope.row)"
              v-model="scope.row.endTime"
              type="datetime"
              placeholder="选择结束时间"
              value-format="YYYY-MM-DD HH:mm"
              format="YYYY-MM-DD HH:mm"
              class="w-full" />
          </template>
        </el-table-column>

        <el-table-column
          min-width="100"
          v-for="item in currentTableColumns"
          :key="item.identifier"
          :prop="item.identifier">
          <template #header>
            <span>
              <span v-if="isRequiredColumn(item)" class="required-mark">*</span>
              {{ item.unit ? `${item.name}(${item.unit})` : item.name }}
            </span>
          </template>
          <template #default="scope">
            <!-- <el-input type="number" v-model="scope.row[item.identifier]" placeholder="请输入" /> -->
            <el-input-number
              v-model="scope.row[item.identifier]"
              size="default"
              :min="0"
              class="plan-number-input"
              placeholder="请输入" />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button link type="danger" @click="removeRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <div class="plan-dialog-footer">
        <span>请确认各计划时间和工作量填写完整</span>
        <div>
          <el-button size="default" @click="planDialogVisible = false">取消</el-button>
          <el-button size="default" type="primary" :loading="saveLoading" @click="savePlan">
            <Icon icon="ep:check" class="mr-5px" />保存
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="generateReportDialogVisible" title="生成日报" width="420px">
    <el-form size="default" label-width="80px">
      <el-form-item label="日报日期" required>
        <el-date-picker
          v-model="reportDate"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          class="w-full!" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="default" @click="generateReportDialogVisible = false">取消</el-button>
        <el-button
          size="default"
          type="primary"
          :loading="generateReportLoading"
          @click="submitGenerateReport">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 生成日报 Dialog -->
  <el-dialog v-model="generateReportDialogVisible" title="生成日报" width="420px">
    <el-form size="default" label-width="80px">
      <el-form-item label="日报日期" required>
        <el-date-picker
          v-model="reportDate"
          type="date"
          placeholder="请选择日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          class="w-full!" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button size="default" @click="generateReportDialogVisible = false">取消</el-button>
        <el-button
          size="default"
          type="primary"
          @click="submitGenerateReport"
          :loading="generateReportLoading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.iot-project-task-query {
  display: block;
}

.query-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(270px, 1fr));
  align-items: center;
  gap: 14px 28px;
  min-width: 0;
}

.query-actions {
  justify-self: end;
}

.query-actions :deep(.el-form-item__content) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
}

.query-actions :deep(.el-button) {
  margin-left: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

.plan-dialog-title {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: 40px;
}

.plan-dialog-title__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  color: #3478f6;
  background: #eaf2ff;
  border-radius: 8px;
}

.plan-dialog-title__content {
  min-width: 0;
}

.plan-dialog-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--el-text-color-primary);
}

.plan-dialog-title p {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-dialog-title__separator {
  margin: 0 6px;
  color: var(--el-text-color-placeholder);
}

.plan-dialog :deep(.el-dialog__header) {
  padding: 16px 20px;
  margin-right: 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.plan-dialog :deep(.el-dialog__body) {
  padding: 16px 20px;
}

.plan-dialog :deep(.el-dialog__footer) {
  padding: 12px 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.plan-dialog-content {
  overflow: hidden;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 6px;
}

.plan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 10px 14px;
  background: var(--el-fill-color-extra-light);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.plan-toolbar__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--el-text-color-primary);
}

.plan-toolbar__subtitle {
  margin-top: 1px;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
}

.plan-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-count {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  white-space: nowrap;
}

.plan-table {
  width: 100%;
}

.plan-table :deep(.el-table__cell) {
  padding: 8px 0;
}

.plan-number-input {
  width: 100%;
}

.plan-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.plan-dialog-footer > span {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.plan-dialog-footer :deep(.el-button) {
  margin-left: 8px;
}

.required-mark {
  margin-right: 2px;
  color: var(--el-color-danger);
}

@media (width >= 2200px) {
  .query-actions {
    grid-column: 4;
  }
}

@media (width <= 1800px) {
  .query-row {
    grid-template-columns: repeat(3, minmax(270px, 1fr));
  }

  .query-actions {
    justify-self: start;
  }
}

@media (width <= 1500px) {
  .query-row {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px 18px;
  }

  .query-control {
    width: 210px;
  }

  .query-control--small {
    width: 160px;
  }

  .query-control--date {
    width: 280px;
  }
}

@media (width <= 1200px) {
  .iot-project-task-page {
    grid-template-rows: auto minmax(480px, 1fr);
    height: auto;
    min-height: calc(
      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
    );
  }

  .query-actions {
    width: 100%;
    justify-self: start;
  }

  .query-actions :deep(.el-form-item__content) {
    justify-content: flex-start;
  }
}

@media (width <= 768px) {
  .iot-project-task-query {
    padding: 12px;
  }

  .query-row,
  .query-row :deep(.el-form-item),
  .query-actions {
    width: 100%;
  }

  .plan-dialog .plan-dialog-title p,
  .plan-dialog .plan-toolbar__subtitle,
  .plan-dialog .plan-dialog-footer > span {
    display: none;
  }

  .plan-dialog .plan-toolbar {
    align-items: flex-start;
  }

  .plan-dialog .plan-toolbar__actions {
    gap: 8px;
  }

  .plan-dialog .plan-dialog-footer {
    justify-content: flex-end;
  }

  .query-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .query-control,
  .query-control--small,
  .query-control--date {
    width: 100%;
  }

  .query-actions :deep(.el-form-item__content) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .query-actions :deep(.el-button) {
    width: 100%;
    margin-left: 0;
  }
}
</style>
