<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="工单编码" prop="workOrderProjectNo">
        <el-input
          v-model="queryParams.workOrderProjectNo"
          placeholder="请输入工单编码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="维保中心ID" prop="gxtCenterId">
        <el-input
          v-model="queryParams.gxtCenterId"
          placeholder="请输入维保中心ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="维保中心" prop="gxtCenter">
        <el-input
          v-model="queryParams.gxtCenter"
          placeholder="请输入维保中心"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="风电场ID" prop="pcsStationId">
        <el-input
          v-model="queryParams.pcsStationId"
          placeholder="请输入风电场ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="风电场" prop="pcsStationName">
        <el-input
          v-model="queryParams.pcsStationName"
          placeholder="请输入风电场"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="风机设备ID" prop="pcsDeviceId">
        <el-input
          v-model="queryParams.pcsDeviceId"
          placeholder="请输入风机设备ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="风机编号" prop="pcsDeviceName">
        <el-input
          v-model="queryParams.pcsDeviceName"
          placeholder="请输入风机编号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="风机品牌" prop="brand">
        <el-input
          v-model="queryParams.brand"
          placeholder="请输入风机品牌"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="风机型号" prop="model">
        <el-input
          v-model="queryParams.model"
          placeholder="请输入风机型号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="故障代码" prop="faultCode">
        <el-input
          v-model="queryParams.faultCode"
          placeholder="请输入故障代码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="派单时间" prop="assignTime">
        <el-date-picker clearable
          v-model="queryParams.assignTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择派单时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="派单人ID" prop="assignUserId">
        <el-input
          v-model="queryParams.assignUserId"
          placeholder="请输入派单人ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="派单人姓名" prop="assignUserName">
        <el-input
          v-model="queryParams.assignUserName"
          placeholder="请输入派单人姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接单时间" prop="acceptTime">
        <el-date-picker clearable
          v-model="queryParams.acceptTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择接单时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="接单人ID" prop="acceptUserId">
        <el-input
          v-model="queryParams.acceptUserId"
          placeholder="请输入接单人ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接单人姓名" prop="acceptUserName">
        <el-input
          v-model="queryParams.acceptUserName"
          placeholder="请输入接单人姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="实际开始时间" prop="realStartTime">
        <el-date-picker clearable
          v-model="queryParams.realStartTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择实际开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际结束时间" prop="realEndTime">
        <el-date-picker clearable
          v-model="queryParams.realEndTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择实际结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="班组组长ID" prop="teamLeaderId">
        <el-input
          v-model="queryParams.teamLeaderId"
          placeholder="请输入班组组长ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="班组组长姓名" prop="teamLeaderName">
        <el-input
          v-model="queryParams.teamLeaderName"
          placeholder="请输入班组组长姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工作组成员ID" prop="workGroupMemberId">
        <el-input
          v-model="queryParams.workGroupMemberId"
          placeholder="请输入工作组成员ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工作组成员姓名" prop="workGroupMemberName">
        <el-input
          v-model="queryParams.workGroupMemberName"
          placeholder="请输入工作组成员姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预计工时" prop="planHour">
        <el-input
          v-model="queryParams.planHour"
          placeholder="请输入预计工时"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="评分" prop="score">
        <el-input
          v-model="queryParams.score"
          placeholder="请输入评分"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['gxt:repairOrder:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['gxt:repairOrder:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['gxt:repairOrder:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['gxt:repairOrder:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="repairOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工单ID" align="center" prop="id" />
      <el-table-column label="工单编码" align="center" prop="workOrderProjectNo" />
      <el-table-column label="工单状态：draft-草稿,to_assign-待派单,assigned-已派单,accepted-已接单,processing-处理中,paused-暂停中,to_approve-待审批,suspended-已挂起,completed-已完成" align="center" prop="workOrderStatus" />
      <el-table-column label="维保中心ID" align="center" prop="gxtCenterId" />
      <el-table-column label="维保中心" align="center" prop="gxtCenter" />
      <el-table-column label="风电场ID" align="center" prop="pcsStationId" />
      <el-table-column label="风电场" align="center" prop="pcsStationName" />
      <el-table-column label="风机设备ID" align="center" prop="pcsDeviceId" />
      <el-table-column label="风机编号" align="center" prop="pcsDeviceName" />
      <el-table-column label="风机品牌" align="center" prop="brand" />
      <el-table-column label="风机型号" align="center" prop="model" />
      <el-table-column label="故障代码" align="center" prop="faultCode" />
      <el-table-column label="故障描述" align="center" prop="faultDesc" />
      <el-table-column label="派单时间" align="center" prop="assignTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.assignTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="派单人ID" align="center" prop="assignUserId" />
      <el-table-column label="派单人姓名" align="center" prop="assignUserName" />
      <el-table-column label="接单时间" align="center" prop="acceptTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.acceptTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="接单人ID" align="center" prop="acceptUserId" />
      <el-table-column label="接单人姓名" align="center" prop="acceptUserName" />
      <el-table-column label="实际开始时间" align="center" prop="realStartTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.realStartTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际结束时间" align="center" prop="realEndTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.realEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班组组长ID" align="center" prop="teamLeaderId" />
      <el-table-column label="班组组长姓名" align="center" prop="teamLeaderName" />
      <el-table-column label="工作组成员ID" align="center" prop="workGroupMemberId" />
      <el-table-column label="工作组成员姓名" align="center" prop="workGroupMemberName" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="维保内容" align="center" prop="content" />
      <el-table-column label="预计工时" align="center" prop="planHour" />
      <el-table-column label="优先级" align="center" prop="priorityType" />
      <el-table-column label="评分" align="center" prop="score" />
      <el-table-column label="点评" align="center" prop="reviewContent" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['gxt:repairOrder:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['gxt:repairOrder:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改维修工单对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="repairOrderRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="工单编码" prop="workOrderProjectNo">
          <el-input v-model="form.workOrderProjectNo" placeholder="请输入工单编码" />
        </el-form-item>
        <el-form-item label="维保中心ID" prop="gxtCenterId">
          <el-input v-model="form.gxtCenterId" placeholder="请输入维保中心ID" />
        </el-form-item>
        <el-form-item label="维保中心" prop="gxtCenter">
          <el-input v-model="form.gxtCenter" placeholder="请输入维保中心" />
        </el-form-item>
        <el-form-item label="风电场ID" prop="pcsStationId">
          <el-input v-model="form.pcsStationId" placeholder="请输入风电场ID" />
        </el-form-item>
        <el-form-item label="风电场" prop="pcsStationName">
          <el-input v-model="form.pcsStationName" placeholder="请输入风电场" />
        </el-form-item>
        <el-form-item label="风机设备ID" prop="pcsDeviceId">
          <el-input v-model="form.pcsDeviceId" placeholder="请输入风机设备ID" />
        </el-form-item>
        <el-form-item label="风机编号" prop="pcsDeviceName">
          <el-input v-model="form.pcsDeviceName" placeholder="请输入风机编号" />
        </el-form-item>
        <el-form-item label="风机品牌" prop="brand">
          <el-input v-model="form.brand" placeholder="请输入风机品牌" />
        </el-form-item>
        <el-form-item label="风机型号" prop="model">
          <el-input v-model="form.model" placeholder="请输入风机型号" />
        </el-form-item>
        <el-form-item label="故障代码" prop="faultCode">
          <el-input v-model="form.faultCode" placeholder="请输入故障代码" />
        </el-form-item>
        <el-form-item label="故障描述" prop="faultDesc">
          <el-input v-model="form.faultDesc" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="派单时间" prop="assignTime">
          <el-date-picker clearable
            v-model="form.assignTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择派单时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="派单人ID" prop="assignUserId">
          <el-input v-model="form.assignUserId" placeholder="请输入派单人ID" />
        </el-form-item>
        <el-form-item label="派单人姓名" prop="assignUserName">
          <el-input v-model="form.assignUserName" placeholder="请输入派单人姓名" />
        </el-form-item>
        <el-form-item label="接单时间" prop="acceptTime">
          <el-date-picker clearable
            v-model="form.acceptTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择接单时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="接单人ID" prop="acceptUserId">
          <el-input v-model="form.acceptUserId" placeholder="请输入接单人ID" />
        </el-form-item>
        <el-form-item label="接单人姓名" prop="acceptUserName">
          <el-input v-model="form.acceptUserName" placeholder="请输入接单人姓名" />
        </el-form-item>
        <el-form-item label="实际开始时间" prop="realStartTime">
          <el-date-picker clearable
            v-model="form.realStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择实际开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际结束时间" prop="realEndTime">
          <el-date-picker clearable
            v-model="form.realEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择实际结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="班组组长ID" prop="teamLeaderId">
          <el-input v-model="form.teamLeaderId" placeholder="请输入班组组长ID" />
        </el-form-item>
        <el-form-item label="班组组长姓名" prop="teamLeaderName">
          <el-input v-model="form.teamLeaderName" placeholder="请输入班组组长姓名" />
        </el-form-item>
        <el-form-item label="工作组成员ID" prop="workGroupMemberId">
          <el-input v-model="form.workGroupMemberId" placeholder="请输入工作组成员ID" />
        </el-form-item>
        <el-form-item label="工作组成员姓名" prop="workGroupMemberName">
          <el-input v-model="form.workGroupMemberName" placeholder="请输入工作组成员姓名" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="维保内容" prop="content">
          <el-input v-model="form.content" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="预计工时" prop="planHour">
          <el-input v-model="form.planHour" placeholder="请输入预计工时" />
        </el-form-item>
        <el-form-item label="评分" prop="score">
          <el-input v-model="form.score" placeholder="请输入评分" />
        </el-form-item>
        <el-form-item label="点评" prop="reviewContent">
          <el-input v-model="form.reviewContent" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="RepairOrder">
import { listRepairOrder, getRepairOrder, delRepairOrder, addRepairOrder, updateRepairOrder } from "@/api/gxt/repairOrder"

const { proxy } = getCurrentInstance()

const repairOrderList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    workOrderProjectNo: null,
    workOrderStatus: null,
    gxtCenterId: null,
    gxtCenter: null,
    pcsStationId: null,
    pcsStationName: null,
    pcsDeviceId: null,
    pcsDeviceName: null,
    brand: null,
    model: null,
    faultCode: null,
    faultDesc: null,
    assignTime: null,
    assignUserId: null,
    assignUserName: null,
    acceptTime: null,
    acceptUserId: null,
    acceptUserName: null,
    realStartTime: null,
    realEndTime: null,
    teamLeaderId: null,
    teamLeaderName: null,
    workGroupMemberId: null,
    workGroupMemberName: null,
    content: null,
    planHour: null,
    priorityType: null,
    score: null,
    reviewContent: null
  },
  rules: {
    workOrderProjectNo: [
      { required: true, message: "工单编码不能为空", trigger: "blur" }
    ],
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询维修工单列表 */
function getList() {
  loading.value = true
  listRepairOrder(queryParams.value).then(response => {
    repairOrderList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    workOrderProjectNo: null,
    workOrderStatus: null,
    gxtCenterId: null,
    gxtCenter: null,
    pcsStationId: null,
    pcsStationName: null,
    pcsDeviceId: null,
    pcsDeviceName: null,
    brand: null,
    model: null,
    faultCode: null,
    faultDesc: null,
    assignTime: null,
    assignUserId: null,
    assignUserName: null,
    acceptTime: null,
    acceptUserId: null,
    acceptUserName: null,
    realStartTime: null,
    realEndTime: null,
    teamLeaderId: null,
    teamLeaderName: null,
    workGroupMemberId: null,
    workGroupMemberName: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null,
    content: null,
    planHour: null,
    priorityType: null,
    score: null,
    reviewContent: null
  }
  proxy.resetForm("repairOrderRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加维修工单"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getRepairOrder(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改维修工单"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["repairOrderRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateRepairOrder(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addRepairOrder(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除维修工单编号为"' + _ids + '"的数据项？').then(function() {
    return delRepairOrder(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('gxt/repairOrder/export', {
    ...queryParams.value
  }, `repairOrder_${new Date().getTime()}.xlsx`)
}

getList()
</script>
