<template>
  <el-dialog
    :title="title"
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="700px"
  >
    <el-form
      ref="form"
      label-width="100px"
      :rules="rules"
      :inline="true"
      :model="formData"
    >
      <el-form-item label="BOM编码:" prop="code">
        <el-input
          size="mini"
          placeholder="BOM编码"
          v-model="formData.code"
        ></el-input>
      </el-form-item>

      <el-form-item label="BOM名称:" prop="name">
        <el-input
          size="mini"
          placeholder="BOM名称"
          v-model="formData.name"
        ></el-input>
      </el-form-item>

      <el-form-item label="版本号:" prop="versions">
        <el-input
          size="mini"
          disabled
          placeholder="版本号"
          v-model="formData.versions"
        ></el-input>
      </el-form-item>

      <el-form-item label="状态:" prop="status">
        <el-select
          size="mini"
          style="width: 100%"
          disabled
          v-model="formData.status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusOptions"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">关 闭</el-button>
      <el-button size="small" type="primary" @click="handleSave"
        >确 认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
  import { saveBomTreeList, bomCategoryUpdate } from '@/api/material/BOM.js';
  import { getCode } from '@/api/codeManagement/index.js';
  export default {
    data() {
      return {
        visible: true,
        statusOptions: [
          {
            label: '已停用',
            value: '2'
          },
          {
            label: '已发布',
            value: '1'
          },

          {
            label: '草稿',
            value: '0'
          }
        ],
        formData: {
          code: '',
          name: '',
          versions: '',
          status: '0'
        },
        title: '新建BOM',
        rules: {
          name: [
            {
              required: true,
              message: '请输入BOM名称',
              trigger: 'blur'
            }
          ],
          code: [
            {
              required: true,
              message: '请输入BOM编码',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    props: {
      categoryObj: {
        type: Object,
        default() {
          return {};
        }
      },

      categoryId: {
        type: String,
        default: ''
      },

      categoryName: {
        type: String,
        default: ''
      },

      isEdit: {
        type: Boolean,
        default: false
      }
    },
   async  created() {
      if (this.isEdit) {
        this.title = '编辑BOM';
        this.formData = {
          code: this.categoryObj.code,
          name: this.categoryObj.name,
          versions: this.categoryObj.versions,
          status: this.categoryObj.status,
          id: this.categoryObj.id
        };
      } else {
        this.title = '新建BOM';
        this.formData = {
          code: await getCode('bom_add_code'),
          name: this.categoryName || '',
          versions: '',
          status: '0'
        };
      }
    },

    methods: {
      handleClose() {
        this.$emit('close');
      },

      handleSave() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let param = {
              ...this.formData,
              categoryId: this.categoryId,
              bomType: this.categoryObj.bomType
            };
            let URL = this.isEdit ? bomCategoryUpdate : saveBomTreeList;
            URL(param).then((res) => {
              this.$message.success(this.isEdit ? '修改成功' : '保存成功');
              this.$emit('close', true);
              this.handleClose();
            });
          } else {
            return false;
          }
        });
      }
    }
  };
</script>

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