<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <el-form
      label-width="100px"
      ref="form"
      :rules="rules"
      :model="attributeData"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="父级节点" prop="parentId">
            <selectTree
              ref="tree"
              class="form-ipt"
              size="medium"
              style="width: 100%"
              :value="attributeData.parentId"
              clearable
              :options="bomTreeList"
              @getValue="getTreeValue"
              :props="{
                value: 'id',
                label: 'name',
                children: 'children'
              }"
              :isAll="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="bomType">
            <template>
              <el-select
                style="width: 100%"
                :disabled="true"
                v-model="attributeData.bomType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in bomTypeOptions"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="编码" prop="code">
            <el-input
              placeholder=""
              @click.native="handleProduct()"
              v-model="attributeData.code"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input placeholder="" v-model="attributeData.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="材料" prop="materialsName">
            <el-input
              placeholder=""
              v-model="attributeData.materialsName"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="来源" prop="sourceData">
            <el-input
              placeholder=""
              v-model="attributeData.sourceData"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="bom路线" prop="bomTypeRouting">
            <el-input
              placeholder=""
              v-model="attributeData.bomTypeRouting"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="用量" prop="dosage">
            <el-input placeholder="" v-model="attributeData.dosage"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-input placeholder="" v-model="attributeData.unit"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="物料库路径" prop="materielPath">
            <el-input
              placeholder=""
              v-model="attributeData.materielPath"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remake">
            <el-input
              placeholder=""
              v-model="attributeData.remake"
              type="textarea"
              :rows="2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="save">保存</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>

    <standardOutput
      ref="standardOutputRefs"
      @selection="chooseStandardList"
    ></standardOutput>
  </el-dialog>
</template>

<script>
  import { getBomTreeList, saveBomTreeList } from '@/api/produce/bom.js';

  import selectTree from '@/components/selectTree';

  import userSearch from './user-search.vue';
  import standardOutput from './standardOutput.vue';
  export default {
    name: 'bomTreeDialog',

    components: {
      userSearch,
      selectTree,
      standardOutput
    },

    data() {
      return {
        visible: false,
        title: '添加节点',
        versions: '',
        attributeData: {
          versions: '',
          dosage: 1
        },

        category: {
          name: ''
        },

        rules: {
          code: [{ required: true, message: '请选择编码', trigger: 'change' }],

          name: [{ required: true, message: '请选择名称', trigger: 'change' }],
          dosage: [{ required: true, message: '请输入用量', trigger: 'blur' }]
        },
        bomTreeList: [],

        bomTypeOptions: [
          {
            label: 'PBOM',
            value: '1'
          },
          {
            label: 'MBOM',
            value: '2'
          },
          {
            label: 'ABOM',
            value: '3'
          }
        ]
      };
    },

    methods: {
      getTreeValue(data) {
        this.category = {};
        this.$set(this.attributeData, 'code', null);
        this.$set(this.attributeData, 'name', null);
        if (data) {
          this.attributeData.parentId = data.id;
          this.attributeData.level = +data.level + 1;
        } else {
          this.attributeData.parentId = null;
          this.attributeData.level = null;
        }
      },
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          if (!this.attributeData.parentId) {
            this.attributeData.parentId = 0;
            this.attributeData.level = 1;
          }
          this.attributeData.category = this.category;

          saveBomTreeList(this.attributeData).then((res) => {
            if (res.code == '0') {
              this.$message.success('保存成功');
              this.$emit('reload', this.attributeData.versions);
              this.handleClose();
            }
          });
        });
      },
      versionsChange(versions) {
        this.attributeData.versions = versions;
        this.$forceUpdate();
      },

      handleProduct() {
        this.$refs.standardOutputRefs.open(this.attributeData.parentId ? 1 : 9);
      },
      chooseStandardList(type, data) {
        if (type == 9 || type == 1) {
          this.category = data[0];
          console.log(999, this.category);
          this.attributeData.categoryId = data[0].id;
          this.$set(this.attributeData, 'code', data[0].code);
          this.$set(this.attributeData, 'name', data[0].name);
          this.$set(this.attributeData, 'unit', data[0].measuringUnit);
          this.$forceUpdate();
        }
      },

      async open(type, versions, categoryId, treeId, isTemp) {
        this.attributeData = {
          dosage: 1,
          bomTypeRouting: '',
          unit: '',
          remake: ''
        };
        this.attributeData.bomType = type;

        this.attributeData.versions = versions;
        this.versions = versions;

        const res = await getBomTreeList({
          categoryId,
          versions,
          bomType: type,
          isTemp
        });

        this.bomTreeList = res.data;
        this.attributeData.parentId = treeId;
        this.$forceUpdate();
        this.visible = true;
      },
      handleClose() {
        this.visible = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-form-item {
    margin-bottom: 20px !important;
  }
</style>
