<style scoped>
    .outboundD  .xiangq{
    padding: 15px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.outboundD .topkuang{
    padding: 5px 10px;
    border:1px solid #e2e2e2;
    background: #e2e2e2;
    border-radius: 15px;
    margin-right: 25px;
}
.outboundD .el-table th.is-leaf{
    text-align: left !important;
}
</style>

<template>
    <div class="outboundD">
        <div v-if="OtherType==15" class="xiangq">
            <div>
                <el-tag style="margin-right: 10px;">仓库名称：{{dataList2.WareHouseName}}</el-tag>
                <el-tag style="margin-right: 10px;">备注：{{dataList2.Remark}}</el-tag>
                <!-- <span class="topkuang">仓库名称：{{dataList2.WareHouseName}}</span>
                <span class="topkuang">备注：{{dataList2.Remark}}</span> -->
            </div>
        </div>
        <div v-if="OtherType==16" class="xiangq">
            <div>
                <el-tag style="margin-right: 10px;">出库状态：{{dataList.StockOutStateStr}}</el-tag>
                <el-tag style="margin-right: 10px;">出库单编码：{{dataList.StockOutNum}}</el-tag>
                <el-tag style="margin-right: 10px;">出库时间：{{dataList.UpdateDate}}</el-tag>
                <el-tag style="margin-right: 10px;">仓库名称：{{dataList.WareHouseName}}</el-tag>
                <el-tag style="margin-right: 10px;">领取人：{{dataList.EmName}}</el-tag>
                <el-tag style="margin-right: 10px;">操作人/时间：{{dataList.UpdateBy}}/{{dataList.StockOutDate}}</el-tag>

              
                
            </div>
        </div>
        <el-table v-if="OtherType==15"
            :data="dataList2.DetailList"
            border
            header-align='left'
            style="width: 100%">
            <el-table-column
                prop="Id"
                label="ID"
                width="80">
            </el-table-column>
            <el-table-column
                prop="ImageList"
                label="封面图"
                width="90">
                <template slot-scope="scope">
                    <img :src=" scope.row.MaterialModel.ImageList[0]" alt="" style="width: 60px; height: 60px;">
                </template>
            </el-table-column>
            <el-table-column
                prop="Name"
                label="商品名称"
                >
                <template slot-scope="scope">
                    <span>{{scope.row.MaterialModel.Name}}</span>
                    
                </template>
            </el-table-column>
             <el-table-column
                prop="Name"
                label="规格"
                width="300"
                >
               <template  slot-scope="scope">
                      <span v-for="(x,y) in scope.row.MaterialModel.GoodsSpecificationList" :key="y">{{x}} <span v-if="scope.row.MaterialModel.GoodsSpecificationList.length !== y+1"> , </span></span>
                </template>
            </el-table-column>
              <el-table-column
                prop="Number"
                label="采购数量"
                width="150">
            </el-table-column>
              <el-table-column
                prop="Id"
                label="已入数量"
                width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.StockInNum!=null?scope.row.StockInNum:0}}</span>
                </template>
            </el-table-column>
          
        </el-table>


        <el-table v-if="OtherType==16"
            :data="dataList.DetailList"
             header-align="left"
            border
            style="width: 100%">
            <el-table-column
            
                prop="SuppliesName"
                label="耗材名称	"
                 width="700"
                >
            </el-table-column>
            <el-table-column
                prop="SuppliesNum"
                label="耗材编码	"
                >
            </el-table-column>
            <el-table-column
                prop="CategoryName"
                label="分类名称	"
                >
            </el-table-column>
            <el-table-column
                prop="WareHouseName"
                label="品牌名称	"
                >
                <template  slot-scope="scope">
                      <span v-for="(x,y) in scope.row.GoodsCategoryList" :key="y">{{x}} <span v-if="scope.row.GoodsCategoryList.length !== y+1"> , </span></span>
                </template>
            </el-table-column>
            <el-table-column
                prop="InventoryNum"
                label="库存	"
               >
            </el-table-column>
            <el-table-column
                prop="Number"
                label="数量	"
               >
            </el-table-column>

            
            
          
        </el-table>
    </div>
</template>
<script>

export default {
    data(){
        return{
            msg:{
            pageIndex:1,
            pageSize:10,
            StockOutNum:'',
            SuppliesNum:'',
            SuppliesName:'',
            SupplierName:'',
            StartTime:'',
            EndTime:'',
            WarehouseId:'',
            EmployeeId:'',
             Id:0, 
             RB_Group_id:''
          },
          msg2:{
              ProcurementId:0,
              RB_Group_id:''
          },
          dataList:{},//出库
          dataList2:{},//采购
        OtherType:0,
        }
    },
 
    created(){
        
        this.OtherType = this.$route.query.OtherType
        let RB_Group_id = this.getLocalStorage().RB_Group_id;
      
        if(this.OtherType ==15){//采购单
            this.msg2.ProcurementId = this.$route.query.ID;
            this.msg2.RB_Group_id = RB_Group_id;
            this.getList2()
        }else if(this.OtherType == 16){//出库单
            this.msg.Id = this.$route.query.ID;
            this.msg.RB_Group_id = RB_Group_id;
            this.getList()
        }
        
    
    },
    methods:{
        getList(){
             this.apiJavaPostZc("/api/Warehouse/GetStockOutPageList",this.msg,
                res => {
                if (res.data.resultCode === 1) {
                    this.dataList = res.data.data.pageData[0]
                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        },
        getList2(){
             this.apiJavaPostZc("/api/Warehouse/GetProcurementInfo",this.msg2,
                res => {
                if (res.data.resultCode === 1) {
                     this.dataList2 = res.data.data
                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        }
    
    },mounted(){
       
    }
}
</script>