<template>
  <div
    class="maintain-page grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
    <DeptTreeSelect
      v-model="queryParams.deptId"
      :top-id="rootDeptId"
      :dept-id="deptId"
      :init-select="false"
      :show-title="false"
      request-api="getSimpleDeptList"
      class="maintain-tree row-span-2"
      @node-click="handleDeptNodeClick" />

    <el-form
      ref="queryFormRef"
      :model="queryParams"
      size="default"
      label-width="68px"
      class="maintain-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0">
      <div class="query-row">
        <el-form-item :label="t('maintain.faultCode')" prop="failureCode">
          <el-input
            v-model="queryParams.failureCode"
            :placeholder="t('maintain.codeHolder')"
            clearable
            @keyup.enter="handleQuery"
            class="query-control" />
        </el-form-item>
        <el-form-item :label="t('maintain.faultName')" label-width="70px" prop="failureName">
          <el-input
            v-model="queryParams.failureName"
            :placeholder="t('maintain.nameHolder')"
            clearable
            @keyup.enter="handleQuery"
            class="query-control" />
        </el-form-item>
        <el-form-item label="执行时间" label-width="70px" prop="executeDate">
          <el-date-picker
            v-model="queryParams.executeDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="query-control query-control--date"
            :clearable="true"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
        </el-form-item>
        <el-form-item label="创建时间" label-width="70px" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="query-control query-control--date"
            :clearable="true"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
        </el-form-item>
        <el-form-item :label="t('maintain.status')" prop="status">
          <el-select
            v-model="queryParams.status"
            :placeholder="t('maintain.status')"
            clearable
            class="query-control query-control--small">
            <el-option
              v-for="dict in getStrDictOptions(DICT_TYPE.PMS_MAIN_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('maintain.shutDown')" v-show="ifShow" prop="ifStop">
          <el-select
            v-model="queryParams.ifStop"
            :placeholder="t('maintain.shutDown')"
            clearable
            class="query-control query-control--small">
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('maintain.failureTime')" v-show="ifShow" prop="failureTime">
          <el-date-picker
            v-model="queryParams.failureTime"
            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="query-control query-control--date" />
        </el-form-item>
        <el-form-item :label="t('maintain.solve')" v-show="ifShow" prop="ifDeal">
          <el-select
            v-model="queryParams.ifDeal"
            :placeholder="t('maintain.solve')"
            clearable
            class="query-control query-control--small">
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('maintain.assist')" v-show="ifShow" prop="needHelp">
          <el-select
            v-model="queryParams.needHelp"
            :placeholder="t('maintain.assist')"
            clearable
            class="query-control query-control--small">
            <el-option
              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
      </div>

      <el-form-item class="query-actions">
        <el-button v-if="!ifShow" type="warning" @click="moreQuery(true)">
          <Icon icon="ep:search" class="mr-5px" /> {{ t('maintain.moreSearch') }}
        </el-button>
        <el-button v-else type="danger" @click="moreQuery(false)">
          <Icon icon="ep:search" class="mr-5px" /> {{ t('maintain.closeSearch') }}
        </el-button>
        <el-button type="primary" @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> {{ t('maintain.search') }}
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> {{ t('maintain.reset') }}
        </el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['rq:iot-maintain:create']">
          <Icon icon="ep:plus" class="mr-5px" /> {{ t('maintain.added') }}
        </el-button>
        <el-button type="success" plain @click="handleExport" :loading="exportLoading">
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </el-form-item>
    </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
              :loading="loading"
              :data="list"
              :width="width"
              :height="height"
              :max-height="height"
              show-border>
              <ZmTableColumn :label="t('maintain.serial')" width="70" align="center" fixed="left">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </ZmTableColumn>
              <ZmTableColumn :label="t('iotDevice.code')" align="center" prop="deviceCode" />
              <ZmTableColumn :label="t('maintain.deviceName')" align="center" prop="deviceName" />
              <ZmTableColumn
                :label="t('maintain.status')"
                align="center"
                prop="status"
                min-width="95">
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.PMS_MAIN_STATUS" :value="scope.row.status" />
                </template>
              </ZmTableColumn>
              <ZmTableColumn
                :label="t('maintain.source')"
                align="center"
                prop="maintainType"
                min-width="135" />
              <ZmTableColumn
                :label="t('iotMaintain.repairType')"
                align="center"
                prop="type"
                min-width="135">
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.PMS_MAIN_TYPE" :value="scope.row.type" />
                </template>
              </ZmTableColumn>
              <ZmTableColumn :label="t('maintain.shutDown')" align="center" prop="ifStop">
                <template #default="scope">
                  <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifStop" />
                </template>
              </ZmTableColumn>
              <ZmTableColumn
                label="执行时间"
                align="center"
                prop="executeDate"
                :formatter="dateFormatter"
                min-width="180px" />
              <ZmTableColumn :label="t('iotMaintain.oaFlowNo')" align="center" prop="oaFlowNo" />
              <ZmTableColumn
                :label="t('maintain.dept')"
                align="center"
                prop="deptName"
                min-width="135" />
              <ZmTableColumn
                :label="t('inspect.createName')"
                align="center"
                prop="createName"
                min-width="130" />
              <ZmTableColumn
                label="创建时间"
                align="center"
                prop="createTime"
                :formatter="dateFormatter"
                width="180px" />
              <ZmTableColumn
                :label="t('maintain.operation')"
                align="center"
                min-width="170"
                fixed="right"
                action>
                <template #default="scope">
                  <el-button link type="primary" @click="detail(scope.row.id)">
                    {{ t('maintain.view') }}
                  </el-button>
                  <el-button
                    link
                    v-if="
                      scope.row.status === 'tx' &&
                      (scope.row.auditStatus === 20 || scope.row.auditStatus === null)
                    "
                    type="danger"
                    @click="
                      openForm('update', scope.row.id, scope.row.maintainPerson, scope.row.company)
                    ">
                    {{ t('maintain.fill') }}
                  </el-button>
                  <el-button
                    link
                    v-if="scope.row.status === 'personnel' && userid === scope.row.maintainPerson"
                    type="danger"
                    @click="openDialog(scope.row.id)">
                    {{ t('maintain.maintainWay') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.status !== 'personnel'"
                    link
                    type="warning"
                    @click="openRecord(scope.row.id)">
                    {{ t('maintain.record') }}
                  </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="dialogVisible"
    title="维修方式"
    :width="600"
    :before-close="handleClose"
    append-to-body
    :close-on-click-modal="false">
    <el-form ref="methodFormRef" :model="form" :rules="rules" label-width="70px">
      <el-form-item label="维修方式" prop="maintainMethod">
        <el-select v-model="form.maintainMethod" placeholder="请选择维修方式">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.PMS_MAINTAIN_METHOD)"
            :key="dict.label"
            :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注说明" prop="methodDescription">
        <el-input
          type="textarea"
          v-model="form.methodDescription"
          placeholder="请输入备注说明"
          :rows="4"
          resize="none" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { IotMaintainApi, IotMaintainVO } from '@/api/pms/maintain'
import DeptTreeSelect from '@/components/DeptTreeSelect/index.vue'
import { DICT_TYPE, getBoolDictOptions, getStrDictOptions } from '@/utils/dict'
import { useUserStore } from '@/store/modules/user'

import { useTableComponents } from '@/components/ZmTable/useTableComponents'
const { ZmTable, ZmTableColumn } = useTableComponents<IotMaintainVO>()

/** 维修工单 列表 */
defineOptions({ name: 'IotMaintain' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转
const ifShow = ref(false)
const loading = ref(true) // 列表的加载中
const list = ref<IotMaintainVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const dialogVisible = ref(false)
const rootDeptId = 156
const deptId = useUserStore().getUser.deptId || rootDeptId
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  failureCode: undefined,
  failureName: undefined,
  deviceId: undefined,
  status: undefined,
  ifStop: undefined,
  failureTime: [],
  failureInfluence: undefined,
  failureSystem: undefined,
  description: undefined,
  pic: undefined,
  solution: undefined,
  maintainStartTime: [],
  maintainEndTime: [],
  remark: undefined,
  createTime: [],
  deviceName: undefined,
  processInstanceId: undefined,
  auditStatus: undefined,
  deptId: undefined,
  executeDate: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const moreQuery = (show) => {
  ifShow.value = show
}
// 表单验证规则
const rules = {
  methodDescription: [{ required: true, message: '请输入备注说明', trigger: 'blur' }],
  maintainMethod: [{ required: true, message: '请选择维修方式', trigger: 'blur' }]
}

// 确定按钮处理
const handleConfirm = async () => {
  // 表单验证
  try {
    debugger
    await methodFormRef.value.validate()
    // 验证通过，调用接口
    await IotMaintainApi.maintainMethod(form)
    ElMessage.success('操作成功')
    dialogVisible.value = false
    resetForm()
  } catch (error) {
    return
  }
}

// 取消按钮处理
const handleCancel = () => {
  dialogVisible.value = false
  resetForm()
}

const methodFormRef = ref(null)
const form = reactive({
  id: undefined,
  maintainMethod: '',
  methodDescription: ''
})
// 关闭对话框前的回调
const handleClose = () => {
  resetForm()
}
// 重置表单
const resetForm = () => {
  methodFormRef.value?.resetFields()
}
// 打开对话框
const openDialog = (id: number) => {
  dialogVisible.value = true
  form.id = id
  form.maintainMethod = ''
  form.methodDescription = ''
}

const openRecord = async (id?: number) => {
  await push({ name: 'MaintainRecord', params: { id } })
}

const openForm = async (type: string, id?: number, person: any, company) => {
  if (company === 'rh' && person === userid.value) {
    message.error('维修人员无法填写工单')
    return
  }
  //修改
  if (typeof id === 'number') {
    await push({ name: 'MaintainAdd', params: { id } })
    return
  }
  // 新增
  await push({ name: 'MaintainAdd', params: {} })
}
const detail = (id?: number) => {
  push({ name: 'MaintainDetail', params: { id } })
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await IotMaintainApi.getIotMaintainPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  queryParams.pageNo = 1
  await getList()
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

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

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

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await IotMaintainApi.deleteIotMaintain(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await IotMaintainApi.exportIotMaintain(queryParams)
    download.excel(data, '维修工单.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

const userid = ref()
/** 初始化 **/
onMounted(() => {
  getList()
  userid.value = useUserStore().getUser.id
})
</script>

<style scoped>
.maintain-query {
  display: block;
}

.query-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-width: 0;
}

.query-row :deep(.el-form-item__label) {
  white-space: nowrap;
}

.query-actions {
  width: 100%;
  margin-top: 12px;
}

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

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

.query-control {
  width: 180px;
}

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

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

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

@media (width <= 1500px) {
  .query-row {
    gap: 12px 18px;
  }

  .query-control {
    width: 168px;
  }

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

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

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

  :deep(.maintain-tree) {
    grid-row: auto !important;
    width: 100% !important;
    height: 320px !important;
    min-width: 0 !important;
  }
}

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

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

  .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>
