<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-dialog title="生产计划表单" v-model="visible" width="800px" append-to-body draggable>
    <div class="form-container">
      <el-form ref="productionFormRef" class="master-container" v-loading="loading" :model="form" label-width="100px">
        <el-form-item label="图纸版本：" label-width="100px">
          <el-select-v2 v-model="form.technologicalProcessId" :options="technologicalVersionList" placeholder="请选择图纸版本" style="width: 120px" @change="handleChangeTechnologicalVersion" />
        </el-form-item>
      </el-form>
      <el-table
      ref="dialogTable"
      :data="processList"
      row-key="id"
      size="small"
      v-loading="loading"
      border
      height="360px"
      header-row-class-name="list-header-row"
      row-class-name="list-row"
    >
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="工序步骤编号" width="100" align="center" prop="processStepNumber"/>
      <el-table-column label="工序编码" align="center" prop="processCode" />
      <el-table-column label="工序简称" align="center" prop="processAlias" />
    </el-table>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="handleSave">确 定</el-button>
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getTechnologicalVersion,getTechnologicalProcessDetailList,updateProductionPlanDetail } from '@/api/business/productionPlanDetail'
import { ref } from 'vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleUpdateSuccess'])
/**工艺版本变更变量 */
const loading = ref(false)
const processLoading = ref(false)
const visible = ref(false)
const detailsRow = ref({})
const processList = ref([])
const technologicalVersionList = ref([])
/**查询对西昂 */
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    technologicalProcessId:null
  }
})

const { queryParams,form } = toRefs(data)

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (data) => {
  reset()
  visible.value = true
  detailsRow.value = proxy.deepClone(data);
  console.log(detailsRow.value)
  form.value.technologicalProcessId = detailsRow.value.technologicalProcessId
  form.value.id = detailsRow.value.id
  form.value.productionPlanDetailId = detailsRow.value.id
  getTechnologicalVersion({productId:parseInt(detailsRow.value.productId)}).then((res)=> {
    if(res.code == 200) {
      technologicalVersionList.value = res.data
      getTechnologicalProcessDetail()
    }
  })
}
// 更改工艺版本
function handleChangeTechnologicalVersion() {
  getTechnologicalProcessDetail()
}
//获得工艺版本列表
function getTechnologicalProcessDetail() {
  processLoading.value = true
  queryParams.value.technologicalProcessId = form.value.technologicalProcessId
   getTechnologicalProcessDetailList(queryParams.value).then((res) => {
    if (res.code == 200) {
      processList.value = res.data
      processLoading.value = false
    }
  })
}

/** 表单重置 */
const reset = () => {
  form.value = {
    id: null,
    technologicalProcessId:null
  }
  proxy.resetForm('productionFormRef')
}


/** 提交按钮 */
const handleSave = () => {
  proxy.$refs['productionFormRef'].validate((valid) => {
    if (valid) {
      //新工艺版本
      for(let i = 0; i < technologicalVersionList.value.length; i++) {
        if(form.value.technologicalProcessId == technologicalVersionList.value[i].value) {
          form.value.technologyVersion = technologicalVersionList.value[i].label
        }
        //旧工艺版本
        if(detailsRow.value.technologicalProcessId == technologicalVersionList.value[i].value) {
          form.value.oldTechnologyVersion = technologicalVersionList.value[i].label
          form.value.oldTechnologicalProcessId = detailsRow.value.technologicalProcessId
        }
      }
      if(form.value.oldTechnologyVersion == form.value.technologyVersion) {
        visible.value = false
      }else{
      updateProductionPlanDetail(form.value).then(res => {
        if(res.code == 200) {
          proxy.$modal.msgSuccess('修改成功')
          emit('handleUpdateSuccess')
          visible.value = false
        }
      })
      }
      console.log(form.value)
}
  })
}

/** 取消按钮 */
const handleCancel = () => {
  visible.value = false
  reset()
}

/** 暴露给父组件的方法 */
defineExpose({
  open
})
</script>
