<template>
  <el-dialog v-model="props.modelValue" :title="props.title" @close="close" width="800">
    <el-form ref="formRef" :inline="true" :model="props.form" :rules="rules" class="demo-form-inline"
      label-width="100px">
      <el-form-item :label="tLang('product', '产品编码')" prop="code">
        <el-input v-model="props.form.code" :disabled="Boolean(props.form.disabled)"
          :placeholder="tLang('common', '请输入') + tLang('product', '产品编码')" />
      </el-form-item>
      <el-form-item :label="tLang('product', '产品名称')" prop="name">
        <el-input v-model="props.form.name" :placeholder="tLang('common', '请输入') + tLang('product', '产品名称')" />
      </el-form-item>
      <el-form-item :label="tLang('product', '产品类型')" prop="type">
        <el-input v-model="props.form.type" :placeholder="tLang('common', '请输入') + tLang('product', '产品类型')" />
      </el-form-item>
      <el-form-item :label="tLang('product', '针管理')">
        <el-button type="primary" icon="Plus" circle @click="handleAddNeedle" />
      </el-form-item>
      
      <el-table :data="props.form.needle" style="margin-bottom: 15px;">
        <el-table-column type="index" :label="tLang('product', '针号')" width="60" align="center" />
        <el-table-column :label="tLang('product', '面线信息')" align="center" prop="name">
          <template #default="scope">
            <el-input v-model="scope.row.surfacelineCode" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>
        <el-table-column :label="tLang('product', '底线信息')" align="center" prop="type">
          <template #default="scope">
            <el-input v-model="scope.row.bottomlineCode" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>
        <el-table-column :label="tLang('product', '最小张力')" align="center" prop="code">
          <template #default="scope">
            <el-input v-model="scope.row.min" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>
        <el-table-column :label="tLang('product', '最大张力')" align="center" prop="code">
          <template #default="scope">
            <el-input v-model="scope.row.max" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>
        <el-table-column :label="tLang('common', '操作')" align="center" class-name="small-padding fixed-width">
          <template #default="{row,$index}">
            <el-tooltip :content="tLang('common', '删除')" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDeleteNeedle($index)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item :label="tLang('product', '加工次数')">
        <el-button type="primary" icon="Plus" circle @click="handleAddWorking" />
      </el-form-item>
      <el-table :data="props.form.working" style="margin-bottom: 15px;">
        <el-table-column type="index" :label="tLang('product', '第几次')" width="70" align="center" />
        <el-table-column :label="tLang('product', '步骤')" align="center" prop="name">
          <template #default="scope">
            <el-input v-model="scope.row.step" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>
        <el-table-column :label="tLang('product', '最小针数 ')" align="center" prop="type">
          <template #default="scope">
            <el-input v-model="scope.row.min" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>
        <el-table-column :label="tLang('product', '最大针数')" align="center" prop="code">
          <template #default="scope">
            <el-input v-model="scope.row.max" :placeholder="tLang('common', '请输入')" />
          </template>
        </el-table-column>       
        <el-table-column :label="tLang('common', '操作')" align="center" class-name="small-padding fixed-width">
          <template #default="{row,$index}">
            <el-tooltip :content="tLang('common', '删除')" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDeleteWorking($index)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item :label="tLang('product', '备注')" prop="remark">
        <el-input v-model="props.form.remark" style="width: 600px" :rows="4" type="textarea"
          :placeholder="tLang('common', '请输入')" />
      </el-form-item>
      <el-form-item :label="tLang('product', '图片')" prop="file">
        <image-upload v-model="props.form.file" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ tLang('common', '确 定') }}</el-button>
        <el-button @click="cancel">{{ tLang('common', '取 消') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
const emit = defineEmits();
const proxy = getCurrentInstance();
const formRef = ref();
const rules = {
  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入产品编码", trigger: "blur" }],
  type: [{ required: true, message: "请输入产品类型", trigger: "blur" }],
};
const props = defineProps({
  modelValue: [String, Object, Array],
  title: String,
  form: {
    type: Object,
    default: () => ({}),
  },
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;


//添加针号
function handleAddNeedle() {
  let needle = props.form.needle || [];
  needle.push({
    needleNum: needle.length + 1,
    surfacelineCode: "",
    bottomlineCode: "",
    min: "",
    max: "",
  });
  emit("update:form", { ...props.form, needle });
}

//删除针号
function handleDeleteNeedle(i) {
  let needle = props.form.needle || [];
  let length = needle.length;
  needle.splice(i, 1);
  if (needle.length>0 && i != length - 1) {
    needle = needle.map((item, index) => {
      item.needleNum = index + 1;
      return item;
    });
  }
  emit("update:form", { ...props.form, needle });
}

//添加加工次数
function handleAddWorking() {
  const working = props.form.working || [];
  working.push({
    num: working.length + 1,
    step: "",
    min: "",
    max: "",
  });
  emit("update:form", { ...props.form, working });
}

//删除加工次数
function handleDeleteWorking(i) {
  let working = props.form.working || [];
  let length = working.length;
  working.splice(i, 1);
  if (working.length>0 &&i != length - 1) {
    working = working.map((item, index) => {
      item.num = index + 1;
      return item;
    });
  }
  emit("update:form", { ...props.form, working });
}

//验证加工针数
function validateWorking(rule, value, callback) {
  if (value[0].min === "" || value[0].max === "" || value[1].min === "" || value[1].max === "") {
    callback(new Error("请输入加工针数"));
  } else {
    callback();
  }
}
function close() {
  emit("update:modelValue", false);
}
function submitForm() {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("submitForm", props.form);
    }
  });

}
function cancel() {
  emit("update:form", {});
  close();
}
</script>

<style lang="scss" scoped></style>
