<template>
  <div class="outboundManage">
    <div class="head-title">
      出库管理
      <el-button style="float:right" size="small" @click="outapplyfor" type="primary">出库申请
      </el-button>
    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <span>供应商</span>
        <el-select style="margin:0 10px" class="w200" @change="msg.pageIndex=1,getList()" v-model="msg.SupplierId"
          size="small" placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in SupplierData" :key="item.Id" :label="item.Name" :value="item.ID">
          </el-option>
        </el-select>

        <span>订单号</span>
        <div class="searchInput" style="width:250px">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
            placeholder="请输入订单号搜索" v-model="msg.OrderNo" @clear="msg.pageIndex=1,getList()" size="small" clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
            style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <span>下单时间</span>
        <el-date-picker v-model="dateList" @change="msg.pageIndex=1,getList()" size="small" type="datetimerange"
          range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <span style="margin-left: 5px">商品名称</span>
        <div class="searchInput" style="width:250px">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
            placeholder="请输入商品名称搜索" v-model="msg.GoodsName" @clear="msg.pageIndex=1,getList()" size="small" clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
            style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
        <el-checkbox v-model="msg.IsOut" :true-label="1" :false-label="0" style="margin-left: 15px"
          @change="msg.pageIndex=1,getList()">售后出库</el-checkbox>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" style="text-align:center;">
        </el-table-column>
        <el-table-column prop="OrderNo" label="订单号" width="220">
        </el-table-column>
        <el-table-column prop="GoodsName" label="商品名称" width="300px" style="font-size:11px">
          <template slot-scope="scope">
            <div>
              <span style="font-size:11px">
                {{scope.row.GoodsName}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Specification" label="商品规格">
          <template slot-scope="scope">
            <div>
              <span style="font-size:11px">
                {{scope.row.Specification}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="购买数量" width="100px">
        </el-table-column>
        <el-table-column prop="Number" label="出库商品" width="300px" style="font-size:11px">
          <template slot-scope="scope">
            <div>
              <span style="font-size:11px">
                {{scope.row.NewGoodsName}}
              </span>
              <el-tooltip class="item" effect="dark" content="修改商品" placement="top">
                <img @click="editGoods(scope.row,scope.$index)" src="../../assets/img/userman/edit1.png" alt="">
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="出库规格" width="250px">
          <template slot-scope="scope">
            <div style="color:'#409eff'">
              <span class="el-tag el-tag--small el-tag--light"
                style="top: 5px; position: relative; margin-right: 5px;max-width:250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">
                {{scope.row.NewSpecification}}
              </span>
              <el-tooltip class="item" effect="dark" content="修改规格" placement="top">
                <img @click="costBtn(scope.row,scope.$index)" src="../../assets/img/userman/edit1.png" alt="">
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="出库数量" width="150px">
          <template slot-scope="scope">
            <el-input class="w100" size="small" type="number" v-model="scope.row.NewNumber" placeholder="请输入"
              :disabled="ERPEmpId==0 ? true: false" :min="0"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
        :current-page.sync="msg.pageIndex" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 规格选择 -->
    <el-dialog custom-class="app-add-cat" title="出库规格选择" :visible.sync="AtterDig" width="1100px">
      <div class="temp_content" v-if="SpecList.length>0">
        <span class="el-tag el-tag--small el-tag--light AttrList"
          :style="{color: item.IScheck == true?'#409eff':'#000'}" v-for="(item,index) in SpecList" :key="index"
          @click="chooseAttr(index)">
          <span>{{item.SpecificationName}}</span>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="AtterDig = false">取 消</el-button>
        <el-button @click="chooseA" size="small" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 商品选择 -->
    <el-dialog custom-class="app-add-cat" title="出库商品选择" :visible.sync="Egoods" width="1100px">
      <el-form :inline="true" label-width="80px">
        <el-form-item label="商品">
          <el-select size="small" v-model="Goodsobj.NewGoodsId" @change="getSpecification"
            :filter-method="ChangeListName" filterable style="display:inline-block;width:600px;" placeholder="请选择">
            <el-option v-for="item in GoodsList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-width="80px">
        <el-form-item label="商品规格">
          <el-select size="small" v-model="Goodsobj.NewSpecificationSort" @change="getSort"
            style="display:inline-block;width:300px;" placeholder="请选择">
            <el-option v-for="item in SpecificationList" :key="item.SpecificationKey" :label="item.SpecificationName"
              :value="item.SpecificationKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="addGoods">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData2" v-loading="loading" border style="width: 100%">
        <el-table-column prop="NewGoodsName" label="商品名称">
        </el-table-column>
        <el-table-column prop="Number" label="出库规格" width="250px">
          <template slot-scope="scope">
            <div style="color:'#409eff'">
              <span class="el-tag el-tag--small el-tag--light"
                style="top: 5px; position: relative; margin-right: 5px;max-width:250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">
                {{scope.row.NewSpecification}}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="出库数量" width="150px">
          <template slot-scope="scope">
            <el-input class="w100" size="small" type="number" v-model="scope.row.NewNumber" placeholder="请输入"
              :disabled="ERPEmpId==0 ? true: false" :min="0"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="操作" width="100px">
          <template slot-scope="scope">
            <div>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <img @click="editGoods2(scope.row,scope.$index)" src="../../assets/img/userman/del.png" alt="">
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="Egoods = false,tableData2=[]">取 消</el-button>
        <el-button @click="chooseB" size="small" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        Egoods: false,
        tableData: [],
        total: 0,
        outobj: {
          ID: 0,
          IsOut:0, //吴大春新增字段
          WarehouseOutGoodsList: [],
        },
        msg: {
          pageIndex: 1,
          pageSize: 15,
          SupplierId: 0,
          OrderNo: '',
          StartTime: '',
          EndTime: '',
          GoodsName: '',
          IsOut: 0 //吴大春新增字段
        },
        goodsmsg: {
          pageIndex: 1,
          pageSize: 5,
          Name: '',
          GoodsStatus: 0,
          IsSelectSellOut: 0,
          CategoryIds: '',
          Id: '',
          StartTime: '',
          EndTime: '',
          OrderBy: 0,
        },
        ERPEmpId: 0,
        SpecList: [],
        AtterDig: false,
        outindex: {},
        SupplierData: [], //供应商data
        dateList: [], //日期
        GoodsList: [], //商品列表

        Goodsobj: {
          Id: 0,
          OrderNo: 0,
          GoodsId: '',
          GoodsName: '',
          Number: 0,
          Specification: '',
          SpecificationSort: '',
          NewSpecification: '',
          NewSpecificationSort: "",
          NewNumber: 1,
          IScheck: false,
        },
        SpecificationList: [],
        tableData2: [],
        editGoodsindex: 0,
      }
    },
    created() {
      let currentUser = this.getLocalStorage()
      this.ERPEmpId = currentUser.ERPEmpId
    },
    mounted() {
      this.getList();
      this.getAllSupplier()
    },
    methods: {

      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartTime = this.dateList[0];
          this.msg.EndTime = this.dateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        this.loading = true;
        this.assetsApipost("/api/WarehouseOut/GetNoOutOrderGoodsList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            // this.tableData = res.data.data;
            this.total = res.data.data.count;
            this.tableData = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },

      handleSelectionChange(val) {
        var selectRow = JSON.parse(JSON.stringify(val));
        let array = [];
        selectRow.forEach(x => {
          let obj = {}
          obj.OrderGoodsId = x.Id;
          array.push(obj)
        });
        this.outobj.WarehouseOutGoodsList = array;

      },
      unique(arr) {
        for (var i = 0, len = arr.length; i < len; i++) {
          for (var j = i + 1, len = arr.length; j < len; j++) {
            if (arr[i].NewGoodsId === arr[j].NewGoodsId && arr[i].NewSpecificationSort === arr[j]
              .NewSpecificationSort && arr[i].OrderGoodsId === arr[j].OrderGoodsId) {
              arr.splice(j, 1);
              j--; // 每删除一个数j的值就减1
              len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
            }
          }
        }
        return arr;
      },
      outapplyfor() {
        let that = this
        if (that.ERPEmpId == 0) {
          that.Error('您还未授权，暂不能出库');
        } else {
          if (that.outobj.WarehouseOutGoodsList.length == 0) {
            that.Info('请选择商品');
            return
          }
          let array = []
          let showtip = false
          this.outobj.WarehouseOutGoodsList.forEach(x => {
            this.tableData.forEach(j => {
              if (x.OrderGoodsId == j.Id) {
                let obj = {}
                obj.OrderGoodsId = j.Id;
                obj.NewSpecificationSort = j.NewSpecificationSort;
                obj.NewNumber = j.NewNumber;
                obj.NewGoodsName = j.NewGoodsName;
                obj.NewGoodsId = j.NewGoodsId;
                array.push(obj)
                if (j.NewNumber == '' || j.NewNumber == 0) {
                  showtip = true
                }
              }
            })

          })
          if (showtip == true) {
            that.Error('出库数量大于0');
            return
          }
          array = this.unique(array)
          this.outobj.WarehouseOutGoodsList = array;
          this.outobj.IsOut=1;
          that.$confirm('是否申请出库?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.loading = true;
            that.assetsApipost("/api/WarehouseOut/SetWarehouseOutApply", that.outobj, res => {
              that.loading = false;
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.outobj.WarehouseOutGoodsList = []
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            })
          }).catch(() => {

          });

        }



      },
      changeNum(row, val) {
        if (val == '' || val == 0) { //当输入 空和0 的时候做的处理
          this.tableData.forEach(x => {
            if (x.Id == row.Id) {
              x.NewNumber = 0
            }
          });
        }
      },
      costBtn(obj, index) {

        this.outindex = index
        if (this.ERPEmpId == 0) {
          this.Error('您还未授权，不能修改规格');
        } else {
          this.assetsApipost("/api/WarehouseOut/GetSuppliesMaterialList", {
            GoodsId: obj.GoodsId
          }, res => {
            if (res.data.resultCode == 1) {
              this.SpecList = res.data.data;
              this.SpecList.forEach(x => {
                x.IScheck = false;
                if (x.SpecificationKey == obj.NewSpecificationSort) {

                  x.IScheck = true;

                }

              })
              this.AtterDig = true
            } else {
              this.Error(res.data.message);
            }
          })
        }
      },
      getSpecification(val) {
        //给Goodsobj赋值

        this.GoodsList.forEach(x => {
          if (x.Id == val) {

            this.Goodsobj.NewGoodsId = x.Id;
            this.Goodsobj.NewGoodsName = x.Name;
          }
        })
        //获取规则列表
        this.assetsApipost("/api/WarehouseOut/GetSuppliesMaterialList", {
          GoodsId: val
        }, res => {
          if (res.data.resultCode == 1) {
            this.SpecificationList = res.data.data;

          } else {
            this.Error(res.data.message);
          }
        })

      },
      getSort(val) {
        this.SpecificationList.forEach(x => {
          if (x.SpecificationKey == val) {
            this.Goodsobj.NewSpecification = x.SpecificationName;
            this.Goodsobj.NewSpecificationSort = x.SpecificationKey;
          }
        })
      },
      editGoods(obj, index) {
        if (this.ERPEmpId == 0) {
          this.Error('您还未授权，不能修改商品');
        } else {
          this.Egoods = true;
          this.editGoodsindex = index
          this.Goodsobj = obj
          this.Goodsobj.NewGoodsId = '';
          this.Goodsobj.NewSpecificationSort = '';

        }
      },
      ChangeListName(val) {
        this.goodsmsg.Name = val;
        this.getgoodsList();
      },
      getgoodsList() {
        if (this.goodsmsg.Id == '') {
          this.goodsmsg.Id = 0;
        }
        this.apipost("/api/product/GetProductGoodsPageList", this.goodsmsg, res => {
          if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData;
            this.GoodsList = pageData
          }

        })
      },
      chooseB() {
        //删除当前的对象 把tableData2数组插入当前的位置

        this.tableData2.unshift(this.editGoodsindex, 0)
        this.tableData.splice(this.editGoodsindex, 1)
        Array.prototype.splice.apply(this.tableData, this.tableData2);
        this.Egoods = false;
        this.tableData2 = []
      },
      chooseAttr(index) {
        this.SpecList.forEach((x, i) => {
          x.IScheck = false;
          if (index == i) {
            x.IScheck = true;
          }
        })
        this.$forceUpdate();

      },
      //添加商品的时候选择商品
      addGoods() {
        let that = this
        let obj = Object.assign({}, that.Goodsobj)
        if (obj.NewGoodsId == '') {
          this.Error('请选择商品')
          return
        }
        if (obj.NewSpecificationSort == '') {
          this.Error('请选择规格')
          return
        }
        that.tableData2.push(obj)
        that.Goodsobj.NewGoodsId = '';
        that.Goodsobj.NewSpecificationSort = '';
        that.Goodsobj.NewNumber = 1;
      },
      editGoods2(row, index) {
        this.tableData2.splice(index, 1)
      },
      chooseA() {
        this.SpecList.forEach((x, i) => {
          if (x.IScheck == true) {
            this.tableData[this.outindex].NewSpecification = x.SpecificationName
            this.tableData[this.outindex].NewSpecificationSort = x.SpecificationKey
          }
        })
        this.AtterDig = false
      },
      //获取供应商
      getAllSupplier() {
        this.apipost("/api/Supplier/GetSupplierAllList", {}, res => {
          if (res.data.resultCode == 1) {
            this.SupplierData = res.data.data;
          }
        })
      },


    }
  };

</script>
<style>
  .outboundManage .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .outboundManage .AttrList {
    margin-top: 10px;
    position: relative;
    margin-right: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

</style>