<template>
    <div class="app-container"> 
        <el-form :inline="true" class="demo-form-inline"> 
            <el-form-item>
                <el-select v-model="pagerDto._Eq_ChannelId" placeholder="渠道" clearable filterable >
                        <el-option
                                v-for="item in channels"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
            </el-form-item> 

                
                <el-form-item>
                    <el-select v-model="pagerDto._Eq_BagType" placeholder="包装类型" clearable filterable >
                        <el-option
                            v-for="item in bagTypes"
                            :key="item.Value"
                            :label="item.Name"
                            :value="item.Value">
                            </el-option>
                        </el-select>
                </el-form-item>

                <el-form-item>
                    <el-select v-model="pagerDto._Eq_Status" placeholder="状态" clearable filterable >
                        <el-option
                            v-for="item in boxBatchStatus"
                            :key="item.Value"
                            :label="item.Name"
                            :value="item.Value">
                            </el-option>
                        </el-select>
                </el-form-item>  
            <el-form-item>
                <el-button icon="el-icon-search"  size="small"  type="primary" @click="pagerSerach">搜索</el-button>      
                <el-button icon="el-icon-plus" size="small" plain  type="primary"  @click="dialogAdd=true">新增入仓批次</el-button> 
            </el-form-item>
        </el-form>    
        <el-table :data="sData" border>
                <el-table-column label="批次号码" prop="BatchNumber" />
                <el-table-column label="渠道名称" prop="PublicName" /> 
                <el-table-column label="渠道口岸" prop="Port" />
                <el-table-column label="包装类型"> 
                    <template slot-scope="scope">  
                        <span>{{getName(scope.row.BagType,bagTypes)}}</span> 
                    </template>
                </el-table-column> 
                <el-table-column label="目标箱数" prop="BatchQty" />
                <el-table-column label="入库箱数" prop="PackingQty" />
                <el-table-column label="出库箱数" prop="OutQty" />
                <el-table-column label="状态"> 
                    <template slot-scope="scope">  
                        <span>{{getName(scope.row.Status,boxBatchStatus)}}</span> 
                    </template>
                </el-table-column>  
                <el-table-column label="操作" width="300"> 
                <template  slot-scope="scope">
                    <el-button size="mini" type="success" @click="edit(scope.row)" v-if="scope.row.Status==0">
                        编辑
                    </el-button> 
                    <el-button size="mini"  @click="endBatchScan(scope.row)" v-if="scope.row.Status==1">
                        完成扫描
                    </el-button> 
                    <el-button size="mini"  @click="batchOut(scope.row)" v-if="scope.row.Status==2">
                        绑定提单
                    </el-button> 
                    <el-button size="mini"  @click="outOrderInfos(scope.row)">
                        导出订单信息
                    </el-button> 
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :hide-on-single-page="true"
                :page-sizes="[50, 100, 150, 200]"
                :current-page="pagerDto.PageIndex"
                :page-size="pagerDto.PageSize"
                background
                layout="prev, pager, next ,total ,jumper,sizes,slot "
                :total="pagerDto.total" 
                @current-change="pagerSerach"
        >
        </el-pagination> 

          <el-dialog title="添加批次" :visible.sync="dialogAdd">
                 <el-form :model="createRow"  label-width="80px"> 
                         <el-form-item label="渠道">
                            <el-select v-model="createRow.ChannelId" placeholder="请选择" clearable filterable  >
                                <el-option
                                v-for="item in channels"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="包装类型">
                            <el-select v-model="createRow.BagType" placeholder="请选择" clearable filterable  >
                                <el-option
                                v-for="item in bagTypes"
                                :key="item.Value"
                                :label="item.Name"
                                :value="item.Value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="口岸名称">
                            <el-input  v-model="createRow.Port" min="0" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="需求件数">
                            <el-input  v-model="createRow.BatchQty" min="0" autocomplete="off" />
                        </el-form-item>
                    </el-form> 
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogAdd = false">取 消</el-button>
                        <el-button type="primary" @click="postAdd">确 定</el-button>
                    </div>
            </el-dialog>

               <el-dialog title="编辑批次" :visible.sync="dialogEdit">
                 <el-form :model="editRow"  label-width="80px">  
                        <el-form-item label="批次码">
                            <el-input  v-model="editRow.BatchNumber" min="0" autocomplete="off"  disabled/>
                        </el-form-item>

                         <el-form-item label="渠道">
                            <el-select v-model="editRow.ChannelId" placeholder="请选择" clearable filterable  >
                                <el-option
                                v-for="item in channels"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="包装类型">
                            <el-select v-model="editRow.BagType" placeholder="请选择" clearable filterable  >
                                <el-option
                                v-for="item in bagTypes"
                                :key="item.Value"
                                :label="item.Name"
                                :value="item.Value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="口岸名称">
                            <el-input  v-model="editRow.Port" min="0" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="需求件数">
                            <el-input  v-model="editRow.BatchQty" min="0" autocomplete="off" />
                        </el-form-item>
                    </el-form> 
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogEdit = false">取 消</el-button>
                        <el-button type="primary" @click="postEdit">确 定</el-button>
                    </div>
            </el-dialog>
    </div>
</template>
<script>
import{ _getDeliverChannel } from "@/api/baseInfo";
import{_getBatchs,_insert,_addDetail,_endBatchScan,_getBatch,_getBagType,_getBoxBatchStatus,_edit,_batchOut,_outOrderInfos} from"@/api/packing";

export default {
    data(){ 
        return{
            sData:[],
            dialogEdit:false,
            dialogAdd:false,
            bagTypes:[],
            boxBatchStatus:[],
            channels:[],
            pagerDto:
            {
                PageIndex:1,
                PageSize:50,
                total:0,
                QuerySort:[{Field:"UpdateTime",IsDesc:true}], 
                _Eq_ChannelId:'',
                _Eq_Port:'',
                _Eq_BagType:'',
                _Eq_Status:'',
            },
            createRow:{
                ChannelId:'',
                Port:'',
                BatchQty:'',
                BagType:''
            },
            editRow:{
                ChannelId:'',
                Port:'',
                BatchQty:'',
                BagType:'',
                Id:0,
                BatchNumber:'',
                Status:0
            }
        }
    },
    methods:{
        edit(row){
            if(row.Status!=0)
            {
                this.$message('仅允许编辑待扫描的批次码');
                return;
            }
            this.editRow = row;
            this.dialogEdit = true;
        },
        GetBatchs(){ 
            _getBatchs(this.pagerDto).then(response=>
            {
                this.sData = response.Result;   
                this.pagerDto.total = response.TotalCount;
            })
        },
        postAdd(){
            _insert(this.createRow).then(response=>{
                this.GetBatchs();
                this.dialogAdd=false;
            })
        },
        postEdit(){
            _edit(this.editRow).then(response=>{
                this.GetBatchs();
                this.dialogEdit = false;
            })
        },
        pagerSerach(pageIndex){    
            if(pageIndex&&pageIndex>0)
                this.pagerDto.PageIndex = pageIndex;
            else
                this.pagerDto.PageIndex =1;
            this.GetBatchs();            
        },
        endBatchScan(row){
            _endBatchScan({batchId:row.Id}).then(response=>{
                this.GetBatchs();
            });
        },
        batchOut(row){ 
                this.$prompt('请输入提单号', '提示').then(({ value }) => {
                    _batchOut({BatchNumber:row.BatchNumber,LaddingNumber:value}).then(response=>{
                        this.GetBatchs();
                    })                    
                })                
        },

        getName(val,list){
            for(var i=0;i<list.length;i++){
                if(list[i].Value == val)
                    return list[i].Name;                
            }
            return "";
        },
        outOrderInfos(row){
            _outOrderInfos({BatchNumber:row.BatchNumber});
        }
    },
    created(){
        this.GetBatchs(); 
        _getBagType().then(response=>{
            this.bagTypes = response;
        })
        _getBoxBatchStatus().then(response=>{
            this.boxBatchStatus = response;
        })

            _getDeliverChannel().then(response=>{
                this.channels=response;
            })
    }
}
</script>