<template>
  <el-dialog title="外协厂信息" height="400px" v-model="visible" width="500px" append-to-body draggable>
    <div class="form-container">
      <!-- 主表 -->
      <el-form ref="formRef" class="master-container" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="外协厂名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入外协厂名称" />
        </el-form-item>
        <el-form-item label="外协厂编码" prop="code">
          <el-input v-model.trim="form.code" placeholder="请输入外协厂编码" />
        </el-form-item>
        <el-form-item label="助记码" prop="mnemonicCode">
          <el-input v-model.trim="form.mnemonicCode" placeholder="请输入助记码" />
        </el-form-item>
        <el-form-item label="外协单价" prop="freightPrice">
          <el-input-number v-model="form.freightPrice" :min="0" :precision="2" controls-position="right" />
        </el-form-item>
        <el-form-item label="默认发货方式" prop="deliveryMethod">
          <el-select v-model="form.deliveryMethod" placeholder="请选择发货方式">
            <el-option v-for="dict in deliveryMethod" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="默认结算方式" prop="settlementType">
          <el-select v-model="form.settlementType" placeholder="请选择结算方式">
            <el-option v-for="dict in settlementType" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="损耗上限(%)" prop="lossLimit">
          <el-input-number v-model="form.lossLimit" :min="0" :max="100" :precision="2" controls-position="right"
            placeholder="请输入损耗上限(%)" />
        </el-form-item>
        <el-form-item label="内部外协" prop="isInnerOutsource">
          <el-switch v-model="form.isInnerOutsource"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1" :inactive-value="0"
            active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </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 { getInfo, save } from "@/api/business/supplier";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
const props = defineProps({
  deliveryMethod: {
    type: Array,
    default: [],
  },
  settlementType: {
    type: Array,
    default: [],
  },
});
/** 产品表单变量 */
const loading = ref(false);
const visible = ref(false);
const data = reactive({
  form: {},
  rules: {
    name: [{ required: true, message: "供应商名称不能为空", trigger: "blur" }],
    code: [{ required: true, message: "供应商编码不能为空", trigger: "blur" }],
    mnemonicCode: [
      { required: true, message: "助记码不能为空", trigger: "blur" },
    ],
  },
});
const { form, rules } = toRefs(data);

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

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

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    mnemonicCode: "",
    deliveryMethod: "1",
    settlementType: "1",
    lossLimit: 0.0,
    freightPrice: 0.0,
    remark: "",
  };
  proxy.resetForm("formRef");
}

/** 提交按钮 */
function handleSave() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      save(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>
