<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 130px;" class="filter-item" />
      <el-input size="mini" v-model="search.printBillCode" placeholder="施工单号" style="width: 130px;" class="filter-item" />
      <el-input size="mini" v-model="search.orderCode" placeholder="订单编号" style="width: 130px;" class="filter-item" />
      <el-input size="mini" v-model="search.preOutMan" placeholder="预出库人" style="width: 120px;" class="filter-item"/>
      <el-date-picker
        size="mini"
        v-model="searchTime"
        type="datetimerange"
        range-separator="-"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['12:00:00','12:00:00']"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-input
        size="mini"
        v-model="materialName"
        disabled
        style="width: 240px;background-color: #fff !important;"
        class="input-with-select"
        @click.native="createInnerVisible = true;listData2.page = 1;searchStock.keyWord='';getStockInfo();"
      >
        <el-button
          slot="append"
          @click="createInnerVisible = true;listData2.page = 1;searchStock.keyWord='';">选择辅料
        </el-button>
      </el-input>
      <el-button
        size="mini"
        plain
        type="primary"
        @click="idMaterial = '';materialName = '';searchStock.keyWord='';">重置
      </el-button>
      <el-checkbox true-label="1" false-label="0" size="small" @change="searchData" v-model="search.searchStockLocked" label="查询已锁定" border></el-checkbox>
      <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"
        :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="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button title="退回" @click="handleBillBack(scope.row,scope.$index)" type="warning" size="mini">退回</el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="辅料预出库时间">
          <template slot-scope="scope">
            <span>{{ scope.row.materialPreOutTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预出库状态" align="center" width="110px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-tag size="mini" type="warning" v-if="row.preOutStockUnlocked ==0">请购</el-tag>
            <el-tag size="mini"  type="success" v-if="row.preOutStockUnlocked ==1">领料</el-tag>
            <el-tag size="mini" type="info" v-if="row.preOutStockUnlocked ==2">不在处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="90"
          label="预出库人">
          <template slot-scope="scope">
            <span>{{ scope.row.preOutLockManName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="辅料状态" align="center" width="200px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <span v-if="row.materialPreRequestFlag ==0">未请购,</span>
            <span style="color: #E6A23C" v-if="row.materialPreRequestFlag ==1">已请购,</span>
            <span v-if="row.materialStockInFlag ==0">未入库,</span>
            <span style="color: #E6A23C" v-if="row.materialStockInFlag ==1">已入库,</span>
            <span v-if="row.materialPickingFlag ==0">未领料,</span>
            <span style="color: #E6A23C" v-if="row.materialPickingFlag ==1">已领料,</span>
            <span v-if="row.materialStockOutFlag ==0">未出库</span>
            <span style="color: #E6A23C" v-if="row.materialStockOutFlag ==1">已出库</span>

          </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="182px"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            {{row.actualMaterialInfoName}}
          </template>
        </el-table-column>
        <el-table-column
          label="原辅料名称"
          width="180px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{scope.row.materialName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="领用数量"
          width="120px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.materialQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="原订单数量"
          width="120px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.preOutStockLockQty }}</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="120px"
        >
          <template slot-scope="{row}">
            <a href="javascript:;" style="color: #20a0ff" @click.stop="getOrderStep(row)">{{ row.orderCode }}</a>
          </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="140px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{scope.row.clientName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单部件名称"
          width="140px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{scope.row.orderPartName}}</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="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="createInnerVisible" 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
          prop="materialCode"
          label="辅料编码">
        </el-table-column>
        <el-table-column
          prop="materialTypeName"
          label="辅料分类名称">
        </el-table-column>
        <el-table-column
          width="300px"
          prop="materialName"
          label="辅料名称">
        </el-table-column>
        <el-table-column
          label="品牌"
          prop="mtModel"
        >
        </el-table-column>
        <el-table-column
          prop="mtRule"
          label="规格">
        </el-table-column>
        <el-table-column align="center" label="状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag v-if="row.voidFlag==0" type="success">
              启用
            </el-tag>
            <el-tag v-else-if="row.voidFlag==1" type="danger">
              禁用
            </el-tag>
          </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, materialPreOutBackV2
} from '@/api/printbill/preOut/preOut.js';
import {getMaterialInfoList} from '@/api/baseInfo/accessories/accessoriesInfo.js'
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderStep from "@/components/orderStep/orderStep";
import { mapGetters } from 'vuex'
import {getPaperInfoList} from "@/api/baseInfo/paper/basePaperInfo";
export default {
  name: "processPreOut",
  computed: {
    ...mapGetters([
      'name',
      'loginName',
      'userId'
    ])
  },
  components: {
    OrderStep,
    OrderDetail
  },
  data() {
    return {
      createInnerVisible:false,
      idMaterial:"",
      materialName:"",
      searchTime:[],
      scopeIndex:"",
      preOutStockLockQty:"",
      searchStock:{
        keyWord:''
      },
      tableDataStock:[],
      dialogVisible:false,
      indexRowId:999,
      voidFlagState:false,
      detailVisible:false,
      stockItems:[],
      listLoading: false,
      listLoadingStock: false,
      tableData: [],
      search: {
        keyWord:'',
        searchStockLocked: 0,
        idCompany:2,
        printBillCode:"",
        orderCode:"",
        preOutTimeBegin:"",
        preOutTimeEnd:"",
        preOutMan:""
      },
      listData:{
        total:0,
        page: 1,
        pageSize:10
      },
      listData2:{
        total:0,
        page: 1,
        pageSize:10
      }
    }
  },
  mounted() {
    this.getTableInfo();
  },
  methods: {
    handleBillBack(row,index){
      const _that = this;
      _that.$alert('确定操作？', {
      }).then(() => {
        var breedIds = []
        var data = {
          id:""
        }
        data.id = row.idOrderProcess
        breedIds.push(data)
        // console.log("000",breed);
        var datas = {
          'processList': JSON.stringify(breedIds),
          'idCompany':2
        }
        materialPreOutBackV2(datas).then(response => {
          if(response.httpCode == 200){
            _that.$message.success('成功');
            _that.listData.page = 1
            _that.getTableInfo()
          }


        }).catch(err => {
          // _that.$message.error(err)
        })
      });
    },
    chooseStockClick(row){
      const _that = this;
      _that.createInnerVisible = false;
      _that.materialName = row.materialName;
      _that.idMaterial = row.id;
    },
    searchStockInfo(){
      const _that = this;
      _that.listData2.page = 1;
      _that.getStockInfo();
    },
    getStockInfo(){
      const _that = this;
      _that.listLoadingStock = true;
      var params = _that.searchStock
      var page = {
        pageIndex: _that.listData2.page,
        pageSize: _that.listData2.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getMaterialInfoList(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.rowData = row;
      var breed = {
        id: id
      }
      var data = {
        'partProcess': JSON.stringify(breed)
      }
      materialPreOutLock(data).then(response => {
        _that.$message.success('锁定成功')
        _that.$nextTick(() => {
          _that.$set(row,'preOutLockState',1);
          _that.$set(row,'preOutLockManId',_that.$store.state.user.userId);
          // _that.$forceUpdate();//重绘

        })


      }).catch(err => {
        _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) {
      //不再处理
      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.getTableInfo();
        }).catch(err => {
          _that.$message.error(err)
        })
      }).catch(() => {

      });


    },
    clickPurchaseRequest(row) {
      //开制请购单
      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.getTableInfo();
        }).catch(err => {
          // _that.$message.error(err)
        })
      }).catch(() => {

      });

    },
    clickComplete(row) {
      //完成
      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.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;
      if (_that.searchTime == null || _that.searchTime < 0) {
        _that.search.preOutTimeBegin = '';
        _that.search.preOutTimeEnd = '';
      } else {
        _that.search.preOutTimeBegin = _that.searchTime[0];
        _that.search.preOutTimeEnd = _that.searchTime[1];
      }
      var params = {
        idCompany:2,
        searchState:1,
        keyWord: _that.search.keyWord,
        printBillCode: _that.search.printBillCode,
        orderCode:_that.search.orderCode,
        preOutTimeBegin:_that.search.preOutTimeBegin,
        preOutTimeEnd:_that.search.preOutTimeEnd,
        preOutMan:_that.search.preOutMan,
        searchStockLocked: _that.search.searchStockLocked,
        idMaterial:_that.idMaterial
      };

      var page = {
        pageIndex:_that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      queryProcessForPreOut(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total;
        // 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.el-input.is-disabled .el-input__inner{
  background: #fff !important;
  color: #606266 !important;
}
.input-with-select{
  background: #fff !important;
}
::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>
