<template>
  <el-dialog
    v-dialogDrag
    title="精分"
    :visible.sync="open"
    width="1200px"
    append-to-body
    @open="dialogOpen"
    @close="dialogClose"
  >

    <!-- 搜索工作栏 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      size="small"
      label-width="88px"
    >
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="原批次号" prop="batchNumber">
            <el-input v-model="queryParams.batchNumber" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原长度" prop="length">
            <el-input
              v-model="queryParams.length"
              placeholder="请输入原长度"
              disabled
            >
              <template slot="append">(m)</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原宽度" prop="width">
            <el-input
              v-model="queryParams.width"
              placeholder="请输入原宽度"
              disabled
            >
              <template slot="append">(mm)</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 新批操作栏 -->
    <el-card class="mb10">
      <div slot="header" class="clearfix">
        <span>新批</span>
      </div>
      <el-row :gutter="10" class="mb10">
        <el-col :span="6">
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
        <el-col :span="18" class="text-right">
          <el-button
            type="success"
            plain
            size="mini"
            icon="el-icon-check"
            @click="handleSave"
          >保存</el-button>
          <el-button
            type="warning"
            plain
            size="mini"
            icon="el-icon-close"
            @click="handleCancel"
          >取消</el-button>
        </el-col>
      </el-row>
      <!-- 列表 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="list"
        border
        size="mini"
        max-height="250px"
      >
        <el-table-column
          label="新批号"
          align="center"
          prop="batchNumber"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.batchNumber" disabled placeholder="新批次号保存后自动生成" />
          </template>
        </el-table-column>
        <el-table-column
          label="新长度(m)"
          align="center"
          prop="length"
          width="160"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.length"
              style="width: 100%;"
              oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,8})?).*$/g, '$1')"
              @change="lengthChange(scope.row.length,scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="宽度(mm)"
          align="center"
          prop="width"
        />
        <el-table-column
          label="物料批次"
          align="center"
          prop="materialLots"
          show-overflow-tooltip
        />
        <el-table-column label="操作" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="text-danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="mb10">
      <div slot="header" class="clearfix">
        <span>结存</span>
      </div>
      <el-descriptions border size="mini" :column="4">
        <el-descriptions-item label="结存批次">{{ balanceParams.batchNumber }}</el-descriptions-item>
        <el-descriptions-item label="结存长度(m)">{{ balanceParams.length }}</el-descriptions-item>
        <el-descriptions-item label="宽度(mm)">{{ balanceParams.width }}</el-descriptions-item>
        <el-descriptions-item label="物料批次">{{ balanceParams.materialLots }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

  </el-dialog>
</template>

<script>
import { createByLength } from '@/api/wms/inLibrary/slittingOrder'

export default {
  components:
  {
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 列表
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        workOrderNo: null,
        eBillNo: null
      },
      // 结存参数
      balanceParams: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  methods: {
    /** 取消按钮 */
    cancel() {
      this.open = false
      this.reset()
    },
    dialogOpen() {
      this.balanceParams = JSON.parse(JSON.stringify(this.queryParams))
    },
    dialogClose() {
      const { queryParams } = this
      queryParams.pageNo = 1
      queryParams.pageSize = 10
      this.list = []
    },
    // 新增
    handleAdd() {
      this.list.push({
        batchNumber: '',
        length: 0,
        width: this.queryParams.width,
        materialLots: this.balanceParams.materialLots,
        id: this.list.length
      })
    },
    // 删除
    handleDelete(row) {
      const { id } = row
      const index = this.list.findIndex(item => item.id === id)
      this.list.splice(index, 1)
      const totalQty = this.list.reduce((sum, item) => this.getHandleNumber(sum + parseFloat(item.length || 0)), 0)
      this.balanceParams.length = this.getHandleNumber(parseFloat(this.queryParams.length) - parseFloat(totalQty))
    },
    // 小数点问题处理
    getHandleNumber(val) {
      return Math.round((parseFloat(val) * 100000000)) / 100000000
    },
    // 结存长度扣减
    lengthChange(v, row) {
      if (parseFloat(v) > parseFloat(this.balanceParams.length)) {
        this.$modal.msgWarning(`原长度不足!`)
        row.length = null
        return
      }
      const totalQty = this.list.reduce((sum, item) => this.getHandleNumber(sum + parseFloat(item.length || 0)), 0)
      this.balanceParams.length = this.getHandleNumber(parseFloat(this.queryParams.length) - parseFloat(totalQty))
      if (this.balanceParams.length < 0 && totalQty > this.queryParams.length) {
        this.$modal.msgWarning(`原长度不足，当前批次结存长度剩余${this.balanceParams.length}(m)`)
        row.length = null
        return
      }
    },
    // 取消
    handleCancel() {
      this.list = []
      this.$message('您已取消操作!')
      this.open = false
    },
    // 保存
    handleSave() {
      if (this.list.length === 0) {
        this.$modal.msgWarning('请先添加数据再保存！')
        return
      }
      const detail = this.list.map(item => {
        const { length } = item
        return {
          length
        }
      })
      const saveParams = {
        id: this.queryParams.id,
        detail
      }
      createByLength(saveParams).then(res => {
        this.$modal.msgSuccess('保存成功！')
        this.open = false
        this.list = []
        this.$emit('saveAccurate')
      })
    }
  }
}
</script>

