<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-button size="small" class="filter-item" type="danger" plain @click="clickComplete">-->
<!--        生产领料单-->
<!--      </el-button>-->
<!--      <el-button size="small" class="filter-item" type="primary" plain @click="clickPurchaseRequest">-->
<!--        开制请购单-->
<!--      </el-button>-->
<!--      <el-button size="small" class="filter-item"  type="warning" plain @click="clickForceComplete">-->
<!--        不再处理-->
<!--      </el-button>-->
<!--      <el-checkbox size="small" @change="checkVoidFlagState" v-model="voidFlagState" label="已做预出库" border></el-checkbox>-->
    </div>
    <div class="table-con rowHoverNone">
      <el-table
        size="mini"
        ref="stockItemTable"
        @row-click="handleClickTableRow"
        :row-class-name="tableRowClassName"
        :data="tableData"
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
      >
        <el-table-column
            label="#"
            align="center"
            type="index"
            :index="indexMethod">
        </el-table-column>
        <el-table-column label="操作" align="left" width="400" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button :disabled="btnDisable" size="mini" v-if="scope.row.preOutLockState!=1" @click="lockPreOutPrint(scope.row.idOrderProcess,scope.row,scope.$index)" type="primary">
              锁定
            </el-button>
            <el-button v-if="scope.row.preOutLockState==1" @click="unlockPreOutPrint(scope.row.idOrderProcess,scope.row,scope.$index)" type="warning" size="mini">
              解锁
            </el-button>
            <el-button :disabled="scope.row.preOutLockState!=1 || scope.row.preOutLockManId != $store.state.user.userId" size="small" class="filter-item" type="success" plain @click="clickComplete(scope.row,scope.$index)">
              完成
            </el-button>
            <el-button :disabled="scope.row.preOutLockState!=1 || scope.row.preOutLockManId != $store.state.user.userId" size="small" class="filter-item" type="primary" plain @click="clickPurchaseRequest(scope.row,scope.$index)">
              开制请购单
            </el-button>
            <el-button :disabled="scope.row.preOutLockState!=1 || scope.row.preOutLockManId != $store.state.user.userId" size="small" class="filter-item"  type="warning" plain @click="clickForceComplete(scope.row.idOrderProcess,scope.$index)">
              不再处理
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="工序名称"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.processName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="辅料名称"
          width="180px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span @click="openStockDialog(scope.$index,scope.row)" style="color: #409EFF;cursor: pointer" v-if="scope.row.preOutLockState==1" size="mini" round>选择&nbsp;&nbsp;</span><span>{{scope.row.actualMaterialInfoName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="工序备注"
          width="120px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{scope.row.processMemo}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="领用数量"
          width="120px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
<!--            <span>{{scope.row.materialQty}}</span>-->
            <el-input
              v-if="scope.row.preOutLockState==1"
              v-show="scope.row.idOrderProcess==indexRowId"
              size="mini"
              style="display: inline-block;width: 70px"
              v-model.trim="scope.row.materialQty"
              placeholder="请输入内容"
              @blur="handleBlur(scope.row.idOrderProcess, scope.row.materialQty,scope.row)"></el-input>
            <span v-show="indexRowId!=scope.row.idOrderProcess">{{ scope.row.materialQty }}</span>
            <span v-show="indexRowId!=scope.row.idOrderProcess" @click="handleEdit(scope.row.idOrderProcess,scope.row)" style="color: #409EFF;cursor: pointer" v-if="scope.row.preOutLockState==1" size="mini" round>&nbsp;&nbsp;修改</span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          label="当前库存量"-->
<!--          width="80px"-->
<!--          show-overflow-tooltip-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.stockNum}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="订单编号"
          width="145px"
        >
          <template slot-scope="{row}">
            <a href="javascript:;" style="color: #20a0ff" @click.stop="getOrderStep(row)">{{ row.orderCode }}</a>
            <span v-if="row.orderBusinessKind==3"
                  style="display: inline-block;color: red">(补{{ row.orderRePrintIndex }})</span>
            <el-image v-if="row.firstOrderFlag == 1" :src="new_badge"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号"
          width="100px"
        >
          <template slot-scope="{row}">
            <span>{{ row.printBillCode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.productName}}</span>

          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="印品名称"
          width="150px"
        >
          <template slot-scope="{row}">
            <a href="javascript:;" style="color: #20a0ff" @click.stop="openOrderDetail(row)">{{
                row.orderName
              }}</a>
          </template>
        </el-table-column>


        <el-table-column
          label="客户名称"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.clientName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单部件名称"
          width="120px"
        >
          <template slot-scope="scope">
            <span>{{scope.row.orderPartName}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="订单制单日期"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderSubmitTime  | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="交货时间"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.deliverDate  | getTime }}</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="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <el-dialog title="选择辅料" :close-on-click-modal="false" :visible.sync="dialogVisible" width="1000px">
      <el-input size="mini" v-model="searchStock.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchStockInfo">
        搜索
      </el-button>
      <div style="height: 10px;width: 100%"></div>
      <el-table
        size="mini"
        :data="tableDataStock"
        v-loading="listLoadingStock"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border>
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button @click="chooseStockClick(scope.row)" type="primary" size="mini">
              选择
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="200px"
          show-overflow-tooltip
          label="辅料名称">
          <template slot-scope="scope">
            <span>{{scope.row.materialInfo.materialName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="80px"
          label="库存数量">
          <template slot-scope="scope">
            <span>{{scope.row.usageEntity.stockNum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="80px"
          label="单位">
          <template slot-scope="scope">
            <span>{{scope.row.materialInfo.mtUnit}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="类型">
          <template slot-scope="scope">
            <span>{{scope.row.materialInfo.materialTypeName}}</span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          width="120px"-->
<!--          label="当前锁定数量">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.usageEntity.currentLockNum}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          width="100px"
          label="已锁定量">
          <template slot-scope="scope">
            <span>{{scope.row.usageEntity.lockedNum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          label="当前锁定量">
          <template slot-scope="scope">
            <span>{{scope.row.usageEntity.currentLockNum}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          label="剩余锁定量">
          <template slot-scope="scope">
            <span>{{scope.row.usageEntity.remainingNum}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="listData2.total>0"
        :total="listData2.total"
        :page.sync="listData2.page"
        :limit.sync="listData2.pageSize"
        @pagination="getStockInfo"/>
    </el-dialog>
    <order-step ref="orderStep"></order-step>
  </div>
</template>

<script>
import {
  queryProcessForPreOut,
  materialPreOutCompleteV2,
  materialPreOutPurchaseRequestV2,
  materialPreOutForceComplete,
  materialPreOutLock,
  materialPreOutUnLock,
  searchMaterialStock
} from '@/api/printbill/preOut/preOut.js';
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderStep from "@/components/orderStep/orderStep";
import { mapGetters } from 'vuex'
import {getPaperInfoList} from "@/api/baseInfo/paper/basePaperInfo";
import new_badge from '@/assets/new_badge.gif'
export default {
  name: "processPreOut",
  computed: {
    ...mapGetters([
      'name',
      'loginName',
      'userId'
    ])
  },
  components: {
    OrderStep,
    OrderDetail
  },
  data() {
    return {
      new_badge: new_badge,
      btnDisable:false,
      scopeIndex:"",
      preOutStockLockQty:"",
      searchStock:{
        keyWord:''
      },
      tableDataStock:[],
      dialogVisible:false,
      indexRowId:999,
      voidFlagState:false,
      detailVisible:false,
      stockItems:[],
      listLoading: false,
      listLoadingStock: false,
      tableData: [],
      search: {
        keyWord:'',
        idCompany:2,
        printBillCode:"",
        orderCode:""
      },
      listData:{
        total:0,
        page: 1,
        pageSize:10
      },
      listData2:{
        total:0,
        page: 1,
        pageSize:10
      }
    }
  },
  mounted() {
    this.getTableInfo();
  },
  methods: {
    chooseStockClick(row){
      const _that = this;
      _that.dialogVisible = false;
      _that.tableData[_that.scopeIndex].materialName = row.materialInfo.materialName;
      _that.tableData[_that.scopeIndex].idActualMaterialInfo = row.materialInfo.id;
      _that.tableData[_that.scopeIndex].actualMaterialInfoName = row.materialInfo.materialName;
      // _that.tableData[_that.scopeIndex].preOutStockLockQty = row.materialInfo.materialName;
      _that.tableData[_that.scopeIndex].stockNum = row.usageEntity.stockNum;
      _that.tableData[_that.scopeIndex].preOutStockLockIdRoom = row.usageEntity.idStockRoom;
    },
    searchStockInfo(){
      const _that = this;
      _that.listData2.page = 1;
      _that.getStockInfo();
    },
    getStockInfo(){
      const _that = this;
      _that.listLoadingStock = true;
      var page = {
        pageIndex: _that.listData2.page,
        pageSize: _that.listData2.pageSize
      }
      var params = {
        'searchParams':_that.searchStock,
        'searchPageFlipper': page,
        'dataProcess':{
          preOutStockLockQty:_that.preOutStockLockQty
        },
        'idCompany': 2
      }
      var data = {
        params:JSON.stringify(params)
      }
      // console.log(data);
      searchMaterialStock(data).then(response => {
        const data = response.data
        // //  组合表单数据
        _that.tableDataStock = data;
        // console.log('基础纸张档案列表',_that.tableData)
        _that.listData2.total = response.total
        // console.log(_that.tableData)
        _that.listLoadingStock = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoadingStock = false
      })
    },
    openStockDialog(index,row){
      const _that = this;
      _that.tableDataStock = [];
      _that.scopeIndex = index
      _that.dialogVisible = true;
      _that.searchStock.keyWord=row.actualMaterialInfoName;
      _that.listData2.page = 1;
      _that.preOutStockLockQty = parseInt(row.preOutStockLockQty);
      _that.getStockInfo();
    },
    lockPreOutPrint(id,row,index) {
      const _that = this;
      _that.btnDisable = true;
      _that.rowData = row;
      var breed = {
        id: id
      }
      var data = {
        'partProcess': JSON.stringify(breed)
      }
      materialPreOutLock(data).then(response => {
        _that.btnDisable = false
        _that.$message.success('锁定成功')
        _that.$nextTick(() => {
          _that.$set(row,'preOutLockState',1);
          _that.$set(row,'preOutLockManId',_that.$store.state.user.userId);
          // _that.$forceUpdate();//重绘

        })


      }).catch(err => {
        _that.btnDisable = false
        _that.$message.error(err)
      })
    },
    unlockPreOutPrint(id,row) {
      const _that = this;
      _that.rowData =row;

      var breed = {
        id: id
      }
      var data = {
        'partProcess': JSON.stringify(breed)
      }
      materialPreOutUnLock(data).then(response => {
        _that.$message.success('解锁成功')
        _that.$nextTick(() => {
          _that.$set(row,'preOutLockState',0);
          // _that.$forceUpdate();//重绘

        })
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    tableRowClassName({ row, rowIndex }) {
      var _that = this;
      // console.log("1",row.preOutLockState);
      // console.log("2",row.preOutLockManId);
      // console.log("3",_that.$store.state.user.userId);
      if (row.preOutLockState == 1 && row.preOutLockManId != _that.$store.state.user.userId) {
        return 'danger-row'
      } else if (row.preOutLockState == 1 && row.preOutLockManId == _that.$store.state.user.userId) {
        return 'warning-row'
      }
      return ''
    },
    checkVoidFlagState() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    handleBlur(index,materialQty,row){
      const _that = this;
      _that.indexRowId = 999;
      row.preOutStockLockQty = parseInt(materialQty)

    },
    handleEdit(id,row){
      const _that = this;
      _that.indexRowId = id;
    },
    // 获取订单信息
    openOrderDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.idOrder
      _that.$refs.orderStep.getOrderStep()
    },
    clickForceComplete(id,index) {
      //不再处理
      const _that = this;
      _that.$confirm('确定操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          idProcesses: id
        };
        // return
        materialPreOutForceComplete(data).then(response => {
          console.log(response)
          _that.$message.success('成功');
          _that.tableData.splice(index,1)
          // _that.getTableInfo();
        }).catch(err => {
          _that.$message.error(err)
        })
      }).catch(() => {

      });


    },
    clickPurchaseRequest(row,index) {
      //开制请购单
      const _that = this;
      if(!row.actualMaterialInfoName){
        _that.$message("请选择辅料");
        return
      }

      _that.$confirm('确定操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id:row.idOrderProcess,
          idActualMaterialInfo: row.idActualMaterialInfo,
          preOutStockLockQty:parseInt(row.preOutStockLockQty),
          preOutStockLockIdRoom:row.preOutStockLockIdRoom,
          actualMaterialInfoName:row.actualMaterialInfoName
        };
        var process = {
          process:JSON.stringify(data),
          idCompany:2
        }
        // return
        materialPreOutPurchaseRequestV2(process).then(response => {
          // console.log(response)
          _that.$message.success('成功');
          _that.tableData.splice(index,1)
          // _that.getTableInfo();
        }).catch(err => {
          // _that.$message.error(err)
        })
      }).catch(() => {

      });

    },
    clickComplete(row,index) {
      //完成
      const _that = this;
      if(!row.actualMaterialInfoName){
        _that.$message("请选择辅料");
        return
      }
      _that.$confirm('确定操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id:row.idOrderProcess,
          idActualMaterialInfo: row.idActualMaterialInfo,
          preOutStockLockQty:parseInt(row.preOutStockLockQty),
          preOutStockLockIdRoom:row.preOutStockLockIdRoom,
          actualMaterialInfoName:row.actualMaterialInfoName
        };
        var process = {
          process:JSON.stringify(data),
          idCompany:2
        }
        materialPreOutCompleteV2(process).then(response => {
          // console.log(response)
          _that.$message.success('成功');
          _that.tableData.splice(index,1)
          // _that.getTableInfo();
        }).catch(err => {
          // _that.$message.error(err)
        })
      }).catch(() => {

      });

    },
    handleClickTableRow(row, event, column) {
      this.$refs.stockItemTable.toggleRowSelection(row)
    },
    onTableSelectionChange(val) {
      this.stockItems = val
    },
    //获取表格数据
    getTableInfo(){
      const _that = this
      _that.listLoading = true;
      var params = {
        idCompany:2,
        searchState:0,
        keyWord: _that.search.keyWord,
        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(1);
      queryProcessForPreOut(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total;
        for (let i = 0; i < _that.tableData.length; i++) {
          var datas = _that.tableData[i];
          _that.$set(datas, 'actualMaterialInfoName',datas.materialName);
          _that.$set(datas, 'idActualMaterialInfo',datas.idMaterial);
          _that.$set(datas, 'preOutStockLockQty',parseInt(datas.materialQty));
        }
        // console.log(_that.tableData)
        _that.listLoading = false;
      }).catch(err => {
        _that.listLoading = false;
      })
    },
    //搜索
    searchData(){
      this.listData.page = 1;
      this.getTableInfo()
    },
    //序号
    indexMethod(index) {
      return index+1;
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.table-con .el-table .warning-row {
  background: #cde6c7;
}

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

::v-deep.table-con .el-table .danger-row {
  background: #f8aba6;
}
.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.filter-container {
  margin-bottom: 15px;
}
</style>
