<template>
  <el-dialog title="产品信息" height="400px" v-model="visible" width="600px" append-to-body draggable>
    <div class="form-container">
      <!-- 主表 -->
      <el-form ref="productRef" class="master-container" :model="form" :rules="rules" label-width="90px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="料号" prop="productCode">
              <el-input v-if="editStatus" v-model.trim="form.productCode" placeholder="请输入料号" />
              <span v-else>{{ form.productCode }}</span>
            </el-form-item>
            <el-form-item label="轴类型大类" prop="shaftBroadCategoryCode">
              <template v-if="editStatus">
                <el-select v-model="form.shaftBroadCategoryCode" placeholder="请选择轴类型大类" clearable>
                  <el-option v-for="dict in product_dtype" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </template>
              <template v-else>
                <span>{{ form.shaftBroadCategoryCode }}</span>
              </template>
            </el-form-item>
            <el-form-item label="规格" prop="specification">
              <el-input v-if="editStatus" v-model.trim="form.specification" placeholder="请输入规格,不允许出现下划线_" />
              <span v-else>{{ form.specification }}</span>
            </el-form-item>
            <el-form-item label="客户简称" prop="companyAlias">
              <el-input v-if="editStatus" v-model.trim="form.companyAlias" placeholder="客户集团简称" />
              <span v-else>{{ form.companyAlias }}</span>
            </el-form-item>
            <el-form-item label="直径" prop="diameter">
              <el-input v-if="editStatus" v-model.trim="form.diameter" placeholder="请输入直径" />
              <span v-else>{{ form.diameter }}</span>
            </el-form-item>
            <el-form-item label="厚度" prop="thickness">
              <el-input v-if="editStatus" v-model.trim="form.thickness" placeholder="请输入厚度" />
              <span v-else>{{ form.thickness }}</span>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-if="editStatus" v-model.trim="form.remark" placeholder="请输入备注" />
              <span v-else>{{ form.remark }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预入仓库" prop="preStock">
              <el-input v-if="editStatus" v-model.trim="form.preStock" placeholder="请输入预入仓库" />
              <span v-else>{{ form.preStock }}</span>
            </el-form-item>
            <el-form-item label="轴类型" prop="shaftCategoryCode">
              <el-input v-if="editStatus" v-model.trim="form.shaftCategoryCode" placeholder="基本上=SCLASS" />
              <span v-else>{{ form.shaftCategoryCode }}</span>
            </el-form-item>
            <el-form-item label="图号" prop="drawingNumber">
              <el-input v-if="editStatus" v-model.trim="form.drawingNumber" placeholder="请输入图号,不允许出现下划线_" />
              <span v-else>{{ form.drawingNumber }}</span>
            </el-form-item>
            <el-form-item label="产品描述" prop="description">
              <el-input v-if="editStatus" v-model.trim="form.description" placeholder="客户简称_图号_规格" />
              <span v-else>{{ form.description }}</span>
            </el-form-item>
            <el-form-item label="成品长度" prop="lenght">
              <el-input v-if="editStatus" v-model.trim="form.lenght" placeholder="请输入成品长度" />
              <span v-else>{{ form.lenght }}</span>
            </el-form-item>
            <el-form-item label="客户代号" prop="companyCode">
              <el-input v-if="editStatus" v-model.trim="form.companyCode" placeholder="请输入客户代号" />
              <span v-else>{{ form.companyCode }}</span>
            </el-form-item>
            <el-form-item label="产品状态：" prop="productStatusCode">
              <template v-if="editStatus">
                <el-select v-model="form.productStatusCode" placeholder="请选择产品状态" clearable>
                  <el-option v-for="dict in product_status_code" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </template>
              <template v-else>
                <span>{{ form.shaftBroadCategoryCode }}</span>
              </template>
            </el-form-item>
            <el-form-item label="生产类型" prop="productionTypeCode">
              <template v-if="editStatus">
                <el-select v-model="form.productionTypeCode" placeholder="请选择生产类型" clearable>
                  <el-option v-for="dict in production_type_code" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </template>
              <template v-else>
                <span>{{ form.productionTypeCode }}</span>
              </template>
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <template v-if="editStatus">
                <el-select v-model="form.type" placeholder="请选择类别">
                  <el-option v-for="dict in product_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </template>
              <template v-else>
                <span>{{ form.type }}</span>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSave">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getProduct, saveProduct } from '@/api/business/product'
const { proxy } = getCurrentInstance()
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {}
  }
})
const { getList } = toRefs(props)
/** 字典数组区 */
const { product_type } = proxy.useDict('product_type')
const { product_dtype } = proxy.useDict('product_dtype')
const { product_status_code } = proxy.useDict('product_status_code')
const { production_type_code } = proxy.useDict('production_type_code')
/** 表单抽屉 页变量 */
const title = ref('')
const loading = ref(false)
const visible = ref(false)
const editStatus = ref(false)
const data = reactive({
  form: {},
  rules: {
    // productCode: [{ required: true, message: '料号不能为空', trigger: 'blur' }],
    // preStock: [{ required: true, message: '预入仓库不能为空', trigger: 'blur' }],
    // type: [{ required: true, message: '类别9:成品8:半成品不能为空', trigger: 'change' }],
    // shaftBroadCategoryCode: [{ required: true, message: '轴类型大类A=视窗系统零部件B=动力系统零部件C=车身及底盘系统零部件D=工业精密零部件不能为空', trigger: 'blur' }],
    // shaftCategoryCode: [{ required: true, message: '轴类型=基本上=SCLASS不能为空', trigger: 'blur' }],
    // specification: [{ required: true, message: '规格,不允许出现下划线_不能为空', trigger: 'blur' }],
    // drawingNumber: [{ required: true, message: '图号,不允许出现下划线_不能为空', trigger: 'blur' }],
    // companyAlias: [{ required: true, message: '客户集团简称,产品描述用不能为空', trigger: 'blur' }],
    // description: [{ required: true, message: '=客户简称_图号_规格不能为空', trigger: 'blur' }],
    // diameter: [{ required: true, message: '直径不能为空', trigger: 'blur' }],
    // lenght: [{ required: true, message: '成品长度不能为空', trigger: 'blur' }],
    // thickness: [{ required: true, message: '厚度不能为空', trigger: 'blur' }],
    // companyCode: [{ required: true, message: '客户代号不能为空', trigger: 'blur' }],
    // salesmanCode: [{ required: true, message: '销售员编码不能为空', trigger: 'blur' }],
    // stockKeeperCode: [{ required: true, message: '保管员编码不能为空', trigger: 'blur' }],
    // dispatcherCode: [{ required: true, message: '调度员编号不能为空', trigger: 'blur' }],
    // productStatusCode: [{ required: true, message: '产品状态：NA：正常；CL：不用；OP：封存不能为空', trigger: 'blur' }],
    // productionTypeCode: [{ required: true, message: '生产类型不能为空', trigger: 'blur' }],
    // technicianCode: [{ required: true, message: '技术员编码不能为空', trigger: 'blur' }],
    // creatorCode: [{ required: true, message: '创建者编码不能为空', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(data)

/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset()
  visible.value = true
  loading.value = true
  getProduct(id || 0).then((res) => {
    if (res.data) {
      form.value = res.data
    }
    loading.value = false
  })
}

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

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    tenantId: null,
    productCode: null,
    preStock: null,
    type: null,
    shaftBroadCategoryId: null,
    shaftBroadCategoryCode: null,
    shaftCategoryId: null,
    shaftCategoryCode: null,
    specification: null,
    drawingNumber: null,
    companyAlias: null,
    description: null,
    productionTenantId: null,
    diameter: null,
    lenght: null,
    thickness: null,
    companyId: null,
    companyCode: null,
    salesmanId: null,
    salesmanCode: null,
    stockKeeperId: null,
    stockKeeperCode: null,
    dispatcherId: null,
    dispatcherCode: null,
    remark: null,
    productStatusCode: null,
    productStatusId: null,
    productionTypeId: null,
    productionTypeCode: null,
    technicianId: null,
    technicianCode: null,
    createTime: null,
    creatorCode: null,
    creatorId: null,
    updateTime: null,
    updaterId: null,
    deleted: null,
    version: null
  }
  proxy.resetForm('productRef')
}

/** 提交按钮 */
function handleSave() {
  proxy.$refs['productRef'].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        saveProduct(form.value).then((response) => {
          proxy.$modal.msgSuccess('修改成功')
          visible.value = false
          getList.value()
        })
      } else {
        saveProduct(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增成功')
          visible.value = false
          getList.value()
        })
      }
    }
  })
}

/** 查询表单信息  */
function getForm() {
  loading.value = true
  getProduct(form.value.id).then((response) => {
    loading.value = false
    form.value = response.data
  })
}

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