<script>
import {bagOpening, queryBag} from "../../../api/production/bagPrint";
import {packagePrintDataList} from "../../../api/production/generateReport";
import {printPackageLabelNoPreview} from "../print/print_package_label-NOOREVIEW";

export default {
  name:'BagPrint',
  data(){
    return{
      queryParams:{
        bagLabel:'',
        seqNo:'',
        itemNo:'',
        partNo:'',
        partDesc:'',
        status:'',
        parentId:undefined,
        no:1,
        size:50
      },
      total:0,
      dataList:[],
      queryLoading:false,
      bagOpeningVisible:false,
      bagOpeningLoading:false,
      currentRow:{},
      rules:{
        unBagQty:[
          {required:true,message:'请输入拆袋数量',trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    packagePrintDataList(row){
      packagePrintDataList(row).then(({data}) => {
        if (data && data.code === 0) {
          printPackageLabelNoPreview(data.rows);
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
      this.$refs.bagLabel.focus();
    },
    queryBag(){
      this.queryLoading = true
      queryBag(this.queryParams).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.rows;
          this.total = data.total;
        }else {
          this.$message.warning(data.msg);
        }
        this.queryLoading = false
      }).catch((err) => {
        this.$message.error(err);
        this.queryLoading = false
      })
    },
    handleSizeChange(val){
      this.queryParams.size = val;
      this.queryBag()
    },
    handleCurrentChange(val){
      this.queryParams.no = val;
      this.queryBag()
    },
    scanLabelEnter(){
      let arr = this.queryParams.bagLabel.split(";");
      if (arr.length < 5){//site;partNo;qty;seqNo;printId
        if (!arr[3]){
          this.$message.warning("标签jobNo为空")
          return;
        }
        if (!arr[2] || arr[2] === '0'){
          this.$message.warning("数量不存在或是0")
          return;
        }
        if (!arr[1]){
          this.$message.warning("产品编码为空")
          return;
        }
        if (!arr[0]){
          this.$message.warning("site编码为空")
          return;
        }
        this.$message.warning("标签格式错误")
        return
      }
      this.queryParams = {
        bagLabel:'',
        seqNo:arr[3],
        itemNo:arr[4],
        partNo:'',
        partDesc:'',
        status:'',
        parentId:undefined,
        no:1,
        size:this.queryParams.size
      }
      this.queryBag();
    },
    bagOpening(row){
      this.currentRow = {
        ...row,
        unBagQty:1,
      }
      this.bagOpeningVisible = true;
    },
    handleBagOpening(){
      this.$refs.bagFrom.validate((valid,obj) => {
        if (valid){
          bagOpening(this.currentRow).then(({data})=>{
            if (data && data.code === 0) {
              this.$message.success(data.msg)
              this.queryParams.parentId = data.id
              this.queryBag();
              this.bagOpeningVisible = false;
            }else {
              this.$message.warning(data.msg)
            }
          }).catch((error) => {
            this.$message.error(error)
          })
        }else {
          this.$message.warning(obj['unBagQty'][0]['message'])
        }
      })
    },
  },
  watch:{
    queryLoading(newVal,oldVal){
      if (newVal) {
        setTimeout(()=>{
          this.queryLoading = false;
          this.$refs.bagLabel.focus();
        },30000)
      }else {
        this.queryParams.parentId = undefined
        this.$refs.bagLabel.focus();
      }
    },
    bagOpeningVisible(newVal,oldVal){
      if (newVal){
        this.$refs.bagFrom.clearValidate('unBagQty')
      }
    }
  },
  created() {
  },
  mounted() {
    this.queryBag();
  }
}
</script>

<template>
<div>
  <el-form :model="queryParams" label-position="top" style="max-width: 1200px">
    <el-row :gutter="5">
      <el-col :span="3">
        <el-form-item label="袋装标签">
          <el-input ref="bagLabel" v-model="queryParams.bagLabel" clearable @keyup.enter.native="scanLabelEnter"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="产品编码">
          <el-input v-model="queryParams.partNo" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="产品描述">
          <el-input v-model="queryParams.partDesc" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item label="JOB NO.">
          <el-input v-model="queryParams.seqNo" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-form-item label="序号">
          <el-input v-model="queryParams.itemNo" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="状态">
          <el-select v-model="queryParams.status">
            <el-option value="" label="全部"></el-option>
            <el-option value="已入库" label="已入库"></el-option>
            <el-option value="未入库" label="未入库"></el-option>
            <el-option value="已拆袋" label="已拆袋"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label=" ">
          <el-button type="primary" @click="queryBag">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-table :data="dataList" border v-loading="queryLoading" height="calc(100vh - 190px)">
    <el-table-column label="操作" width="100" align="center">
      <template slot-scope="scope">
        <a v-if="scope.row.status === '已入库'" @click="bagOpening(scope.row)">拆袋</a>
        <a @click="packagePrintDataList(scope.row)">补打</a>
      </template>
    </el-table-column>
    <el-table-column label="产品编码" prop="partNo" align="left" header-align="center" min-width="100"/>
    <el-table-column label="产品描述" prop="partDesc" align="left" header-align="center" min-width="160"/>
    <el-table-column label="JOB NO." prop="seqNo" align="left" header-align="center" min-width="80"/>
    <el-table-column label="序号" prop="itemNo" align="left" header-align="center" min-width="60"/>
    <el-table-column label="数量" prop="printQty" align="right" header-align="center" min-width="80"/>
    <el-table-column label="状态" prop="status" align="center" header-align="center" min-width="80"/>
    <el-table-column label="是否发货扫描" prop="status" align="center" header-align="center" width="100">
      <template slot-scope="scope">
        {{scope.row.printId > 0?'Y':'N'}}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" prop="createTime" align="center" header-align="center" min-width="120"/>
  </el-table>


  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="queryParams.no"
    :page-sizes="[50,100, 200, 300, 400]"
    :page-size="queryParams.size"
    layout="total,sizes, prev, pager, next"
    :total="total">
  </el-pagination>

  <el-dialog :visible.sync="bagOpeningVisible" v-drag top="20vh" title="拆袋" width="200px" :close-on-click-modal="false">
    <el-form :model="currentRow" label-position="top" :rules="rules" ref="bagFrom">
      <el-row>
        <el-col :span="24">
          <el-form-item label="拆袋数量" prop="unBagQty" :show-message="false">
            <el-input-number v-model="currentRow.unBagQty" :controls="false" :step="0" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" :loading="bagOpeningLoading" @click="handleBagOpening">确定</el-button>
      <el-button @click="bagOpeningVisible = false">取消</el-button>
    </span>
  </el-dialog>
</div>
</template>

<style scoped>

</style>
