<template>
  <el-dialog
    title="产品信息"
    height="400px"
    v-model="visible"
    width="750px"
    append-to-body
    draggable
  >
    <div class="form-container">
      <!-- 主表 -->
      <el-form
        ref="productRef"
        class="master-container"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="客户集团简称" prop="companyAlias">
              <el-input
                v-model.trim="form.companyAlias"
                placeholder="客户集团简称"
              />
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <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>
            </el-form-item>
            <el-form-item label="轴类型大类" prop="shaftBroadCategoryCode">
              <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>
            </el-form-item>
            <el-form-item label="料号" prop="productCode">
              <el-input
                v-model.trim="form.productCode"
                placeholder="请输入料号"
              />
            </el-form-item>
            <el-form-item label="规格" prop="specification">
              <el-input
                v-model.trim="form.specification"
                placeholder="请输入规格,不允许出现下划线_"
              />
            </el-form-item>
            <el-form-item label="成品长度" prop="lenght">
              <el-input-number
                v-model="form.lenght"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="厚度" prop="thickness">
              <el-input-number
                v-model="form.thickness"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="产品状态" prop="productStatusCode">
              <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>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户代号" prop="companyCode">
              <el-input
                v-model.trim="form.companyCode"
                placeholder="请输入客户代号"
              />
            </el-form-item>
            <el-form-item label="轴类型" prop="shaftCategoryCode">
              <el-input
                v-model.trim="form.shaftCategoryCode"
                placeholder="请输入轴类型"
              />
            </el-form-item>
            <el-form-item label="生产类型" prop="productionTypeCode">
              <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>
            </el-form-item>
            <el-form-item label="图号" prop="drawingNumber">
              <el-input
                v-model.trim="form.drawingNumber"
                placeholder="请输入图号,不允许出现下划线_"
              />
            </el-form-item>
            <el-form-item label="产品描述" prop="description">
              <el-input
                v-model.trim="form.description"
                placeholder="客户简称_图号_规格"
              />
            </el-form-item>
            <el-form-item label="直径" prop="diameter">
              <el-input-number
                v-model="form.diameter"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="预入仓库" prop="preStock">
              <el-input
                v-model.trim="form.preStock"
                placeholder="请输入预入仓库"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model.trim="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </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 { getProduct, saveProduct } from "@/api/business/product";
const { proxy } = getCurrentInstance();

const emit = defineEmits(["handleSaveSuccess"]);

/** 字典数组区 */
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 loading = ref(false);
const visible = ref(false);
const data = reactive({
  form: {},
  rules: {
    companyAlias: [
      { required: true, message: "客户集团简称不能为空", trigger: "blur" },
    ],
    type: [{ required: true, message: "类别不能为空", trigger: "change" }],
    shaftBroadCategoryCode: [
      { required: true, message: "轴类型大类不能为空", trigger: "change" },
    ],
    productCode: [{ required: true, message: "料号不能为空", trigger: "blur" }],
    specification: [
      { required: true, message: "规格不能为空", trigger: "blur" },
    ],
    specification: [
      {
        required: true,
        message: "规格,不允许出现下划线_不能为空",
        trigger: "blur",
      },
    ],
    lenght: [{ required: true, message: "成品长度不能为空", trigger: "change" }],
    thickness: [{ required: true, message: "厚度不能为空", trigger: "change" }],
    productStatusCode: [
      { required: true, message: "产品状态不能为空", trigger: "change" },
    ],
    companyCode: [
      { required: true, message: "客户代号不能为空", trigger: "blur" },
    ],
    shaftCategoryCode: [
      { required: true, message: "轴类型不能为空", trigger: "blur" },
    ],
    productionTypeCode: [
      { required: true, message: "生产类型不能为空", trigger: "change" },
    ],
    drawingNumber: [
      {
        required: true,
        message: "图号,不允许出现下划线_不能为空",
        trigger: "blur",
      },
    ],
    description: [{ required: true, message: "产品描述", trigger: "blur" }],
    diameter: [{ required: true, message: "直径不能为空", trigger: "change" }],
    preStock: [
      { 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,
  };
  proxy.resetForm("productRef");
}

/** 提交按钮 */
function handleSave() {
  proxy.$refs["productRef"].validate((valid) => {
    if (valid) {
      saveProduct(form.value).then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("操作成功");
          emit("handleSaveSuccess");
        } else {
          proxy.$modal.msgWarn(res.msg);
        }
        visible.value = false;
      });
    }
  });
}

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