<template>
    <el-container>
        <el-main>
            <el-row class="row-bg">
                <el-col :span="24"><div class="grid-content content co">进港运单申报</div></el-col>
            </el-row>
            <!--查询条件-->
            <el-row>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-input placeholder="" v-model="defaultQuery.awba">
                            <template slot="prepend">主单号</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-content">
                            <el-input placeholder="" v-model="vcarrier">
                                <template slot="prepend">承运人</template>
                            </el-input>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-content">
                        <el-input placeholder="" v-model="defaultQuery.flightno">
                            <template slot="prepend">航班号</template>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="5">
                    <div class="grid-content">
                        <div class="block">
                            <el-date-picker
                                    v-model="defaultQuery.flightdate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="航班日期">
                            </el-date-picker>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <div class="grid-content">
                        <el-select v-model="defaultQuery.status" placeholder="选择状态" class="sel">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="5">
                    <el-select v-model="defaultQuery.messageType" placeholder="报文类型" class="sel">
                        <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="5">
                    <el-col :span="8" style="margin-right: 0px">
                        <el-button type="primary" v-on:click="QueryData">查询</el-button>
                    </el-col>
                    <el-col :span="16" style="margin-right: 0px">
                        <el-button type="primary">批量修改状态</el-button>
                    </el-col>
                </el-col>
            </el-row>
            <!--查询结果样式-->
            <el-row>
                <el-col :span="1" class="mark"><div class="grid-content bg" style="color: red"><span>注：</span></div></el-col>
                <el-col :span="2" class="mark"><div class="grid-content bg mainse" ><span>主单原始舱单</span></div></el-col>
                <el-col :span="2" class="mark"><div class="grid-content bg fense" ><span>分单原始舱单</span></div></el-col>
                <el-col :span="2" class="mark"><div class="grid-content bg tallse" ><span>主单理货报告</span></div></el-col>
                <el-col :span="2" class="mark"><div class="grid-content bg tallfense" ><span>分单理货报告</span></div></el-col>
            </el-row>
            <!--查询列表-->
            <el-row>
                <el-col :span="24">
                    <template>
                        <el-table
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                :default-sort = "{prop: 'date', order: 'descending'}"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="45">
                            </el-table-column>
                            <el-table-column
                                    fixed="left"
                                    label="操作"
                                    width="75">
                                <template slot-scope="scope">
                                    <el-button
                                            v-if="scope.row.stype=='MT1201'"
                                            @click="handleClick(scope.row)" type="text" size="small">原始舱单</el-button>
                                    <el-button
                                            v-else
                                            @click="handleTally(scope.row)" type="text" size="small">进港理货</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="航班号"
                                    width="75">
                                <template slot-scope="scope">
                                    <span>{{scope.row.carrier}}{{scope.row.flightno}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="flightdate"
                                    label="航班日期"
                                    width="95">
                            </el-table-column>
                            <el-table-column
                                    label="航段"
                                    width="90">
                                <template slot-scope="scope">
                                    <span>{{scope.row.originstation}}-{{scope.row.destinationstation}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="awba"
                                    label="主单号"
                                    width="115"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="awbh"
                                    label="分单号"
                                    width="130">
                            </el-table-column>
                            <el-table-column
                                    prop="piece"
                                    label="件数"
                                    width="60">
                            </el-table-column>
                            <el-table-column
                                    prop="weight"
                                    label="重量"
                                    width="70">
                            </el-table-column>
                            <el-table-column
                                    prop="customcode"
                                    label="关区号"
                                    width="65">
                            </el-table-column>
                            <el-table-column
                                    prop="actime"
                                    label="时间"
                                    width="155">
                                <template slot-scope="scope">{{timestampToTime(scope.row.actime)}}</template>
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="状态"
                                    width="90" :formatter="formatStatus">
                            </el-table-column>
                            <el-table-column
                                    prop="ext5"
                                    label="回执内容"
                                    width="250">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
            </el-row>
            <!--分页部分-->
            <el-row>
                <el-col>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[100, 200, 300, 400]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<style scoped>
    .co{height: 36px;line-height: 36px;}
    .co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px}
    .row-bg{background-color: white;padding:0px;}
    .el-row{margin-bottom: 10px;}
    .sel{display: inline;}
    .mark{height:24px;}
    .bg{height:24px;text-align: center;line-height:24px;min-height: 24px}
    .mainse{background: #5BB75B}
    .fense{background-color: #12B399}
    .tallse{background-color: #FA9403}
    .tallfense{background-color: #C55124}
    .cell{background: #5BB75B}
    .cell2{background-color: #12B399}
    .el-input-group{
        display: table;
    }
</style>
<script>
    import { QueryData } from '../../api/wayDeclaration'
    export default {
        data() {
            return {
                defaultQuery:{
                    awba:'',
                    carrier:'',
                    flightno:'',
                    flightdate:'',
                    status:'',
                    messageType:''
                },
                options: [
                    {
                    value: '',
                    label: '业务状态'
                }, {
                    value: '22',
                    label: '未发送'
                }, {
                    value: '23',
                    label: '已发舱单报'
                }, {
                    value: '03',
                    label: '舱单报退单'
                }],
                options2: [
                    {
                    value: '',
                    label: '业务类型'
                }, {
                    value: 'MT1201',
                    label: '原始舱单'
                }, {
                    value: 'MT5201',
                    label: '进港理货'
                }],
                tableData: [],
                multipleSelection: [],
                currentPage:1,
                pageSize:100,
                total:0
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick(row) {
                console.log(row);
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.QueryData();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.QueryData();
            },
            //状态适配
            formatStatus:function (row,column) {
                return row.status=='01'?'接受申报':row.status=='02'?'待人工审核':row.status=='03'?'退单'
                    :row.status=='11'?'放行':row.status=='12'?'拒装':row.status=='13'?'禁卸'
                        :row.status=='21'?'可自动发送':row.status=='22'?'未发送':row.status=='23'?'已发送新增报'
                            :row.status=='24'?'已发送删除报':row.status=='25'?'已发送修改报':'';
            },
            //条件查询方法
            QueryData(){
                let params={currentPage:this.currentPage,pageSize:this.pageSize,awba:this.defaultQuery.awba,carrier:this.defaultQuery.carrier,
                    flightno:this.defaultQuery.flightno,flightdate:this.defaultQuery.flightdate,status:this.defaultQuery.status,messageType:this.defaultQuery.messageType};
                this.listLoading = true;
                QueryData(params).then(res =>{
                    console.log(res)
                    let response=res.data.data;
                    this.tableData=response.list;
                    this.total=response.total;
                    this.listLoading = false;
            });
            },
            //点击进入原始页面
            handleClick(row){
                this.$router.push({name:'进港原始舱单',params:{flightno:row.carrier+row.flightno,destinationstation:row.destinationstation,awba:row.awba,flightdate:row.flightdate,originstation:row.originstation}});
            },
            //点击进入理货页面
            handleTally(row){
                this.$router.push({name:'进港理货舱单',params:{flightno:row.carrier+row.flightno,destinationstation:row.destinationstation,awba:row.awba,flightdate:row.flightdate,originstation:row.originstation}});
            },
            //table显示时间转换
            timestampToTime(timestamp) {
                var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
                return Y+M+D+h+m+s;
            },
            },
        computed:{
            vcarrier:{
                get:function () {
                    return this.defaultQuery.carrier;
                },
                set:function (val) {
                    this.defaultQuery.carrier=val.toUpperCase();
                }
            }
        },

    }
</script>