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

    <div class="app-con">
      <el-form label-width="80px">
        <el-form-item label="选择">
          <el-button :plain="!btnPaperVisible" @click="btnPaper" type="warning">选择纸张</el-button>
          <el-button :plain="!openStockDialogVisible" @click="openStockDialog" type="success">选择辅料</el-button>
        </el-form-item>
        <el-form-item label="已选">
          <span style="font-size: 15px;">{{paperName}}</span>
        </el-form-item>
        <el-form-item label="分厂">
          <el-select v-model="form.idCompany" filterable placeholder="选择分厂" style="width: 220px;">
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.companyName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库房">
          <el-select filterable clearable v-model="idStockRooms" style="width: 220px;">
            <el-option
              v-for="(item,index) in stockRoomList"
              :key="index"
              :value="item.id"
              :label="item.roomName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调整数量">
          <el-input style="width: 220px;" type="number" v-model="adjustQty"></el-input>
        </el-form-item>
        <el-form-item label="选择">
          <el-radio v-model="borrowFlag" label="1">增加</el-radio>
          <el-radio v-model="borrowFlag" label="-1">减少</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>

    </div>
    <el-dialog title="选择纸张" :visible.sync="addPaperDialog" width="1000px">
      <!--      <paper-info :key="timer" :is-choose="true" :type="1" @choosePaper='choosePaper'></paper-info>-->
      <select-paper-info :key="timer" :type="0" :is-choose="true" @choosePaper='choosePaper'></select-paper-info>
    </el-dialog>
    <el-dialog title="选择辅料" :close-on-click-modal="false" :visible.sync="dialogVisibleStock" 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>
  </div>
</template>

<script>
import {adjustStockTradeBill} from '@/api/stock/paperInventory'
import {getPaperInfoList} from "@/api/baseInfo/paper/basePaperInfo";
import {searchMaterialStock} from "@/api/printbill/preOut/preOut";
import {getAllCompanyInfoList} from "@/api/printbill/printbill";
import {getStockRoomList} from "@/api/baseInfo/stockRoomList/stockRoomList";
import SelectPaperInfo from "@/views/select/paperInfo";
import PaperInfo from "@/views/baseInfo/paper/paperInfo";
export default {
  name: "list",
  components: {SelectPaperInfo},
  data() {
    return {
      timer: '',
      addPaperDialog:false,
      borrowFlag: '1',
      adjustQty:"",
      idStockRooms:"",
      form: {
        idCompany:""
      },
      stockRoomList: [],
      listLoadingStock:false,
      typeOptions:[],
      btnPaperVisible:false,
      openStockDialogVisible:false,
      dialogVisibleStock:false,
      paperName:"",
      idPaperBaseInfo:"",
      dialogVisible:false,
      listLoading: false,
      tableData: [],
      tableDataStock:[],
      searchPaper: {
        keyWord:''
      },
      searchStock:{
        keyWord:''
      },
      listData:{
        total:0,
        page: 1,
        pageSize:10
      },
      listData2:{
        total:0,
        page: 1,
        pageSize:10
      }
    }
  },
  mounted() {
    this.getPaperInfo();
    this.getStockInfo();
    this.getCompanyInfoList();
    this.getStockRoomInfo();
  },
  methods: {

    onSubmit(){
      const _that = this;
      if(!_that.paperName){
        _that.$message("请选择物料")
        return
      }
      if(!_that.form.idCompany){
        _that.$message("请选择分厂")
        return
      }
      if(!_that.adjustQty){
        _that.$message("调整数量不能为空")
        return
      }
      if(!_that.idStockRooms){
        _that.idStockRooms = 0;
      }
      var data = {
        idMaterial: _that.idPaperBaseInfo,
        idCompany: _that.form.idCompany,
        idStockRoom: _that.idStockRooms,
        adjustQty: _that.adjustQty,
        borrowFlag: _that.borrowFlag
      }
      console.log(data);
      adjustStockTradeBill(data).then(response => {
        // console.log(response)
        if(response.httpCode == 200){
          _that.$message({
            message: '成功',
            type: 'success'
          });
        }
        _that.paperName = "";
        _that.form.idCompany= "";
        _that.adjustQty= "";
        _that.idStockRooms = "";
        _that.btnPaperVisible=false;
        _that.openStockDialogVisible=false
      }).catch(err => {
        _that.$message.error(err)
      })

    },
    choosePaper(row){
      const _that = this;
      console.log(row);
      _that.paperName = row.paperName;
      _that.idPaperBaseInfo = row.id;
      _that.addPaperDialog = false;
    },
    // 获取库房列表
    getStockRoomInfo() {
      const _that = this
      var page = {
        pageIndex: 1,
        pageSize: 100
      }
      var data = {
        'page': JSON.stringify(page)
      }
      getStockRoomList(data).then(response => {
        // console.log(response)
        var data = response.data
        _that.stockRoomList = data
        // _that.search.idStockRoom = _that.stockRoomList[0].id

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    getCompanyInfoList(){
      const _that = this;
      getAllCompanyInfoList().then(response => {
        // _that.BreedInfoList = data;
        // console.log("_that.list",response.data);

        // console.log("typeOptions",response.data);
        _that.typeOptions = response.data;


      }).catch(err => {
        console.log(err);
      })
    },
    getPaperInfo() {
      const _that = this
      _that.listLoading = true
      var params = {
        voidFlag: 0,
        keyWord:_that.searchPaper.keyWord
      }
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getPaperInfoList(data).then(response => {
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        // console.log('基础纸张档案列表',_that.tableData)
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    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
      })
    },
    choosePaperClick(row) {
      const _that = this;
      _that.paperName = row.paperName
      _that.idPaperBaseInfo = row.id;
      _that.dialogVisible = false;
    },
    chooseStockClick(row){
      const _that = this;
      _that.dialogVisibleStock = false;
      _that.paperName = row.materialInfo.materialName;
      _that.idPaperBaseInfo = row.materialInfo.id;
    },
    getPaperSearch(){
      const _that = this;
      _that.listData.page = 1;
      _that.getPaperInfo();
    },
    btnPaper(){
      this.addPaperDialog = true;
      this.timer = new Date().getTime()
      this.paperName = "";
      this.idPaperBaseInfo = "";
      this.btnPaperVisible=true;
      this.openStockDialogVisible=false
    },
    openStockDialog(){

      this.dialogVisibleStock = true;
      this.paperName = "";
      this.idPaperBaseInfo = "";
      this.btnPaperVisible=false;
      this.openStockDialogVisible=true
    },
    //序号
    indexMethod(index) {
      return index+1;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-con{
  background-color: #f0f2f5;
  padding: 30px;
}
.filter-container {
  margin-bottom: 15px;
}
</style>
