
<template>
  <layout-form>
    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size="small"
      label-width="130px"
      ref="form"
    >
      <el-row>
        <Field
          label="版本编码"
          span="24"
          prop="fullVerCode"
          v-model="fullVerCode"
          disabled
        />

        <el-form-item label="产品BOM">
          <el-input v-model="bomName" prop="bomName" readonly>
            <el-button
              slot="append"
              type="success"
              @click.prevent="selectCategory"
              >选择产品BOM</el-button
            >
          </el-input>
        </el-form-item>

        <Field
          label="公司代号"
          span="8"
          prop="companyCode"
          v-model="form.companyCode"
          :enumData="dict.companyCode"
          type="select"
        />
        <Field
          label="产品ID"
          span="24"
          prop="productId"
          v-model="form.productId"
          hidden
        />
        <Field label="扩展编码" span="8" prop="code" v-model="form.code" />
        <Field
          label="产品形态"
          span="8"
          prop="rdCode"
          v-model="form.rdCode"
          :enumData="dict.rdCode"
          type="select"
        />
        <Field
          label="主迭代号"
          span="8"
          prop="verNum01"
          v-model="form.verNum01"
          :enumData="verNumEnum"
          type="select"
        />
        <Field
          label="次迭代号"
          span="8"
          prop="verNum02"
          v-model="form.verNum02"
          :enumData="verNumEnum"
          type="select"
        />
        <Field
          label="修正迭代号"
          span="8"
          prop="verNum03"
          v-model="form.verNum03"
          :enumData="verNumEnum"
          type="select"
        />
        <!--        <Field
          label="阶段标识"
          span="12"
          prop="stage"
          v-model="form.stage"
          :enumData="dict.stage"
          type="select"
        />
        <Field
          label="阶段号"
          span="12"
          prop="stageNum"
          v-model="form.stageNum"
          :disabled="form.stage === 'R'"
          :enumData="verNumEnum"
          type="select"
        />-->
        <Field
          label="发布人"
          span="12"
          prop="publishUser"
          v-model="form.publishUser"
        />
        <el-col :span="12">
          <el-form-item
            label="预计发布时间"
            prop="publishTime"
            class="my-form-field"
          >
            <slot>
              <el-date-picker
                v-model="form.publishTime"
                type="datetime"
                placeholder="选择日期"
              />
            </slot>
          </el-form-item>
        </el-col>
        <Field
          label="源文件地址"
          span="24"
          prop="sourceFilePath"
          v-model="form.sourceFilePath"
        />
        <Field
          label="源文件标识号"
          span="24"
          prop="sourceFileTag"
          v-model="form.sourceFileTag"
        />
        <Field
          label="发布文件地址"
          span="24"
          prop="publishFilePath"
          v-model="form.publishFilePath"
        />
        <Field
          label="发布文件标识号"
          span="24"
          prop="publishFileTag"
          v-model="form.publishFileTag"
        />
        <Field
          label="发布描述"
          span="24"
          prop="publishDesc"
          v-model="form.publishDesc"
        />
      </el-row>

      <el-dialog
        title="产品BOM"
        :visible.sync="bomDirDialog.visible"
        width="50%"
      >
        <div class="mytree">
          <el-tree
            ref="bomTree"
            :data="data"
            id="el-tree"
            indent="0"
            node-key="id"
            :props="treeProps"
            :load="loadNode"
            highlight-current
            lazy
            :render-content="renderContent"
            @node-click="handleNodeClick"
          >
          </el-tree>
        </div>
      </el-dialog>

      <form-buttons @submit="submitForm" />
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
import { formatterDateDay } from "@/assets/utils/index";
export default {
  mixins: [form],
  created() {},

  methods: {
    beforeRender(data) {
      if (data.entity && data.entity.id) {
        //查询bom tree
        // this.$post("/materia/bom/tree/list", {
        //   id: data.entity.bomId,
        // }).then(({ data }) => {
        //   this.bomName = "[" + data.entity.code + "]";
        // });


        let materiaId = data.entity.materiaId;
        let materiaName = data.entity.name;
        let code=data.entity.code;

        this.$post("/materia/bom/tree/list", {
          "query.code": data.entity.bomCode,
        }).then(({ data }) => {
          if (data.result.length > 0) {
            this.bomName = "[" + data.result[0].code + "]" + data.result[0].name;
          }

         // console.log(data);

          this.$post("/materia/view", {
            id: materiaId,
          }).then(({ data }) => {
            this.bomName = this.bomName + "{" + data.entity.name + "}";
          });

          // this.bomItemTableData = data.result;
          // this.bomTableData = data.bomList;
        });
      }

      return data;
    },
    // 提交表单的前置处理
    beforeSubmit(data) {
      data.publishTime = formatterDateDay(data.publishTime);
      return data;
    },
    panLeft(num) {
      return num < 10 ? "0" + num : num;
    },
    renderContent: function (h, { node, data, store }) {
      return (
        <span>
          <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
          <span style="padding-left: 2px;font-size:14px">{node.label}</span>
        </span>
      );
    },

    selectCategory() {
      this.bomDirDialog.visible = true;
      this.$nextTick(() => {
        this.$post("/materia/bom/tree/getListByParentId", {
          parentId: -1,
          type: 2,
        }).then(({ data }) => {
          this.data = data.result;
        });
      });
    },

    // 生成版本数字
    getVerNum() {
      let ret = Object.keys(Array.from({ length: 100 }));
      return ret;
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        return;
      }
      this.$post("/materia/bom/tree/getListByParentId", {
        parentId: node.data.id,
        //  type:2,
      }).then(({ data }) => {
        resolve(data.result);
      });
    },
    handleNodeClick(data, node, obj) {
      console.log("select bom tree", data);
      this.node = node;

      // this.form.bomId = data.bomId;

      this.bomDirDialog.visible = false;

      //查询当前选择产品树是否包含物料，如果无物料则提示；查询当前产品树下 是否有已存在的待编辑bom如果有则提示

      this.$post("/materia/bom/tree/checkBom", {
        treeId: data.id,
      })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.form.bomCode = data.code;
            this.bomName = data.name;
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
  },
  computed: {
    //产品设计和硬件显示选择物料和BOM
    isDisabledMateriaBom() {
      return !(this.form.rdCode == "P" || this.form.rdCode === "H");
    },
    fullVerCode: function () {
      let codeStr = "";
      if (this.form.companyCode) {
        codeStr += this.form.companyCode;
      }
      if (this.form.bomCode) {
        codeStr += "-" + this.form.bomCode;
      }
      if (this.form.code) {
        codeStr += "." + this.form.code;
      }
      if (this.form.rdCode) {
        codeStr += "-" + this.form.rdCode;
      }
      if (this.form.verNum01 !== "") {
        codeStr += "-" + this.form.verNum01;
      }
      if (this.form.verNum02 !== "") {
        codeStr += "." + this.form.verNum02;
      }
      if (this.form.verNum03 !== "") {
        codeStr += "." + this.form.verNum03;
      }
      // if (this.form.stage !== "" && this.form.stage !== "R") {
      //   codeStr += "." + this.form.stage;
      // }
      // if (this.form.stageNum !== "" && this.form.stage !== "R") {
      //   codeStr += "." + this.form.stageNum;
      // }

      this.form.verCode = codeStr;
      return codeStr;
    },
  },
  data() {
    return {
      productList: [],
      nodeData: {},
      data: [],
      tree: [],
      form: {},
      dict: {},
      bomName: "",
      bomItems: [],
      currProduct: {},
      treeProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
        type: "type",
        icon: "icon",
        bomId: "bomId",
        id: "id",
      },
      bomDirDialog: {
        visible: false,
      },

      verNumEnum: this.getVerNum(),
      toString: ["companyCode", "rdCode", "stage"],
      rules: {
        id: [{ required: true, message: "请输入ID", trigger: "blur" }],
        bomName: [
          {
            required: true,
            message: "请选择BOM",
            trigger: "blur",
          },
        ],
        companyCode: [
          {
            required: true,
            message: "请输入公司代号",
            trigger: "blur",
          },
        ],
        productCode: [
          {
            required: true,
            message: "请输入产品代码",
            trigger: "blur",
          },
        ],
        rdCode: [
          {
            required: true,
            message: "请输入研发类型",
            trigger: "blur",
          },
        ],
        verNum01: [
          {
            required: true,
            message: "请输入主迭代号",
            trigger: "blur",
          },
        ],
        verNum02: [
          {
            required: true,
            message: "请输入次迭代号",
            trigger: "blur",
          },
        ],
        verNum03: [
          {
            required: true,
            message: "请输入修正迭代号",
            trigger: "blur",
          },
        ],
        stage: [
          {
            required: true,
            message: "请选择阶段标识",
            trigger: "blur",
          },
        ],

        code: [
          {
            required: false,
            message: "请输入扩展编码，发布后将添加到产品代码后面",
            trigger: "blur",
          },
          { max: 50, message: "扩展编码长度不得超过50字", trigger: "blur" },
        ],

        // bomId: [
        //   {
        //     required: true,
        //     message: "请选择bom清单",
        //     trigger: "blur",
        //   },
        // ],
        publishUser: [
          {
            required: true,
            message: "请输入版本发布人",
            trigger: "blur",
          },
        ],
        publishTime: [
          {
            required: true,
            message: "请输入版本发布时间",
            trigger: "blur",
          },
        ],
        sourceFilePath: [
          {
            required: true,
            message: "请输入源文件地址",
            trigger: "blur",
          },
        ],
        sourceFileTag: [
          {
            required: false,
            message: "请输入源文件标识号",
            trigger: "blur",
          },
          { max: 50, message: "源文件标识号长度不得超过50字", trigger: "blur" },
        ],
        publishFilePath: [
          {
            required: true,
            message: "请输入发布文件地址",
            trigger: "blur",
          },
        ],
        publishFileTag: [
          {
            required: true,
            message: "请输入发布文件标识号",
            trigger: "blur",
          },
          {
            max: 50,
            message: "发布文件标识号长度不得超过50字",
            trigger: "blur",
          },
        ],

        publishDesc: [
          {
            required: true,
            message: "请输入发布描述",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.mytree /deep/ {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  // .el-tree-node__expand-icon.is-leaf {
  //   display: none;
  // }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
