<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-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-select v-model="idCompany" size="mini" @change="idCompanyChange" value-key="id" filterable placeholder="选择分厂">
        <el-option
          v-for="item in typeOptions"
          :key="item.id"
          :label="item.companyName"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="table-con">
      <el-table
        size="mini"
        :data="tableData"
        :cell-style="columnStyle"
        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="150" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
<!--            <el-button size="mini" v-if="row.lockFlag==0" @click="lockRow(row)" type="primary">-->
<!--              锁定-->
<!--            </el-button>-->
<!--            <el-button size="mini" v-if="row.lockFlag==1" @click="unlockRow(row)" type="warning">-->
<!--              解锁-->
<!--            </el-button>-->
            <el-button size="mini" @click="btnComplete(row)" type="success">
              完成
            </el-button>
            <el-button size="mini" @click="btnRequisition(row)" type="primary">
              请购
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="140px"
          label="物料订单名称"
        >
          <template slot-scope="{row}">
            {{ row.orderName }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="80"
          label="数量"
        >
          <template slot-scope="{row}">
            <span style="color: #E6A23C">{{ row.materialQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="80"
          label="库存"
        >
          <template slot-scope="{row}">
            <span style="color: #E6A23C">{{ row.stockQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="120px"
          label="客户名称"
        >
          <template slot-scope="{row}">
            {{ row.clientName }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="140px"
          label="物料名称"
        >
          <template slot-scope="{row}">
            {{ row.mtName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料订单状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.materialState==0" type="info">
              待处理
            </el-tag>
            <el-tag size="mini" v-else-if="row.materialState==1" type="warning">
              采购
            </el-tag>
            <el-tag size="mini" v-else-if="row.materialState==2" type="success">
              出库
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="请购状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.orderPreRequestFlag==0" type="info">
              未请购
            </el-tag>
            <el-tag size="mini" v-else-if="row.orderPreRequestFlag==1" type="warning">
              已请购
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="入库状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.orderStockInFlag==0" type="info">
              未入库
            </el-tag>
            <el-tag size="mini" v-else-if="row.orderStockInFlag==1" type="warning">
              已入库
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="出库状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.orderStockOutFlag==0" type="info">
              未出库
            </el-tag>
            <el-tag size="mini" v-else-if="row.orderStockOutFlag==1" type="warning">
              已出库
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="120px"
          label="下单人"
        >
          <template slot-scope="{row}">
            {{ row.mtName }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="下单时间"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.orderCreateTime">{{ scope.row.orderCreateTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="交货时间"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.orderDeliverTime">{{ scope.row.orderDeliverTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="120px"
          label="备注"
        >
          <template slot-scope="{row}">
            {{ row.materialMemo }}
          </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="title" width="1400px" :visible.sync="dialogFormVisible">
<!--      <el-form>-->
<!--        <el-form-item label="选择分厂" label-width="120">-->
<!--        </el-form-item>-->
<!--      </el-form>-->
      <el-table
        size="mini"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="tableDataOrder"
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
      >
        <el-table-column
          :selectable="checkboxT"
          v-if="requisitionCom"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="140px"
          label="物料订单名称"
        >
          <template slot-scope="{row}">
            {{ row.orderName }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="80"
          label="数量"
        >
          <template slot-scope="{row}">
            <span style="color: #E6A23C">{{ row.materialQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="80"
          label="库存"
        >
          <template slot-scope="{row}">
            <span style="color: #E6A23C">{{ row.stockQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="120px"
          label="客户名称"
        >
          <template slot-scope="{row}">
            {{ row.clientName }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="140px"
          label="物料名称"
        >
          <template slot-scope="{row}">
            {{ row.mtName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料订单状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.materialState==0" type="info">
              待处理
            </el-tag>
            <el-tag size="mini" v-else-if="row.materialState==1" type="warning">
              采购
            </el-tag>
            <el-tag size="mini" v-else-if="row.materialState==2" type="success">
              出库
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="请购状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.orderPreRequestFlag==0" type="info">
              未请购
            </el-tag>
            <el-tag size="mini" v-else-if="row.orderPreRequestFlag==1" type="warning">
              已请购
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="入库状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.orderStockInFlag==0" type="info">
              未入库
            </el-tag>
            <el-tag size="mini" v-else-if="row.orderStockInFlag==1" type="warning">
              已入库
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="出库状态" class-name="status-col" width="100">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.orderStockOutFlag==0" type="info">
              未出库
            </el-tag>
            <el-tag size="mini" v-else-if="row.orderStockOutFlag==1" type="warning">
              已出库
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="120px"
          label="下单人"
        >
          <template slot-scope="{row}">
            {{ row.mtName }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="下单时间"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.orderCreateTime">{{ scope.row.orderCreateTime | getTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="requisitionCom==true?btnRequisitionSure():btnCompleteSure()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllCompanyInfoList,
  getOrderMaterialListForProOut,
  mtOrderItemLockOrUnlock,
  mtOrderPreOutComplete,
  getMtOrderItemListByOrderId,
  mtOrderPreOutPurchase
} from '@/api/printbill/printbill.js'
import { mapGetters } from 'vuex'

export default {
  name: "list",
  computed: {
    ...mapGetters([
      'name',
      'loginName',
      'userId'
    ])
  },
  data() {
    return {
      title:"",
      multipleSelection:[],
      requisitionCom:false,
      tableDataOrder:[],
      rowData:{},
      typeOptions: [],
      idCompany:"",
      dialogFormVisible:false,
      listLoading: false,
      tableData: [],
      search: {
        keyWord: ''
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getCompanyInfoList();
  },
  methods: {
    checkboxT(row, index) {
      if (row.orderPreRequestFlag==1) {
        return false;
      } else {
        return true;
      }
    },
    idCompanyChange(val){
      const _that = this;
      _that.idCompany = val;
      _that.getTableInfo();
    },
    btnRequisitionSure(){
      const _that = this;
      if (_that.multipleSelection.length <= 0) {
        _that.$message("请选择物料订单");
        return
      }
      console.log(_that.multipleSelection);

      var idsArray = [];
      for (let i = 0; i < _that.multipleSelection.length; i++) {
        var ids = {
          id:"",
          idCompany:_that.idCompany,
          materialState:"",
          idOrder:""
        };
        var dataItem = _that.multipleSelection[i];
        ids.id = dataItem.id;
        ids.materialState = dataItem.materialState;
        ids.idOrder = dataItem.idOrder;
        idsArray.push(ids)
      }
      console.log(idsArray);
      var data = {
        "itemList": JSON.stringify(idsArray)
      }
      mtOrderPreOutPurchase(data).then(response => {
        _that.$message.success('请购成功');
        _that.dialogFormVisible = false;
        _that.getTableInfo();
      }).catch(err => {
      })
    },
    btnCompleteSure(){
      const _that = this;
      var data = {
        "idOrder":_that.rowData.idOrder,
        "idCompany": _that.idCompany,
      }
      mtOrderPreOutComplete(data).then(response => {
        _that.$message.success('成功');
        _that.dialogFormVisible = false;
        _that.getTableInfo();
      }).catch(err => {
      })
    },
    btnRequisition(row){
      const _that = this;
      _that.rowData = row;
      _that.title = "物流订单请购"
      _that.requisitionCom = true;
      var data = {
        "idOrder":_that.rowData.idOrder,
        "idCompany": _that.idCompany,
      }
      getMtOrderItemListByOrderId(data).then(response => {
        const data = response.data
        // //  组合表单数据

        _that.tableDataOrder = data;
        _that.dialogFormVisible = true;

      }).catch(err => {
      })
    },
    btnComplete(row){
      const _that = this;
      _that.title = "物流订单完成"
      _that.rowData = row;
      _that.requisitionCom = false;
      var data = {
        "idOrder":_that.rowData.idOrder,
        "idCompany": _that.idCompany,
      }
      getMtOrderItemListByOrderId(data).then(response => {
        const data = response.data
        // //  组合表单数据
        _that.tableDataOrder = data;
        _that.dialogFormVisible = true;
      }).catch(err => {
      })

    },
    getCompanyInfoList() {
      const _that = this
      getAllCompanyInfoList().then(response => {
        _that.typeOptions = response.data;
        _that.idCompany = response.data[0].id;
        _that.getTableInfo();
      }).catch(err => {
        console.log(err)
      })
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      var _that = this;
      if (columnIndex ==2 || columnIndex ==0 || columnIndex ==1) {
        if (row.lockFlag == 1 && row.idLockMan != _that.$store.state.user.userId) {
          return 'background: #f8aba6 !important;'
        }else if (row.lockFlag == 1 && row.idLockMan == _that.$store.state.user.userId){
          return 'background: #cde6c7 !important;'
        }

      }
    },
    lockRow(row){
      const _that = this;
      var data = {
        "id": row.id,
        "lockFlag": 1,
      }
      mtOrderItemLockOrUnlock(data).then(response => {
        _that.$message.success('锁定成功');
        _that.getTableInfo();
        // _that.$nextTick(() => {
        //   _that.$set(row,'preOutLockState',1);
        //   _that.$set(row,'preOutLockManId',_that.$store.state.user.userId);
        //   // _that.$forceUpdate();//重绘
        //
        // })


      }).catch(err => {
      })
    },
    unlockRow(row){
      const _that = this;
      var data = {
        "id": row.id,
        "lockFlag": 0,
      }
      mtOrderItemLockOrUnlock(data).then(response => {
        _that.$message.success('解锁成功');
        _that.getTableInfo();
        // _that.$nextTick(() => {
        //   _that.$set(row,'preOutLockState',1);
        //   _that.$set(row,'preOutLockManId',_that.$store.state.user.userId);
        //   // _that.$forceUpdate();//重绘
        //
        // })


      }).catch(err => {
      })
    },
    //获取表格数据
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      var params = {
        "keyWord":_that.search.keyWord,
        "idCompany":_that.idCompany
      };
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      // console.log(data);
      getOrderMaterialListForProOut(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()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //序号
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}

.filter-container {
  margin-bottom: 15px;
}
</style>
