<template>
  <div class='p-2'>
    <transition :enter-active-class='proxy?.animate.searchAnimate.enter'
                :leave-active-class='proxy?.animate.searchAnimate.leave'>
      <div v-show='showSearch' class='mb-[10px]'>
        <el-card shadow='hover'>
          <el-form ref='queryFormRef' :model='queryParams' :inline='true'>
            <el-form-item label='工序名称' prop='processName'>
              <el-input v-model='queryParams.processName' placeholder='请输入工序名称' clearable
                        @keyup.enter='handleQuery' />
            </el-form-item>
            <el-form-item label='工序类别' prop='processType'>
              <el-select v-model='queryParams.processType' placeholder='请选择工序类别' clearable>
                <el-option v-for='dict in process_type' :key='dict.value' :label='dict.label' :value='dict.value' />
              </el-select>
            </el-form-item>
            <!--            <el-form-item label="车间名称" prop="workshopId">-->
            <!--              <el-input v-model="queryParams.workshopId" placeholder="请输入车间名称" clearable @keyup.enter="handleQuery" />-->
            <!--            </el-form-item>-->
            <el-form-item label='委外标识' prop='outsourcingFlag'>
              <el-select v-model='queryParams.outsourcingFlag' placeholder='请选择委外标识' clearable>
                <el-option v-for='dict in mes_outsourcing_flag' :key='dict.value' :label='dict.label'
                           :value='dict.value' />
              </el-select>
            </el-form-item>
            <el-form-item label='领料方式' prop='materialMethod'>
              <el-select v-model='queryParams.materialMethod' placeholder='请选择领料方式' clearable>
                <el-option v-for='dict in mes_material_method' :key='dict.value' :label='dict.label'
                           :value='dict.value' />
              </el-select>
            </el-form-item>
            <el-form-item label='质检方式' prop='inspectionMethod'>
              <el-select v-model='queryParams.inspectionMethod' placeholder='请选择质检方式' clearable>
                <el-option v-for='dict in mes_inspection_method' :key='dict.value' :label='dict.label'
                           :value='dict.value' />
              </el-select>
            </el-form-item>
            <el-form-item label='工序生产类型' prop='processProductionType' label-width='100'>
              <el-select v-model='queryParams.processProductionType' placeholder='请选择工序生产类型' clearable>
                <el-option v-for='dict in mes_process_production_type' :key='dict.value' :label='dict.label'
                           :value='dict.value' />
              </el-select>
            </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-card>
      </div>
    </transition>

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

      <el-table v-loading='loading' :data='baseProcessInfoList' @selection-change='handleSelectionChange'>
        <el-table-column type='selection' width='55' align='center' />
        <el-table-column label='主键标识' align='center' prop='processId' v-if='columns[0].visible' />
        <el-table-column label='租户编号' align='center' prop='tenantId' v-if='columns[1].visible' />
        <el-table-column label='工序编号' align='center' prop='processCode' v-if='columns[2].visible' />
        <el-table-column label='工序名称' align='center' prop='processName' v-if='columns[3].visible' />
        <el-table-column label='工序类别' align='center' prop='processType' v-if='columns[4].visible'>
          <template #default='scope'>
            <dict-tag :options='process_type' :value='scope.row.processType' />
          </template>
        </el-table-column>
        <el-table-column label='工序顺序' align='center' prop='processQueue' v-if='columns[5].visible' />
        <el-table-column label='单位生产时间' align='center' prop='productionTime' v-if='columns[6].visible' width='110'>
          <template v-slot='scope'>
            <span>{{ formatDayHourMinutes(scope.row.productionTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label='车间名称' align='center' prop='workshopName' v-if='columns[7].visible' width='120'/>
        <el-table-column label='委外标识' align='center' prop='outsourcingFlag' v-if='columns[8].visible'>
          <template #default='scope'>
            <dict-tag :options='mes_outsourcing_flag' :value='scope.row.outsourcingFlag' />
          </template>
        </el-table-column>
        <el-table-column label='工序生产类型' align='center' prop='processProductionType' v-if='columns[9].visible' width='110'>
          <template #default='scope'>
            <dict-tag :options='mes_process_production_type' :value='scope.row.processProductionType' />
          </template>
        </el-table-column>
        <el-table-column label='默认产出率' align='center' prop='defaultYieldRate' v-if='columns[10].visible' width='100'/>
        <el-table-column label='损耗率' align='center' prop='lossRate' v-if='columns[11].visible' />
        <el-table-column label='返修率' align='center' prop='reworkRate' v-if='columns[12].visible' />
        <el-table-column label='领料方式' align='center' prop='materialMethod' v-if='columns[13].visible'>
          <template #default='scope'>
            <dict-tag :options='mes_material_method' :value='scope.row.materialMethod' />
          </template>
        </el-table-column>
        <el-table-column label='委外提前期' align='center' prop='leadTime' v-if='columns[14].visible' width='100'/>
        <el-table-column label='准备时间' align='center' prop='setupTime' v-if='columns[15].visible' />
        <el-table-column label='加工时间' align='center' prop='processingTime' v-if='columns[16].visible' />
        <el-table-column label='拆卸时间' align='center' prop='disassemblyTime' v-if='columns[17].visible' />
        <el-table-column label='理论生产节拍' align='center' prop='theoreticalCycleTime' v-if='columns[18].visible' width='110'/>
        <el-table-column label='质检方式' align='center' prop='inspectionMethod' v-if='columns[19].visible'>
          <template #default='scope'>
            <dict-tag :options='mes_inspection_method' :value='scope.row.inspectionMethod' />
          </template>
        </el-table-column>
        <el-table-column label='激活标识' align='center' prop='activeFlag' v-if='columns[20].visible'>
          <template #default='scope'>
            <dict-tag :options='active_flag' :value='scope.row.activeFlag' />
          </template>
        </el-table-column>
        <el-table-column label='备注' align='center' prop='remark' v-if='columns[21].visible' />
        <el-table-column label='创建部门' align='center' prop='createDept' v-if='columns[22].visible' />
        <el-table-column label='创建人' align='center' prop='createBy' v-if='columns[23].visible' />
        <el-table-column label='创建时间' align='center' prop='createTime' width='180' v-if='columns[24].visible'>
          <template #default='scope'>
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label='更新人' align='center' prop='updateBy' v-if='columns[25].visible' />
        <el-table-column label='更新时间' align='center' prop='updateTime' width='180' v-if='columns[26].visible'>
          <template #default='scope'>
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label='操作' align='center' class-name='small-padding fixed-width' fixed='right' width='150'>
          <template #default='scope'>
            <el-row :gutter='10' class='mb8'>
              <el-col :span='12'>
                <el-button
                  size='small'
                  type='text'
                  icon='circle-plus'
                  @click='handleProdLineUpdate(scope.row)'
                >关联产线
                </el-button>
              </el-col>
              <el-col :span='12'>
                <el-button
                  size='small'
                  type='text'
                  icon='check'
                  v-if="scope.row.processType !== '3'"
                  @click='handleUserUpdate(scope.row)'
                >关联人员
                </el-button>
              </el-col>
            </el-row>
          </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-card>
    <!-- 添加或修改工序信息对话框 -->
    <el-dialog :title='dialog.title' v-model='dialog.visible' width='900px' append-to-body>
      <el-form ref='baseProcessInfoFormRef' :model='form' :rules='rules' label-width='130px' class="two-column-form">
        <div class="form-column">
          <el-form-item label='工序编号' prop='processCode'>
            <el-input v-model='form.processCode' placeholder='请输入工序编号' />
          </el-form-item>
          <el-form-item label='工序名称' prop='processName'>
            <el-input v-model='form.processName' placeholder='请输入工序名称' />
          </el-form-item>
          <el-form-item label='工序类别' prop='processType'>
            <el-select v-model='form.processType' placeholder='请选择工序类别'>
              <el-option
                v-for='dict in process_type'
                :key='dict.value'
                :label='dict.label'
                :value='dict.value'
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label='工序顺序' prop='processQueue'>
            <el-input v-model='form.processQueue' placeholder='请输入工序顺序' />
          </el-form-item>
          <el-form-item label='单位生产时间' prop='productionTime'>
            <el-input-number v-model='form.productionTimeDays' placeholder='请输入天数' :min='0' :max='10000'
                           :controls='false' :style="{ width: '50px' }" />
            <span>&nbsp;天&nbsp;</span>
            <el-input-number v-model='form.productionTimeHours' placeholder='请输入小时' :min='0' :max='23'
                           :controls='false' :style="{ width: '50px' }" />
            <span>&nbsp;小时&nbsp;</span>
            <el-input-number v-model='form.productionTimeMinutes' placeholder='请输入分钟' :min='0' :max='59'
                           :controls='false' :style="{ width: '50px' }" />
            <span>&nbsp;分钟&nbsp;</span>
          </el-form-item>
          <el-form-item label='车间名称' prop='workshopId'>
            <el-select v-model="form.workshopId" placeholder="请选择车间名称">
              <el-option
                v-for="item in workshopInfoList"
                :key="item.workshopId"
                :label="item.workshopName"
                :value="item.workshopId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label='委外标识' prop='outsourcingFlag'>
            <el-radio-group v-model='form.outsourcingFlag'>
              <el-radio
                v-for='dict in mes_outsourcing_flag'
                :key='dict.value'
                :value='dict.value'
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='工序生产类型' prop='processProductionType'>
            <el-radio-group v-model='form.processProductionType'>
              <el-radio
                v-for='dict in mes_process_production_type'
                :key='dict.value'
                :value='dict.value'
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='领料方式' prop='materialMethod'>
            <el-radio-group v-model='form.materialMethod'>
              <el-radio
                v-for='dict in mes_material_method'
                :key='dict.value'
                :value='dict.value'
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="form-column">
          <el-form-item label='默认产出率（%）' prop='defaultYieldRate'>
            <el-input-number v-model='form.defaultYieldRate' placeholder='请输入默认产出率' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='损耗率（%）' prop='lossRate'>
            <el-input-number v-model='form.lossRate' placeholder='请输入损耗率' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='返修率（%）' prop='reworkRate'>
            <el-input-number v-model='form.reworkRate' placeholder='请输入返修率' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='委外提前期（秒）' prop='leadTime'>
            <el-input-number v-model='form.leadTime' placeholder='请输入委外提前期' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='准备时间（秒）' prop='setupTime'>
            <el-input-number v-model='form.setupTime' placeholder='请输入准备时间' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='加工时间（秒）' prop='processingTime'>
            <el-input-number v-model='form.processingTime' placeholder='请输入加工时间' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='拆卸时间（秒）' prop='disassemblyTime'>
            <el-input-number v-model='form.disassemblyTime' placeholder='请输入拆卸时间' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='理论生产节拍（秒/件）' prop='theoreticalCycleTime'>
            <el-input-number v-model='form.theoreticalCycleTime' placeholder='请输入理论生产节拍' :style="{ width: '180px' }" />
          </el-form-item>
          <el-form-item label='质检方式' prop='inspectionMethod'>
            <el-radio-group v-model='form.inspectionMethod'>
              <el-radio
                v-for='dict in mes_inspection_method'
                :key='dict.value'
                :value='dict.value'
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='激活标识' prop='activeFlag'>
            <el-radio-group v-model='form.activeFlag'>
              <el-radio
                v-for='dict in active_flag'
                :key='dict.value'
                :value='dict.value'
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='备注' prop='remark'>
            <el-input v-model='form.remark' placeholder='请输入备注' />
          </el-form-item>
        </div>
      </el-form>

      <!-- 工序资源表格 -->
      <div class="mt-4">
        <div class="mb-2">
          <el-button type="primary" icon="Plus" @click="handleAddResource">新增工序资源</el-button>
        </div>
        <el-table :data="processResourceList" v-loading="resourceLoading">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="指派类型" align="center" prop="assignmentType">
            <template #default="scope">
              <dict-tag :options="mes_assignment_type" :value="scope.row.assignmentType"/>
            </template>
          </el-table-column>
          <el-table-column label="载具工装类型" align="center" prop="toolingTypeCode">
            <template #default="scope">
              <dict-tag :options="tooling_type_code" :value="scope.row.toolingTypeCode"/>
            </template>
          </el-table-column>
          <el-table-column label="必选标识" align="center" prop="requiredFlag">
            <template #default="scope">
              <dict-tag :options="mes_required_flag" :value="scope.row.requiredFlag"/>
            </template>
          </el-table-column>
          <el-table-column label="选择模式" align="center" prop="selectionMode">
            <template #default="scope">
              <dict-tag :options="mes_selection_mode" :value="scope.row.selectionMode"/>
            </template>
          </el-table-column>
          <el-table-column label="是否需要校验" align="center" prop="requiresValidation">
            <template #default="scope">
              <dict-tag :options="mes_requires_validation" :value="scope.row.requiresValidation"/>
            </template>
          </el-table-column>
          <el-table-column label="是否需要准备任务" align="center" prop="requiresPreparation">
            <template #default="scope">
              <dict-tag :options="mes_requires_preparation" :value="scope.row.requiresPreparation"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="修改" placement="top">
                <el-button link type="primary" icon="Edit" @click="handleUpdateResource(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="primary" icon="Delete" @click="handleDeleteResource(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class='dialog-footer'>
          <el-button :loading='buttonLoading' type='primary' @click='submitForm'>确 定</el-button>
          <el-button @click='cancel'>取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 关联产线对话框 -->
    <el-dialog :title='dialog.title' v-model='prodLineOpen' width='700px' append-to-body>
      <el-form ref='baseProcessInfoFormRef' :model='form' label-width='100px'>
        <el-row :gutter='10' class='mb8'>
          <el-col :span='12'>
            <el-form-item label='工序编号' prop='processCode'>
              <el-input v-model='form.processCode' placeholder='请输入工序编号' disabled />
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='工序名称' prop='processName'>
              <el-input v-model='form.processName' placeholder='请输入工序名称' disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position='center'>工序关联产线信息</el-divider>
        <el-row :gutter='10' class='mb8'>
          <el-col :span='1.5'>
            <el-button type='primary' plain icon='Plus' @click='handleAddProdLine'>添加产线</el-button>
          </el-col>
          <el-col :span='1.5'>
            <el-button type='danger' icon='Delete' @click='handleDeleteProdLine'>删除</el-button>
          </el-col>
        </el-row>
        <el-table :data='prodBaseProcessProdlineBoList' :row-class-name='rowProdBaseProcessProdlineIndex'
                  @selection-change='handleProdLineSelectionChange'>
          <el-table-column type='selection' width='50' align='center' />
          <el-table-column label='序号' align='center' prop='index' />
          <el-table-column label='关联产线' align='center' prop='prodLineId'>
            <template #default='scope'>
              <el-select v-model='scope.row.prodLineId' placeholder='请选择关联产线' clearable>
                <el-option
                  v-for='item in prodLineList'
                  :key='item.prodLineId'
                  :label='item.prodLineName'
                  :value='item.prodLineId'
                  :disabled='prodBaseProcessProdlineBoList.some(i =>i.prodLineId === item.prodLineId)'
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class='dialog-footer'>
          <el-button type='primary' @click='submitProdLineForm'>确 定</el-button>
          <el-button @click='cancelProdLine'>取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 关联人员对话框 -->
    <el-dialog :title='dialog.title' v-model='userOpen' width='700px' append-to-body>
      <el-form ref='baseProcessInfoFormRef' :model='form' label-width='100px'>
        <el-row :gutter='10' class='mb8'>
          <el-col :span='12'>
            <el-form-item label='工序编号' prop='processCode'>
              <el-input v-model='form.processCode' placeholder='请输入工序编号' disabled />
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='工序名称' prop='processName'>
              <el-input v-model='form.processName' placeholder='请输入工序名称' disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position='center'>工序关联人员信息</el-divider>
        <el-row :gutter='10' class='mb8'>
          <el-col :span='1.5'>
            <el-button type='primary' plain icon='Plus' @click='handleAddUser'>添加人员</el-button>
          </el-col>
          <el-col :span='1.5'>
            <el-button type='danger' icon='Delete' @click='handleDeleteUser'>删除</el-button>
          </el-col>
        </el-row>
        <el-table :data='prodBaseProcessUserBoList' :row-class-name='rowProdBaseProcessUserIndex'
                  @selection-change='handleUserSelectionChange'>
          <el-table-column type='selection' width='50' align='center' />
          <el-table-column label='序号' align='center' prop='index' />
          <el-table-column label='name' align='center' prop='userName' v-if='false' />
          <el-table-column label='类型' align='center' prop='userType'  >
            <template #default='scope'>
              <el-radio-group v-model='scope.row.userType'>
                <el-radio
                  v-for='dict in mes_user_type'
                  :key='dict.value'
                  :value='dict.value'
                >{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label='关联人员' align='center' prop='userId'>
            <template #default='scope'>
              <el-select v-model='scope.row.userId' filterable placeholder='请选择关联人员' clearable
                         @change='handleSelectUser(scope.row)'>
                <el-option
                  v-for='item in userList'
                  :key='item.userId'
                  :label='item.userName'
                  :value='item.userId'
                  :disabled='prodBaseProcessUserBoList.some(i =>i.userId === item.userId)'
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class='dialog-footer'>
          <el-button type='primary' @click='submitUserForm'>确 定</el-button>
          <el-button @click='cancelUser'>取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 工序资源对话框 -->
    <el-dialog :title="resourceDialog.title" v-model="resourceDialog.visible" width="600px" append-to-body>
      <el-form ref="resourceFormRef" :model="resourceForm" :rules="resourceRules" label-width="140px">
        <el-form-item label="指派类型" prop="assignmentType">
          <el-radio-group v-model="resourceForm.assignmentType">
            <el-radio
              v-for="dict in mes_assignment_type"
              :key="dict.value"
              :value="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="载具工装类型" prop="toolingTypeCode">
          <el-select v-model="resourceForm.toolingTypeCode" placeholder="请选择载具工装类型">
            <el-option
              v-for="dict in tooling_type_code"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="必选标识" prop="requiredFlag">
          <el-radio-group v-model="resourceForm.requiredFlag">
            <el-radio
              v-for="dict in mes_required_flag"
              :key="dict.value"
              :value="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择模式" prop="selectionMode">
          <el-radio-group v-model="resourceForm.selectionMode">
            <el-radio
              v-for="dict in mes_selection_mode"
              :key="dict.value"
              :value="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要校验" prop="requiresValidation">
          <el-radio-group v-model="resourceForm.requiresValidation">
            <el-radio
              v-for="dict in mes_requires_validation"
              :key="dict.value"
              :value="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要准备任务" prop="requiresPreparation">
          <el-radio-group v-model="resourceForm.requiresPreparation">
            <el-radio
              v-for="dict in mes_requires_preparation"
              :key="dict.value"
              :value="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="resourceForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="resourceButtonLoading" type="primary" @click="submitResourceForm">确 定</el-button>
          <el-button @click="cancelResource">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name='BaseProcessInfo' lang='ts'>
import {
  listBaseProcessInfo,
  getBaseProcessInfo,
  delBaseProcessInfo,
  addBaseProcessInfo,
  updateBaseProcessInfo,
  updateBaseProcessInfoUser
} from '@/api/mes/baseProcessInfo';
import { getProdLineList } from '@/api/mes/baseProdLineInfo';
import { getUserList } from '@/api/system/user';
import { getWorkshopList } from '@/api/mes/baseWorkshopInfo';
import {
  BaseProcessInfoVO,
  BaseProcessInfoQuery,
  BaseProcessInfoForm
} from '@/api/mes/baseProcessInfo/types';
import {
  BaseProcessResourceVO,
  BaseProcessResourceQuery,
  BaseProcessResourceForm
} from '@/api/mes/baseProcessResource/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const {
  active_flag,
  process_type,
  mes_outsourcing_flag,
  mes_process_production_type,
  mes_material_method,
  mes_inspection_method,
  mes_assignment_type,
  mes_requires_validation,
  mes_selection_mode,
  tooling_type_code,
  mes_required_flag,
  mes_user_type,
  mes_requires_preparation
} = toRefs<any>(proxy?.useDict(
  'active_flag',
  'process_type',
  'mes_outsourcing_flag',
  'mes_process_production_type',
  'mes_material_method',
  'mes_inspection_method',
  'mes_assignment_type',
  'mes_requires_validation',
  'mes_selection_mode',
  'tooling_type_code',
  'mes_required_flag',
  'mes_user_type',
  'mes_requires_preparation'
));

const baseProcessInfoList = ref<BaseProcessInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

//关联
const prodLineOpen = ref(false);//关联产线对话框
const userOpen = ref(false);//关联人员对话框
const prodLineList = ref([]);//下拉框
const userList = ref([]);//下拉框
const chekedProdLineList = ref<any[]>([]);
const chekedUserList = ref<any[]>([]);
const prodBaseProcessProdlineBoList = ref<any[]>([]);
const prodBaseProcessUserBoList = ref<any[]>([]);

let workshopInfoList = ref([]);

/** 查询车间下拉树结构 */
const getWorkshopListSelect = async () => {
  let res = await getWorkshopList(null);
  workshopInfoList.value = res.data;
};


const queryFormRef = ref<ElFormInstance>();
const baseProcessInfoFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

// 列显隐信息
const columns = ref<FieldOption[]>([
  { key: 0, label: `主键标识`, visible: false },
  { key: 1, label: `租户编号`, visible: false },
  { key: 2, label: `工序编号`, visible: true },
  { key: 3, label: `工序名称`, visible: true },
  { key: 4, label: `工序类别`, visible: true },
  { key: 5, label: `工序顺序`, visible: true },
  { key: 6, label: `单位生产时间`, visible: true },
  { key: 7, label: `车间名称`, visible: true },
  { key: 8, label: `委外标识`, visible: true },
  { key: 9, label: `工序生产类型`, visible: true },
  { key: 10, label: `默认产出率`, visible: true },
  { key: 11, label: `损耗率`, visible: true },
  { key: 12, label: `返修率`, visible: true },
  { key: 13, label: `领料方式`, visible: true },
  { key: 14, label: `委外提前期`, visible: true },
  { key: 15, label: `准备时间`, visible: true },
  { key: 16, label: `加工时间`, visible: true },
  { key: 17, label: `拆卸时间`, visible: true },
  { key: 18, label: `理论生产节拍`, visible: true },
  { key: 19, label: `质检方式`, visible: true },
  { key: 20, label: `激活标识`, visible: true },
  { key: 21, label: `备注`, visible: false },
  { key: 22, label: `创建部门`, visible: false },
  { key: 23, label: `创建人`, visible: false },
  { key: 24, label: `创建时间`, visible: false },
  { key: 25, label: `更新人`, visible: false },
  { key: 26, label: `更新时间`, visible: false }
]);

const initFormData: BaseProcessInfoForm = {
  processId: undefined,
  processCode: undefined,
  processName: undefined,
  processType: undefined,
  processQueue: undefined,
  productionTime: undefined,
  workshopId: undefined,
  outsourcingFlag: undefined,
  processProductionType: undefined,
  defaultYieldRate: undefined,
  lossRate: undefined,
  reworkRate: undefined,
  materialMethod: undefined,
  leadTime: undefined,
  setupTime: undefined,
  processingTime: undefined,
  disassemblyTime: undefined,
  theoreticalCycleTime: undefined,
  inspectionMethod: undefined,
  activeFlag: '1',
  remark: undefined,
  productionTimeDays: 0,
  productionTimeHours: 0,
  productionTimeMinutes: 0,
  prodBaseProcessProdlineBoList: [],
  prodBaseProcessUserBoList: []
};
const data = reactive<PageData<BaseProcessInfoForm, BaseProcessInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    processId: undefined,
    processCode: undefined,
    processName: undefined,
    processType: undefined,
    processQueue: undefined,
    productionTime: undefined,
    workshopId: undefined,
    outsourcingFlag: undefined,
    processProductionType: undefined,
    defaultYieldRate: undefined,
    lossRate: undefined,
    reworkRate: undefined,
    materialMethod: undefined,
    leadTime: undefined,
    setupTime: undefined,
    processingTime: undefined,
    disassemblyTime: undefined,
    theoreticalCycleTime: undefined,
    inspectionMethod: undefined,
    activeFlag: undefined,
    params: {}
  },
  rules: {
    processCode: [
      { required: true, message: '工序编号不能为空', trigger: 'blur' }
    ],
    processName: [
      { required: true, message: '工序名称不能为空', trigger: 'blur' }
    ],
    processType: [
      { required: true, message: '工序类别不能为空', trigger: 'change' }
    ],
    activeFlag: [
      { required: true, message: '激活标识', trigger: 'change' }
    ]
  }
});

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

/** 天小时分钟转换为秒 */
const convertToSeconds = () => {
  const daysInSeconds = form.value.productionTimeDays * 24 * 60 * 60;
  const hoursInSeconds = form.value.productionTimeHours * 60 * 60;
  const minutesInSeconds = form.value.productionTimeMinutes * 60;
  form.value.productionTime = daysInSeconds + hoursInSeconds + minutesInSeconds;
};

/** 秒转换为天小时分钟 */
const convertToTime = () => {
  const totalSeconds = form.value.productionTime;
  const days = Math.floor(totalSeconds / (24 * 60 * 60));
  const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  // 更新到表单中
  form.value.productionTimeDays = days;
  form.value.productionTimeHours = hours;
  form.value.productionTimeMinutes = minutes;
};

/** 查询工序信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listBaseProcessInfo(queryParams.value);
  baseProcessInfoList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};
const cancelUser = () => {
  reset();
  userOpen.value = false;
  prodBaseProcessUserBoList.value = [];
};
const cancelProdLine = () => {
  reset();
  prodLineOpen.value = false;
  prodBaseProcessProdlineBoList.value = [];
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  baseProcessInfoFormRef.value?.resetFields();
};

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

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

/** 多选框选中数据 */
const handleSelectionChange = (selection: BaseProcessInfoVO[]) => {
  ids.value = selection.map(item => item.processId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加工序信息';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: BaseProcessInfoVO) => {
  reset();
  const _processId = row?.processId || ids.value[0];
  const res = await getBaseProcessInfo(_processId);
  // 处理返回数据
  const { prodBaseProcessResourceList, ...sourceData } = res.data as any;
  Object.assign(form.value, sourceData);
  // 设置资源列表
  if (prodBaseProcessResourceList && Array.isArray(prodBaseProcessResourceList)) {
    processResourceList.value = prodBaseProcessResourceList;
  } else {
    processResourceList.value = [];
  }
  convertToTime();
  dialog.visible = true;
  dialog.title = '修改工序信息';
};

/** 提交按钮 */
const submitForm = () => {
  baseProcessInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      convertToSeconds();
      // 将资源列表添加到表单数据中
      const submitData: BaseProcessInfoForm = {
        ...form.value,
        prodBaseProcessResourceList: processResourceList.value
      };

      if (form.value.processId) {
        await updateBaseProcessInfo(submitData).finally(() => buttonLoading.value = false);
      } else {
        await addBaseProcessInfo(submitData).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      chekedProdLineList.value = [];
      form.value.prodBaseProcessProdlineBoList = [];
      prodBaseProcessProdlineBoList.value = [];
      await getList();
    }
  });
};
const submitUserForm = () => {
  baseProcessInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      form.value.prodBaseProcessUserBoList = prodBaseProcessUserBoList.value;
      await updateBaseProcessInfoUser(form.value).finally(() => buttonLoading.value = false);
      proxy?.$modal.msgSuccess('操作成功');
      userOpen.value = false;
      chekedUserList.value = [];
      form.value.prodBaseProcessUserBoList = [];
      prodBaseProcessProdlineBoList.value = [];
      await getList();
    }
  });
};
const submitProdLineForm = () => {

  baseProcessInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;

      form.value.prodBaseProcessProdlineBoList = prodBaseProcessProdlineBoList.value;

      convertToSeconds();
      if (form.value.processId) {
        await updateBaseProcessInfo(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess('操作成功');
      prodLineOpen.value = false;
      chekedProdLineList.value = [];
      form.value.prodBaseProcessProdlineBoList = [];
      prodBaseProcessProdlineBoList.value = [];
      await getList();
    }
  });

};

/** 删除按钮操作 */
const handleDelete = async (row?: BaseProcessInfoVO) => {
  const _processIds = row?.processId || ids.value;
  await proxy?.$modal.confirm('是否确认删除工序信息编号为"' + _processIds + '"的数据项？').finally(() => loading.value = false);
  await delBaseProcessInfo(_processIds);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('mes/baseProcessInfo/export', {
    ...queryParams.value
  }, `baseProcessInfo_${new Date().getTime()}.xlsx`);
};

//打开关联产线对话框
const handleProdLineUpdate = async (row?: BaseProcessInfoVO) => {

  reset();
  const _processId = row?.processId || ids.value[0];
  prodBaseProcessProdlineBoList.value = [];
  const res = await getBaseProcessInfo(_processId);

  form.value = res.data;
  prodLineOpen.value = true;
  prodBaseProcessProdlineBoList.value = res.data.prodBaseProcessProdlineVoList.map((item, index) => ({
    ...item,
    index: index + 1 // 初始化 index
  }));

  dialog.title = '关联产线';
};
const getLineList = async () => {
  const res = await getProdLineList(null);//下拉框可选择
  prodLineList.value = res.data;
};

//打开关联人员对话框
const handleUserUpdate = async (row?: BaseProcessInfoVO) => {

  reset();
  const _processId = row?.processId || ids.value[0];
  prodBaseProcessUserBoList.value = [];
  const res = await getBaseProcessInfo(_processId);
  form.value = res.data;
  userOpen.value = true;
  prodBaseProcessUserBoList.value = res.data.prodBaseProcessUserVoList.map((item, index) => ({
    ...item,
    index: index + 1 // 初始化 index
  }));

  dialog.title = '关联用户';
};
const getUsersList = async () => {
  const res = await getUserList(null);//下拉框可选择
  userList.value = res.data;
};


// 添加关联产线
const handleAddProdLine = () => {
  return prodBaseProcessProdlineBoList.value.push({
    prodLineId: null,
    processId: form.value.processId, // 确保 processId 被正确赋值
    index: prodBaseProcessProdlineBoList.value.length + 1
  });

};

// 删除关联产线
const handleDeleteProdLine = () => {
  if (chekedProdLineList.value.length === 0) {
    proxy?.$modal.msgError('请先选择要删除的工序关联产线数据');
  } else {
    prodBaseProcessProdlineBoList.value = prodBaseProcessProdlineBoList.value
      .filter(item => !chekedProdLineList.value.includes(item.prodLineId))
      .map((item, index) => ({
        ...item,
        index: index + 1 // 更新 index
      }));
  }
};
// 选中关联产线
const handleProdLineSelectionChange = (selection) => {
  chekedProdLineList.value = selection.map(item => item.prodLineId);
};

// 添加关联人员
const handleAddUser = () => {
  prodBaseProcessUserBoList.value.push({
    userId: null,
    processId: form.value.processId, // 确保 processId 被正确赋值
    userType: '1',
    index: prodBaseProcessUserBoList.value.length + 1,
    userName: null
  });
};

// 删除关联人员
const handleDeleteUser = () => {
  if (chekedUserList.value.length === 0) {
    proxy?.$modal.msgError('请先选择要删除的工序关联人员数据');
  } else {
    prodBaseProcessUserBoList.value = prodBaseProcessUserBoList.value
      .filter(item => !chekedUserList.value.includes(item.userId))
      .map((item, index) => ({
        ...item,
        index: index + 1 // 更新 index
      }));
  }
};

const handleUserSelectionChange = (selection) => {
  chekedUserList.value = selection.map(item => item.userId);
};


// 选中关联人员
/*
const handleSelectUser = (row) => {
  const selectedUser = userList.value.find(user => user.userId === row.userId);
  if (selectedUser) {
    row.userName = selectedUser.userName;
  } else {
    row.userName = null;
  }
}
*/
const handleSelectUser = (row) => {
  const selectedUser = userList.value.find(user => user.userId === row.userId);
  console.log(selectedUser);
  if (selectedUser) {
    row.userName = selectedUser.userName;
    // 更新 prodBaseProcessUserBoList 中对应项的 userName
    const userIndex = prodBaseProcessUserBoList.value.findIndex(user => user.userId === row.userId);
    if (userIndex !== -1) {
      prodBaseProcessUserBoList.value[userIndex].userName = selectedUser.userName;
    }
  } else {
    row.userName = null;
  }
};


const rowProdBaseProcessProdlineIndex = ({ row, rowIndex }: { row: any; rowIndex: number }): string => {
  // 根据行数据和行索引返回一个类名字符串
  if (row.someCondition) {
    return 'custom-class';
  }
  return '';
};
const rowProdBaseProcessUserIndex = ({ row, rowIndex }: { row: any; rowIndex: number }): string => {
  // 根据行数据和行索引返回一个类名字符串
  if (row.someCondition) {
    return 'custom-class';
  }
  return '';
};

// 工序资源相关
const processResourceList = ref<BaseProcessResourceVO[]>([]);
const resourceLoading = ref(false);
const resourceButtonLoading = ref(false);
const resourceFormRef = ref<ElFormInstance>();

const resourceDialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initResourceFormData: BaseProcessResourceForm = {
  processResourceId: undefined,
  assignmentType: undefined,
  toolingTypeCode: undefined,
  requiredFlag: undefined,
  selectionMode: undefined,
  requiresValidation: undefined,
  requiresPreparation: undefined,
  remark: undefined
};

const resourceData = reactive<PageData<BaseProcessResourceForm, BaseProcessResourceQuery>>({
  form: {...initResourceFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    processResourceId: undefined,
    assignmentType: undefined,
    toolingTypeCode: undefined,
    requiredFlag: undefined,
    selectionMode: undefined,
    requiresValidation: undefined,
    requiresPreparation: undefined,
    params: {}
  },
  rules: {
    assignmentType: [
      { required: true, message: "指派类型不能为空", trigger: "change" }
    ],
    requiredFlag: [
      { required: true, message: "必选标识不能为空", trigger: "change" }
    ],
    selectionMode: [
      { required: true, message: "选择模式不能为空", trigger: "change" }
    ],
    requiresValidation: [
      { required: true, message: "是否需要校验不能为空", trigger: "change" }
    ],
    requiresPreparation: [
      { required: true, message: "是否需要准备任务不能为空", trigger: "change" }
    ]
  }
});

const { queryParams: resourceQueryParams, form: resourceForm, rules: resourceRules } = toRefs(resourceData);

/** 新增资源按钮操作 */
const handleAddResource = () => {
  resourceForm.value = {...initResourceFormData};
  resourceDialog.visible = true;
  resourceDialog.title = "添加工序资源";
};

/** 修改资源按钮操作 */
const handleUpdateResource = async (row: BaseProcessResourceVO) => {
  resourceForm.value = {...initResourceFormData};
  Object.assign(resourceForm.value, row);
  resourceDialog.visible = true;
  resourceDialog.title = "修改工序资源";
};

/** 删除资源按钮操作 */
const handleDeleteResource = async (row: BaseProcessResourceVO) => {
  await proxy?.$modal.confirm('是否确认删除该工序资源？');
  const index = processResourceList.value.findIndex(item => item.processResourceId === row.processResourceId);
  if (index > -1) {
    processResourceList.value.splice(index, 1);
  }
  proxy?.$modal.msgSuccess("删除成功");
};

/** 提交资源表单 */
const submitResourceForm = () => {
  resourceFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const resourceData: BaseProcessResourceVO = {
        processResourceId: resourceForm.value.processResourceId,
        processId: form.value.processId,
        assignmentType: resourceForm.value.assignmentType,
        toolingTypeCode: resourceForm.value.toolingTypeCode,
        requiredFlag: resourceForm.value.requiredFlag,
        selectionMode: resourceForm.value.selectionMode,
        requiresValidation: resourceForm.value.requiresValidation,
        requiresPreparation: resourceForm.value.requiresPreparation,
        remark: resourceForm.value.remark
      };

      if (resourceForm.value.processResourceId) {
        // 修改资源
        const index = processResourceList.value.findIndex(item => item.processResourceId === resourceForm.value.processResourceId);
        if (index > -1) {
          processResourceList.value[index] = resourceData;
        }
      } else {
        // 新增资源
        processResourceList.value.push(resourceData);
      }
      proxy?.$modal.msgSuccess("操作成功");
      resourceDialog.visible = false;
    }
  });
};

/** 取消资源表单 */
const cancelResource = () => {
  resourceForm.value = {...initResourceFormData};
  resourceDialog.visible = false;
};

onMounted(() => {
  getUsersList();
  getLineList();
  getWorkshopListSelect();// 初始化车间数据
  getList();
});
</script>

<style scoped>
.two-column-form {
  display: flex;
  gap: 20px;
}

.form-column {
  flex: 1;
  min-width: 0;
}

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

:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}

:deep(.el-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>
