<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-input size="mini" v-model="search.printBillCode" placeholder="施工单号" style="width: 200px;" class="filter-item" />
      <el-input size="mini" v-model="search.orderCode" placeholder="订单编号" style="width: 200px;" class="filter-item" />
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-checkbox size="small" @change="checkVoidFlagState" v-model="voidFlagState" label="查询已入库" border></el-checkbox>
      <el-button  size="mini" class="filter-item" type="primary" @click="paperOut">领料</el-button>
      <el-button size="mini" class="filter-item" type="primary" @click="handleMachine">
        查看机台任务
      </el-button>
    </div>
    <div class="hline-table-con">
      <el-table
        class="tb-edit"
        max-height="680"
        highlight-current-row
        :data="tableData"
        tooltip-effect="light"
        v-loading="listLoading"
        style="width: 100%;"
        row-key="id"
        border
        size="mini"
        ref="fileTable"
        @row-click="handleClickTableRow"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          width="45"></el-table-column>
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          width="180px"
          show-overflow-tooltip
          label="辅料名称"
        >
          <template slot-scope="scope">
            {{ scope.row.actualMaterialInfoName }}&nbsp;&nbsp;
          </template>
        </el-table-column>
        <el-table-column
          label="工序名称"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span>{{row.processName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="领用数量"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span>{{row.preOutStockLockQty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单数量"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span>{{row.materialQty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span>{{row.productName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span  style="color: #409EFF;cursor: pointer" @click.stop="getOrderStep(row)">{{row.orderCode}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span @click.stop="printBillCodePrint(row)" style="color: #E6A23C;cursor: pointer">打印&nbsp;&nbsp;</span>
            <span  style="color: #409EFF;cursor: pointer" @click.stop="getPrintStep(row.idPrintBill)">{{row.printBillCode}}</span>

          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="库存数量"-->
<!--          show-overflow-tooltip-->
<!--          width="120px"-->
<!--        >-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{row.stockNum}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="订单名称"
          show-overflow-tooltip
          width="120px"
        >
          <template slot-scope="{row}">
            <span>{{row.orderName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单消息"
          show-overflow-tooltip
          width="200"
        >
          <template slot-scope="{row}">
            <span>{{row.orderMessage}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getTableInfo" />
    </div>
    <el-dialog title="入库单列表" :visible.sync="dialogTableVisibleInner" width="800px">
      <el-table :data="gridDataInner" size="mini" border>
        <el-table-column
          label="名称">
          <template slot-scope="scope">
            <span>{{scope.row.paperInfo.paperName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="入库单号">
          <template slot-scope="scope">
            <span>{{scope.row.stockBill.billCode}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间">
          <template slot-scope="scope">
            <span v-if="scope.row.stockBill.createTime">{{scope.row.stockBill.createTime | getTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="库房名称">
          <template slot-scope="scope">
            <span>{{scope.row.stockBillItemM.stockRoomName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号">
          <template slot-scope="scope">
            <span>{{scope.row.stockBillItemM.printBillCode}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination style="margin-top: 5px" v-show="listData1.total>0" :total="listData1.total" :page.sync="listData1.page" :limit.sync="listData1.pageSize" @pagination="handleBillItem" />
    </el-dialog>
<!--    <el-drawer-->
<!--      title="施工单消息"-->
<!--      :reverse="true"-->
<!--      :visible.sync="memoDrawer"-->
<!--      size="600px">-->
<!--      <order-message @handleAddBreed="handleAddBreed" ref="orderMessage"></order-message>-->
<!--    </el-drawer>-->
    <printbill-detail ref="printbillDetail"></printbill-detail>
    <print-step ref="printStep"></print-step>
    <order-step ref="orderStep"></order-step>
    <div v-show="machinefListVisible"
         style="width: 100%;position: fixed;left: 0px;height: 510px;z-index: 1024;background: #fff;bottom:0px;border-top: 1px solid #ddd;overflow-y: auto;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <machinef-list @closeDrawer="closeDrawer" @searchList="searchList" ref="machinefList"></machinef-list>
    </div>
    <el-dialog
      v-loading="loading"
      title="提示"
      :visible.sync="dialogVisible"
      width="380px">
      <el-button style="margin-left: 120px" plain type="primary" :disabled="paperOutBtn" @click="btnPaperOut">确认领料</el-button>
<!--      <el-button plain type="success" :disabled="paperOutBtn" @click="btnPaperOutPrint">确认领纸并打印施工单</el-button>-->
      <span slot="footer" class="dialog-footer">
<!--      <el-button @click="dialogVisible = false">取 消</el-button>-->

    </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryProcessForPreOutStock,
  requestPaperOut,
  getStockBillItemMList,
  printBillDoPrint,
  materialPicking, materialPreOutBackV2,
} from '@/api/printbill/preOut/preOut.js'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
// import OrderMessage from '@/views/feedBack/orderMessage/orderMessage'
import printStep from "@/components/printbillDetail/printStep";
import OrderStep from '@/components/orderStep/orderStep'
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import machinefList from "@/components/machinefList/machinefList";
import axios from "axios";
import {doLocalPrint} from "@/utils";
export default {
  name: 'CollarPaper',
  components: {
    Pagination,
    PrintbillDetail,
    printStep,
    machinefList,
    OrderStep

  },
  computed: {
    ...mapGetters([
      'name',
      'loginName',
      'userId'
    ])
  },
  data() {
    return {
      loading:false,
      dialogVisible:false,
      machinefListVisible:false,
      voidFlagState:true,
      paperOutBtn:false,
      memoDrawer:false,
      rowData:{},
      dialogTableVisibleInner:false,
      gridDataInner:[],
      typeOptions: [],
      remainingNum: false,
      multipleSelection: [],
      dialogPaperVisible: false,
      paperData: [],
      row: {},
      dialogFormVisible: false,
      form: {},
      tableDataPaper: [],
      scopeIndex: 9998,
      listLoading: false,
      tableData: [],
      search: {
        keyWord: '',
        queryPaperPick: 1,
        idMachineInfo:"",
        printBillCode:"",
        orderCode:""
      },
      ckeckPaperId: false,
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      listData1: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getTableInfo()
  },
  methods: {
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.idOrder
      _that.$refs.orderStep.getOrderStep()
    },
    getPrintStep(id) {
      const _that = this;

      _that.$refs.printStep.idOrder = id;
      _that.$refs.printStep.drawer = true;
      _that.$refs.printStep.getStep();
    },
    printBillCodePrint(row){
      const _that = this;
      var datas = {
        "ids": row.idPrintBill
      }
      printBillDoPrint(datas).then(response => {
        // console.log("printBillDoPrint", response);
        var PrintData = {
          '_rootData': response.data
        }
        // console.log(PrintData);
        var data = {
          PrintTemplate: 'printBill.fr3',
          NeedPreview: 1,
          PrintData: JSON.stringify(PrintData)
        }
        // 以后打印调这个通用接口
        doLocalPrint(data)
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    //获取机台任务
    handleMachine() {
      const _that = this;
      _that.machinefListVisible = true;
      _that.$refs.machinefList.getMachine(_that.$refs.machinefList.activeName, _that.$refs.machinefList.activeIndex);
    },
    searchList(id) {
      const _that = this;
      // console.log(id);
      _that.search.idMachineInfo = id;
      _that.listData.page = 1;
      _that.getTableInfo();
    },
    closeDrawer() {
      this.machinefListVisible = false;
    },
    checkVoidFlagState(){
      this.listData.page = 1;
      this.getTableInfo()
    },
    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail();
    },
    // 订单消息
    // openMessage(row) {
    //   var _that = this
    //   _that.memoDrawer = true;
    //   _that.rowData = row;
    //   _that.$nextTick(function() {
    //     // console.log(_that.$refs.orderMemo);
    //     _that.$refs.orderMessage.idPrint = row.id;
    //     _that.$refs.orderMessage.sMessage = "";
    //     _that.$refs.orderMessage.getList()
    //   })
    // },
    // handleAddBreed(breedMsg){
    //   this.memoDrawer = false;
    //   this.rowData.breedMsg =breedMsg;
    // },

    handleBillItem(row,index){
      const _that = this;
      var data = {
        'params': {
          idPrintBreeds:row.id
        },
        'idBIllDefine':6
      }
      // console.log(data);
      getStockBillItemMList(data).then(response => {
        console.log('tableData', response)
        _that.dialogTableVisibleInner = true;
        const data = response.data;
        _that.gridDataInner = response.data;
        _that.listData1.total = response.total;
      }).catch(err => {
      })
    },

    handleClickTableRow(row, event, column) {
      const _that = this

      _that.$refs.fileTable.toggleRowSelection(row)
    },
    handleSelectionChange(val) {
      var _that = this
      _that.multipleSelection = val
    },
    // 获取表格数据
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      if(_that.voidFlagState){
        var params = {
          searchState:1,
          idCompany: 2,
          queryMaterialPick: 1,
          queryInStock:1,
          printBillCode:_that.search.printBillCode,
          orderCode:_that.search.orderCode
        };
      }else{
        var params = {
          searchState:1,
          idCompany: 2,
          queryMaterialPick: 1,
          queryInStock:0,
          printBillCode:_that.search.printBillCode,
          orderCode:_that.search.orderCode
        };
      }
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        "page": JSON.stringify(page)
      }
      // console.log(data);
      queryProcessForPreOutStock(data).then(response => {
        // console.log('tableData', response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data;
        _that.listLoading = false;
        _that.listData.total = response.total;
      }).catch(err => {
        _that.listLoading = false
      })
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getTableInfo()
    },
    // 序号
    indexMethod(index) {
      return index + 1
    },
    getCodeName(row) {
      return row.printBillCode + '-' + row.breedName
    },
    // 刷新表格
    tableRefresh() {
      // 刷新变革
      this.getTableInfo()
    },
    btnPaperOut(){
      // 领纸确定
      var _that = this;
      _that.loading = true;
      _that.paperOutBtn = true;
      var breedIds = []
      _that.multipleSelection.forEach(item => {
        breedIds.push(item.idOrderProcess)
      })
      // console.log(_that.multipleSelection);
      // console.log(breedIds);

      var data = {
        'idProcesses': breedIds.join(','),
        'idCompany':2
      }
      // console.log(data);
      materialPicking(data).then(response => {
        // console.log(response)
        if (response.httpCode == 200) {
          _that.$message({
            message: '领料成功',
            type: 'success'
          })
          _that.$refs.fileTable.clearSelection();
          _that.multipleSelection = [];
          _that.listData.page = 1;
          _that.dialogVisible = false;
          _that.paperOutBtn = false;
          _that.loading = false;
          _that.tableRefresh()

        }
      }).catch(err => {
        _that.paperOutBtn = false;
        _that.dialogVisible = false;
        _that.loading = false;
        // _that.$message.error(err)
      })
    },
    btnPaperOutPrint(){
      var _that = this;
      _that.paperOutBtn = true;
      _that.loading = true;
      // 领纸确定并打印
      var breedIds = [];
      var breedPrintIds = [];
      _that.multipleSelection.forEach(item => {
        breedIds.push(item.id)
        breedPrintIds.push(item.idPrintBill)
      })
      // console.log(_that.multipleSelection);
      // console.log(breedIds);

      var data = {
        'breedIds': breedIds.join(',')
      }
      // console.log(data);
      requestPaperOut(data).then(response => {
        // console.log(response)
        if (response.httpCode == 200) {

          var parms = {
            'ids': breedPrintIds.join(',')
          }
          // console.log(data);
          printBillDoPrint(parms).then(response => {
            // console.log(response)
            var PrintData = {
              '_rootData':response.data
            }
            var data = {
              PrintTemplate: 'printBill.fr3',
              NeedPreview: 1,
              PrintData: JSON.stringify(PrintData)
            }
            // 以后打印调这个通用接口
            doLocalPrint(data);
            _that.paperOutBtn = false;
            _that.$message({
              message: '领纸并打印成功',
              type: 'success'
            })
            _that.dialogVisible = false;
            _that.paperOutBtn = false;
            _that.loading = false;
            _that.$refs.fileTable.clearSelection();
            _that.multipleSelection = [];
            _that.listData.page = 1;
            _that.tableRefresh()
          }).catch(err => {
            _that.paperOutBtn = false;
            _that.dialogVisible = false;
            _that.loading = false;
            // _that.$message.error(err)
          })
        }
      }).catch(err => {
        _that.dialogVisible = false;
        _that.paperOutBtn = false;
        // _that.$message.error(err)
      })
      // console.log(_that.multipleSelection);
      // console.log(breedIds);


    },

    // 领纸
    paperOut() {
      var _that = this;
      if (_that.multipleSelection.length < 1) {
        _that.$message.error('请选择订单')
        return
      }
      _that.dialogVisible = true;
    }

  }
}
</script>
<style>
.hline-table-con .el-table .cell {
}

.hline-table-con .el-table .warning-row {
  background: #cde6c7;
}

.hline-table-con .el-table .success-row {
  background: #f0f9eb;
}

.hline-table-con .el-table .danger-row {
  background: #f8aba6;
}

.hline-table-con .el-table .cell {

}

/*.hline-tabletr{pointer-events: none; }*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>

<style lang="scss" scoped>
.app-container {
  //background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.filter-container {
  margin-bottom: 15px;
}
.tb-edit .el-input {
  display: none
}

.tb-edit .current-row .el-input {
  display: block
}

.tb-edit .current-row .el-input + span {
  display: none
}
.itemRoom{
  border-bottom: 1px solid #ddd;
}

</style>
