<template>
  <div class="app-container">
    <!-- 搜索部分 -->
    <div>
      <el-form :model="search" inline v-show="search.showSearch">
        <el-form-item label="产品编码 ">
          <el-input v-model="search.productCode" placeholder="输入产品编号"></el-input>
        </el-form-item>
        <el-form-item label="产品名称 ">
          <el-input v-model="search.productName" placeholder="输入产品名称"></el-input>
        </el-form-item>
        <el-button icon="el-icon-search" circle @click="getList"></el-button>
      </el-form>
    </div>
    <div>
      <el-row :gutter="2">
        <el-col :span="1.5">
          <el-button type="primary" size="small" @click="addItem">新增</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="search.showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table
        :data="table.bomList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="productCode" label="产品编码" sortable width="180"> </el-table-column>
        <el-table-column prop="productName" label="产品名称" sortable> </el-table-column>
        <el-table-column prop="productType" label="零件类型"> </el-table-column>
        <el-table-column prop="productPosition" label="来源"> </el-table-column>
        <el-table-column prop="requireNum" label="需求数量"> </el-table-column>
        <el-table-column prop="unitId" label="单位"> </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="updataItem(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <vxe-pager
        background
        :current-page.sync="pagination.pageNum"
        :page-size.sync="pagination.pageSize"
        :total="pagination.total"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="getList"
      >
      </vxe-pager>
    </div>

    <!-- 弹窗-- 修改和删除 -->
    <el-dialog :title="DMLdialog.title" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
      <el-form ref="DMLdialog" :model="DMLdialog.form" label-width="150px" label-position="left" :rules="DMLdialog.rules">
        <el-form-item label="父级产品code " prop="parentProductId" id="test">
          <el-select
            id="autocomplete"
            v-model="DMLdialog.form.parentProductId"
            filterable
            remote
            clear
            placeholder="请输入父级产品"
            :remote-method="ParentProduct_querySearchAsync"
            :loading="DMLdialog.loading"
          >
            <el-option label="无" :value="0"></el-option>
            <el-option
              v-for="item in DMLdialog.ParentProductOptions"
              :key="item.id"
              :label="item.productCode + '|' + item.productName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品编码 " prop="productCode">
          <el-input v-model="DMLdialog.form.productCode" placeholder="输入产品编码" :disabled="DMLdialog.isUpdate"></el-input>
        </el-form-item>

        <el-form-item label="产品名称 " prop="productName">
          <el-input v-model="DMLdialog.form.productName" placeholder="输入产品名称"></el-input>
        </el-form-item>

        <el-form-item label="安全库存 " prop="safetyStock">
          <el-input v-model="DMLdialog.form.safetyStock" placeholder="输入产品安全库存" type="Number"></el-input>
        </el-form-item>

        <el-form-item label="位置 " prop="productPosition">
          <el-input v-model="DMLdialog.form.productPosition" placeholder="输入安全位置"></el-input>
        </el-form-item>

        <el-form-item label="需求数量 " prop="requireNum">
          <el-input v-model="DMLdialog.form.requireNum" placeholder="输入需求数量" type="Number"></el-input>
        </el-form-item>
        <el-form-item label="数量单位 " prop="unitId">
          <el-select v-model="DMLdialog.form.unitId" placeholder="选择需求数量单位">
            <el-option v-for="item in DMLdialog.unitList" :key="item.id" :label="item.measureCode" :value="item.measureId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBomList, getBOMQuery, insertbom, updatebom, delbom, getunitList } from '@/api/basisManagement/bom.js'
export default {
  name: 'bom',
  data() {
    return {
      //搜索框配置
      search: {
        productCode: '',
        productName: '',
        showSearch: true,
      },
      //表格
      table: {
        loading: true,
        bomList: [],
      },
      //分页
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //新增修改数据项配置
      DMLdialog: {
        title: '',
        visiable: false,
        form: {
          productCode: '',
          productName: '',
          productType: '',
          safetyStock: 1000,
          productPosition: '',
          requireNum: 1000,
          unitId: null,
          parentProductId: '',
        },
        unitList: [],
        rules: {
          productCode: [{ required: true, message: '产品编码不能为空', trigger: 'blur' }],
          productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
        },
        loading: false,
        ParentProductOptions: [], //父产品列表
        isUpdate: false, // 更新时，产品code不可修改
      },
      //修改按钮
      updateDisable: true,
      //删除按钮
      delDisable: true,
      flag: 'update', //区分修改和删除
    }
  },
  mounted() {
    this.getList()
    this.getUnitOptionList()
    this.ParentProduct_querySearchAsync('')
  },
  methods: {
    //获取表格数据
    getList() {
      const query = { ...this.search, ...this.pagination }
      delete query.showSearch
      getBomList(query).then((res) => {
        if (res.code == 200) {
          this.table.loading = false
          this.pagination.total = res.data.item1
          this.table.bomList = res.data.item2
        }
      })
    },
    //获取车间
    getWorkshopOption() {
      getWorkshopList().then((res) => {
        if (res.code == 200) this.DMLdialog.workshopOption = res.data
      })
    },

    //行更新
    handleUpdate(row) {},
    //行删除
    handleDelete(row) {},
    selectChangeEvent({ checked }) {
      const records = this.$refs.xTable1.getCheckboxRecords()
      if (records.length == 1) {
        this.updateDisable = false
      } else {
        this.updateDisable = true
      }
      if (records.length > 0) {
        this.delDisable = false
      } else {
        this.delDisable = true
      }
    },
    //新增按钮
    addItem() {
      this.DMLdialog.title = '新增'
      this.DMLdialog.visiable = true
      this.flag = 'add'
    },
    //新增确认
    submitForm() {
      if (this.flag == 'update') {
        updatebom(this.DMLdialog.form).then((res) => {
          if (res.code == 200 && res.data == 1) {
            this.$notify.success('修改成功')

            this.DMLdialog.visiable = false
          } else {
            this.$notify.error('修改失败')
          }
          this.getList()
          this.reset()
          this.DMLdialog.isUpdate = false
        })
      } else if (this.flag == 'add') {
        this.$refs['DMLdialog'].validate((valid) => {
          if (valid) {
            insertbom(this.DMLdialog.form).then((res) => {
              if (res.code == 200 && res.data == 1) {
                this.$notify.success('新增成功')
              } else {
                this.$notify.error('新增失败')
              }
              this.getList()
              this.DMLdialog.visiable = false
              this.reset()
            })
          }
        })
      }
    },
    cancel() {
      this.DMLdialog.visiable = false
      this.reset()
      this.DMLdialog.isUpdate = false
    },
    reset() {
      this.DMLdialog.form = {
        productCode: '',
        productName: '',
        productType: '',
        safetyStock: 1000,
        productPosition: '',
        requireNum: 1000,
        unitId: null,
        parentProductId: '',
      }

      this.resetForm('DMLdialog')
    },
    //修改事件
    updataItem(index, row) {
      console.log(row)
      this.DMLdialog.title = '修改'
      this.DMLdialog.visiable = true
      this.flag = 'update'
      this.DMLdialog.isUpdate = true
      this.DMLdialog.form.productCode = row.productCode
      this.DMLdialog.form.productName = row.productName
      this.DMLdialog.form.productType = row.productType
      this.DMLdialog.form.safetyStock = row.safetyStock
      this.DMLdialog.form.productPosition = row.productPosition
      this.DMLdialog.form.requireNum = row.requireNum
      this.DMLdialog.form.unitId = row.unitId
      this.DMLdialog.form.parentProductId = row.parentProductId
    },
    //删除事件
    deleteItem(index, row) {
      this.$modal
        .confirm('是否确认删除产品名称为"' + row.productName + '"的数据项？')
        .then(function () {
          const array = []
          array.push(row.id)
          return delbom(array)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    // 父级产品远程搜索
    ParentProduct_querySearchAsync(queryString) {

      if (queryString != '') this.DMLdialog.loading = true
      getBOMQuery({ queryString: queryString }).then((res) => {
        if (res.code == 200) {
          this.DMLdialog.loading = false
          const result = []
          if (res.data.length > 0) {
            res.data.forEach((element) => {
              result.push({ id: element.id, productCode: element.productCode, productName: element.productName })
            })
          }
          this.DMLdialog.ParentProductOptions = result
        }
      })
    },

    // 获取 unit
    getUnitOptionList() {
      getunitList().then((res) => {
        if (res.code == 200) {
          const result = []
          res.data.forEach((item, index) => {
            result.push({
              id: index,
              measureId: item.measureId,
              measureCode: item.measureCode,
            })
          })
          this.DMLdialog.unitList = result
        } else {
          this.$notify.warning('code:' + res.code)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.delred {
  ::v-deep .el-icon-delete {
    color: #f56c6c;
  }

  ::v-deep span {
    color: #f56c6c;
  }
}
#test {
  ::v-deep .el-autocomplete {
    width: 100%;
  }
}
::v-deep .el-select {
  width: 100%;
}
</style>
