<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom: 0">
      <el-form :inline="true" >
        <el-form-item label="分厂:">
          <el-select v-model="search.idCompany" :disabled="checkList.length>0">
            <el-option
              v-for="(item,index) in companyList"
              :key="index"
              :value="item.id"
              :label="item.companyName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库房:">
          <el-select v-model="search.idStockRoom" :disabled="checkList.length>0">
            <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="库存为0是否过滤:" :disabled="checkList.length>0">
          <el-switch v-model="search.filterZeroPaper" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="关键字:">
          <el-input v-model="search.keyWord" :disabled="checkList.length>0" placeholder="关键字" style="width: 200px;" class="filter-item" />
        </el-form-item>

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData" :disabled="checkList.length>0">
          搜索
        </el-button>

      <div class="top-right-btn">
        <span>{{statusString}}</span>
        <el-button v-if="statusString == '盘点中'" type="danger" @click="closeStockCheck">结束盘点</el-button>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getPaperList" />
        </el-tooltip>
      </div>
      </el-form>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <span class="tableName" style="margin-bottom: 30px">在库表</span>
        <el-table
          :data="tableData"
          v-loading="listLoading"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          size="mini"
          border
          :row-style="customRowStyle"
          default-expand-all>
          <el-table-column
            prop="paperCode"
            width="110"
            label="纸张编码">
          </el-table-column>
          <el-table-column
            prop="paperName"
            label="纸张名称">
          </el-table-column>
          <el-table-column
            prop="stockQty"
            width="130"
            label="原库存量">
          </el-table-column>
            <el-table-column
              label="库存数量"
              prop="newStockQty"
              width="140px">
              <template slot-scope="{row}">
<!--                <span v-show="indexRowId!=row.id">{{row.newStockQty}}</span>-->
                <el-input
                  size="mini"
                  style="display: inline-block;width: 70px"
                  v-model="row.newStockQty"
                  @keyup.enter.native="handleComplete(row)"
                  placeholder="请输入内容"></el-input>
<!--                <span v-show="indexRowId!=row.id" @click="handleEdit(row)" style="color: #409EFF;cursor: pointer" size="mini" round>&nbsp;&nbsp;修改</span>-->
<!--                <span v-show="indexRowId==row.id" @click="handleComplete(row)"  style="color: #409EFF;cursor: pointer" size="mini" round>&nbsp;&nbsp;确定</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="getPaperList" />
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="addPaperInfo">增加纸张</el-button>
        <el-button type="success" style="margin-bottom: 10px" @click="saveCheckStock">保存盘点</el-button>
        <el-button type="danger" style="margin-bottom: 10px" @click="checkList=[]">清空</el-button>
        <span class="tableName">盘点表</span>
        <el-table
          :data="checkList"
          v-loading="listLoading"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          size="mini"
          border
          default-expand-all>
          <el-table-column
            prop="paperCode"
            width="110"
            label="纸张编码">
          </el-table-column>
          <el-table-column
            prop="paperName"
            label="纸张名称">
          </el-table-column>
          <el-table-column
            prop="stockQty"
            width="130"
            label="原库存量">
          </el-table-column>
          <el-table-column
            label="库存数量"
            prop="newStockQty"
            width="140px">
            <template slot-scope="{row}">
<!--              <span v-show="indexRowId1!=row.id">{{row.newStockQty}}</span>-->
              <el-input
                size="mini"
                style="display: inline-block;width: 70px"
                v-model="row.newStockQty"
                @keyup.enter.native="indexRowId1 = null"
                placeholder="请输入内容"></el-input>
<!--              <span v-show="indexRowId1!=row.id" @click="indexRowId1 = row.id" style="color: #409EFF;cursor: pointer" size="mini" round>&nbsp;&nbsp;修改</span>-->
<!--              <span v-show="indexRowId1==row.id" @click="indexRowId1 = null"   style="color: #409EFF;cursor: pointer" size="mini" round>&nbsp;&nbsp;确定</span>-->

            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteRow(scope)">删除</el-button>
            </template>>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <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="1" :is-choose="true" @choosePaper='choosePaper'></select-paper-info>
    </el-dialog>
  </div>
</template>

<script>
import { getStockRoomCheckStatus,getCheckStockPaperInfoList,getCompanyList,checkStockPaperInfo,closeStockRoomCheckStatus } from '@/api/stock/checkStockPaper'
import { getStockRoomList} from '@/api/baseInfo/stockRoomList/stockRoomList.js'
import PaperInfo from "@/views/baseInfo/paper/paperInfo";
import SelectPaperInfo from "@/views/select/paperInfo";
export default {
  name: 'PaperInventory',
  components: {SelectPaperInfo, PaperInfo},
  props: {
    isChoose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      webType: true,
      statusString: '',
      search: {
        idCompany: '',
        idStockRoom: 0,
        filterZeroPaper: 0,
        keyWord: ''
      },
      form: {},
      options: [],

      companyList: [], // 分厂列表
      stockRoomList: [], // 库房列表

      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },

      listLoading: false,
      tableData: [],
      basePaperName: '',
      checkList: [],
      indexRowId: '',
      materialFlag: 1,
      indexRowId1: '',
      addPaperDialog: false,
      timer: '',
    }
  },
  mounted() {
    this.materialFlag = this.$route.path.split('/').slice(-1)[0]
    this.getStatus()
    this.getCompanyInfo()
    this.getStockRoomInfo()
    if (this.$route.query.type === undefined) {
      this.webType = true
    } else {
      this.webType = false
    }
  },
  methods: {
    // 获取盘点状态
    getStatus() {
      const _that = this
      var data = {
        idCompany: _that.search.idCompany,
        idStockRoom: _that.search.idStockRoom
      }
      getStockRoomCheckStatus(data).then(res => {
        // console.log(res);
        _that.statusString = res.data
      })
    },
    // 获取列表
    getPaperList() {
      const _that = this
      _that.listLoading = true
      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getCheckStockPaperInfoList(data).then(response => {
        console.log(response)
        const data = response.data
        data.forEach(item => {
          item['newStockQty'] = item.stockQty
          _that.$set(item,'checkFlag',false)
        })
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 获取分厂列表
    getCompanyInfo() {
      const _that = this
      var data = {
      }
      // console.log(data);
      getCompanyList(data).then(response => {
        console.log(response)
        _that.companyList = response.data
        _that.search.idCompany = _that.companyList[0].id

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 获取库房列表
    getStockRoomInfo() {
      const _that = this
      // var data = {}
      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 = data[0].id
        _that.getPaperList()
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getPaperList()
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getPaperList()
      this.getStatus()
    },
    // 表格样式
    customRowStyle({row, rowIndex}) {
      if (row.checkFlag) {
        return {
          // color: '#F56C6C'
          background: '#f7b1b1'
        }
      }
    },

    // 保存库存数
    handleComplete(row) {
      const _that = this;
      _that.indexRowId = null
      var flag = _that.checkList.some(item =>{
        if(item.id == row.id){
          item = row
          return true
        }
      })
      if(!flag){
        row.checkFlag = true
        _that.checkList.push(row)
      }
    },
    // 修改库存数
    handleEdit(row) {
      const _that = this
      _that.indexRowId = row.id
    },
    // 删除行
    deleteRow(scope) {
      this.tableData.some(item => {
        if(item.id == scope.row.id){
          item.checkFlag = false
        }
      })
      this.checkList.splice(scope.$index, 1)
    },

    // 保存盘点
    saveCheckStock() {
      const _that = this
      var stockList = []
      _that.checkList.forEach( item =>{
        var stock = {
          id: item.id,
          currencyValue: item.newStockQty
        }
        stockList.push(stock)
      })

      var data = JSON.stringify(stockList)

      console.log(data);
      checkStockPaperInfo(data, _that.search.idCompany, _that.search.idStockRoom, _that.materialFlag,).then(res => {
        console.log(res);
        if(res.httpCode == 200){
          _that.$message.success('保存成功')
          _that.checkList = []
          _that.getPaperList()
          _that.getStatus()
        }
      })
    },

    // 增加纸张档案
    addPaperInfo() {
      const _that = this
      _that.addPaperDialog = true
      _that.timer = new Date().getTime()
    },
    choosePaper(row) {
      // console.log(row);
      const _that = this
      for (let i = 0; i < row.length; i++) {
        var flag = true
        for (let j = 0; j < _that.tableData.length; j++) {
          if(row[i].id == _that.tableData[j].id){
            flag = false
            // _that.$message.warning('在库表已存在')
            // return;
          // }else {
          }
        }

        for (let k = 0; k < _that.checkList.length; k++) {
          if(row[i].id == _that.checkList[k].id){
            flag = false
            // _that.$message.warning('盘点表已存在')
            // return;
            // } else {
          }
        }
        if(flag){

          _that.$set(row[i], 'stockQty', 0)
          _that.$set(row[i], 'newStockQty', 0)
          _that.checkList = _that.checkList.concat(row[i])
        }
      }
      _that.addPaperDialog = false
      // row.forEach(item => {
      //   _that.$set(item, 'stockQty', 0)
      //   _that.$set(item, 'newStockQty', 0)
      //   // item.stockQty = 0
      //   // item.newStockQty = 0
      // })
      // _that.checkList = _that.checkList.concat(row)
    },

    closeStockCheck() {
      console.log('进来');
      const _that = this
      var data = {
        idCompany: _that.search.idCompany,
        idStockRoom: _that.search.idStockRoom
      }
      closeStockRoomCheckStatus(data).then(res =>{
        console.log(res);
        _that.statusString = res.data
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
  .tableName{
    display: inline-block;
    float: right;
    line-height: 20px;
    margin-right: 10px;
    font-weight: 700;
  }
  .el-switch {
    ::v-deep .el-switch__core {
      &::before {
        content: '否';
        color: #fff;
        position: absolute;
        transform: scale(0.85);
        left: 20px;
      }
    }

    &.is-checked {
      ::v-deep .el-switch__core {
        &::before {
          content: '是';
          left: 5px;
          color: white;
          transform: scale(0.85);
        }
      }
    }
  }
</style>
