<!--结构BOM-->
<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <!-- 按钮组 -->
    <div class="btns_box p_d_16">
      <div class="l-button1" @click="getClickBtnGroup('export_bom')">导出BOM</div>
      <div class="l-button1" @click="getClickBtnGroup('save')">保存</div>
    </div>
    <!-- SKU -->
    <div class="search_group p_d_l_r16">
      <el-form>
        <el-form-item label="SKU" class="jg_sku">
          <el-input v-model="data.sku" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="base_table p_d_l_r16">
      <lcBom v-model:BomxzTableData="data.defaultRow" ref="lcbom"></lcBom>
    </div>
  </el-main>
</template>
<script>
import { defineComponent, onMounted, reactive, getCurrentInstance } from "vue-demi"
import { addOrderNumber } from '../../../utils/lc_jx_utils/lc_jx.js'
import { exportlist } from '../../../utils/lc.js'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
export default defineComponent({
  name: 'packingBom',
  setup (props, context) {
    const { proxy } = getCurrentInstance()
    const route = useRoute()
    let data = reactive({
      topBtns: [{ name: '导出BOM', type: 'export_bom', style_self: 'btn_n_drag', color: true }, { name: '保存', type: 'save', style_self: 'btn_n_drag', color: true }],
      defaultRow: [],
      sku: ''
    })
    onMounted(() => {
      getbomlist()
    })
    // 获取skubom清单
    const getbomlist = () => {
      proxy.$http.showLoading(false).get('project/sku/sku_bom', { project_id: route.query.project_id, sku_id: route.query.id, type: 'packing' }).then(res => {
        if (res.errno == 200) {
          data.defaultRow = []
          data.defaultRow = res.data ? res.data : []
          data.sku = route.query && route.query.sku ? route.query.sku : 0
        } else {
          ElMessage({
            type: 'success',
            message: res.errmsg
          })
        }
      })
    }
    const getClickBtnGroup = (type) => {
      // 保存之前要过滤掉没有填物料编码的行
      let savedate = []
      savedate = data.defaultRow ? JSON.parse(JSON.stringify(data.defaultRow)) : []
      if (type == 'save') {
        proxy.$http.showLoading(false).post('project/sku/save_bom', { task_id: route.query && route.query.task_id ? route.query.task_id : '', bom_list: savedate.filter(it => { return it.bom_code }), sku_id: route.query.id, type: 'packing' }).then(res => {
          if (res.errno == 200) {
            ElMessage({
              type: 'success',
              message: '保存成功'
            })
            getbomlist()
          } else {
            ElMessage({
              type: 'error',
              message: res.errmsg
            })
          }
        })
      }
      // 导出bom
      if (type == 'export_bom') {
        exportlist(route.query.id, route.query.project_id, 'packing')
      }
    }
    const getClickBtnType = (type, selRow) => { }
    return {
      data,
      getbomlist,
      getClickBtnGroup,
      getClickBtnType
    }
  }
})
</script>
<style src="../../../assets/style/lc_jx_style/lc_jx_com.scss" scoped lang="scss"></style>
<style src="../../../assets/style/lc_jx_style/lc_jx_bom.scss" scoped lang="scss"></style>
<style scoped lang="scss">
.btns_box {
  display: flex;
  flex-direction: row;
}

.l-button1 {
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid #409eff;
  border-radius: 3px;
  background: #409eff;
  color: #fff;
  font-size: 12px;
  margin-right: 10px;
}

.base_table {
  margin: 0 !important;
}

.jg_sku {
  margin-left: 16px;

  ::v-deep(.el-input__inner) {
    height: 28px;
    font-size: 12px;
  }
}
</style>