<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogTaskLabel')" prop="taskCode">
        <el-input  disabled v-model="formData.taskCode" :placeholder="t('ProductionPlan.Plan.detailDialogTaskPlaceholder')" />
      </el-form-item>
      <!-- <el-form-item label="明细项" prop="taskId">
        <el-select
          disabled
          v-model="formData.taskDetailId"
          clearable
          filterable
          placeholder="请选择"
          @change="handleTaskDetailChange"
        >
          <el-option
            v-for="item in taskDetailList"
            :key="item.id"
            :label="item.productName+'-未计划:'+(item.number-item.planNumber)"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogProductLabel')" prop="productName">
        <el-input  disabled v-model="formData.productName" :placeholder="t('ProductionPlan.Plan.detailDialogProductPlaceholder')" />
      </el-form-item>
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogCodeLabel')" prop="code">
        <el-input  disabled v-model="formData.code" :placeholder="t('ProductionPlan.Plan.detailDialogCodePlaceholder')" />
      </el-form-item>   
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogFeedingPipelineLabel')" prop="feedingPipelineName">
        <el-input  disabled v-model="formData.feedingPipelineName" :placeholder="t('ProductionPlan.Plan.detailDialogFeedingPipelinePlaceholder')" />
      </el-form-item>
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogWorkerLabel')" prop="worker">
        <el-input  disabled v-model="formData.worker" :placeholder="t('ProductionPlan.Plan.detailDialogWorkerPlaceholder')" />
      </el-form-item>
<!--      <el-form-item label="产品" prop="productId">-->
<!--        <el-select-->
<!--          :disabled='editDisable'-->
<!--          v-model="formData.productId"-->
<!--          clearable-->
<!--          filterable-->
<!--          placeholder="请选择产品"-->
<!--          class="!w-1/1"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="item in productList"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPlanNumberLabel')" prop="planNumber">
        <el-input disabled v-model="formData.planNumber"  />
      </el-form-item>
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPreProductionLabel')" prop="isPreProduction">
        <el-radio-group disabled v-model="formData.isPreProduction">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.MES_PRE_PRODUCTION)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="热压数量" prop="reyaNumber">
        <el-input v-model="formData.reyaNumber" />
      </el-form-item> -->
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPlanStartLabel')" prop="planStartTime">
        <el-date-picker
          disabled
          v-model="formData.planStartTime"
          type="date"
          value-format="x"
          :placeholder="t('ProductionPlan.Plan.detailDialogPlanStartPlaceholder')"
        />
      </el-form-item>
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogPlanEndLabel')" prop="planEndTime">
        <el-date-picker
          disabled
          v-model="formData.planEndTime"
          type="date"
          value-format="x"
          :placeholder="t('ProductionPlan.Plan.detailDialogPlanEndPlaceholder')"
        />
      </el-form-item>
      <!-- <el-form-item label="班别" prop="groupType">
        <el-radio-group v-model="formData.groupType">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.MES_GROUP_TYPE)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item :label="t('ProductionPlan.Plan.detailDialogRemarkLabel')" prop="remark">
        <el-input disabled type="textarea" v-model="formData.remark" :placeholder="t('ProductionPlan.Plan.detailDialogRemarkPlaceholder')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <!-- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> -->
      <el-button @click="dialogVisible = false">{{ t('ProductionPlan.Plan.detailDialogCloseButtonText') }}</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">

import { PlanApi, PlanVO } from '@/api/mes/plan'

import { TaskApi, TaskDetailVO, TaskVO} from "@/api/mes/task";

import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";

/** 生产计划 表单 */
defineOptions({ name: 'PlanDetail' })

const taskList = ref<TaskVO[]>([]) // 用户列表
const taskDetailList = ref<TaskDetailVO[]>([]) // 用户列表


const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const editDisable = ref(false) // 编辑状态禁用

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  code: undefined,
  productId: undefined,
  taskDetailId: undefined,
  taskId: undefined,
  planNumber: undefined,
  reyaNumber: undefined,
  finishNumber: undefined,
  status: undefined,
  planStartTime: undefined,
  planEndTime: undefined,
  startTime: undefined,
  endTime: undefined,
  productionManagerId: undefined,
  remark: undefined,
  groupType: undefined,
  isEnable: undefined,
  feedingPipeline: undefined,
  feedingPipelineName: undefined,
  workerId: undefined,
  worker: undefined,
  isPreProduction: undefined,
  productName: undefined,
  taskCode: undefined
})

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('ProductionPlan.Plan.detailDialogTitle')
  // formType.value = type
  editDisable.value = false
  resetForm()
  formData.value = await PlanApi.getPlan(id)
  console.log(formData.value)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    code: undefined,
    productId: undefined,
    taskDetailId: undefined,
    taskId: undefined,
    planNumber: 0,
    finishNumber: 0,
    status: undefined,
    planStartTime: undefined,
    planEndTime: undefined,
    startTime: undefined,
    endTime: undefined,
    productionManagerId: undefined,
    remark: undefined,
    groupType: undefined,
    isEnable: undefined,
    isPreProduction: 0,
    feedingPipelineName: undefined,
    worker: undefined,
  }
  formRef.value?.resetFields()
}

</script>
