<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>
      </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,
           WarehouseOutGoodsList:[],
       },
       msg:{
           pageIndex: 1,
          pageSize: 15,
          SupplierId:0,
          OrderNo:'',
          StartTime:'',
          EndTime:'',
         GoodsName:'',
       },
       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.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;
          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>
