<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 style="display: block;background-color: white">
                <el-row>
                    <el-col :span="6">
                        <el-input placeholder="" v-model="defaultQuery.awba" style="width: 90%" clearable>
                            <template slot="prepend">主单号</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="" v-model="vcarrier" style="width: 90%" clearable>
                            <template slot="prepend">承运人</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="" v-model="defaultQuery.flightno" style="width: 90%" clearable>
                            <template slot="prepend">航班号</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <div class="ip">
                            航班日期
                        </div>
                        <el-date-picker
                                v-model="defaultQuery.flightdate"
                                type="date"
                                value-format="yyyy-MM-dd"  style="width: 140px"
                                placeholder="航班日期">
                        </el-date-picker>
                    </el-col>
                </el-row>
                <el-row >
                    <el-col :span="6">
                        <div class="ip">
                            业务状态
                        </div>
                        <el-select v-model="defaultQuery.status" placeholder="选择状态" style="width: 125px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <div class="ip">
                            报文类型
                        </div>
                        <el-select v-model="defaultQuery.messageType" placeholder="报文类型" style="width: 125px">
                            <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="6">
                        <el-col :span="8" style="margin-right: 0px">
                            <el-button type="primary" v-on:click="QueryData" icon="el-icon-search">查&nbsp;询</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-row style="font-size: xx-small">
                <el-col :span="1" class="mark"><div class="grid-content bg" style="color: red"><span>注：</span></div></el-col>
                <el-col :span="3" class="mark"><div class="grid-content bg mainse" style="border-radius: 5px;margin-right: 5px;background-color: rgba(99,205,218,0.4)" ><span>主单原始舱单</span></div></el-col>
                <el-col :span="3" class="mark"><div class="grid-content bg fense" style="border-radius: 5px;margin-right: 5px;background-color: rgba(119,139,235,0.3)"><span>分单原始舱单</span></div></el-col>
                <el-col :span="3" class="mark"><div class="grid-content bg tallse" style="border-radius: 5px;margin-right: 5px;background-color: rgba(243,166,131,0.4)"><span>主单理货报告</span></div></el-col>
                <el-col :span="3" class="mark"><div class="grid-content bg tallfense" style="border-radius: 5px;margin-right: 5px;background-color: rgba(247,215,148,0.4)"><span>分单理货报告</span></div></el-col>
            </el-row>
            <!--查询列表-->
            <el-row>
                <el-col :span="24">
                    <template>
                        <el-table
                                v-loading="tableloading"
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
                                :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                                :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
                                    label="主单号"
                                    width="115"
                                    >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.stype=='MT1201'&&scope.row.awbh==''" style="background-color:rgba(99,205,218,0.4);width: 100%;height:100%;display:block;color: black">
                                        {{scope.row.awba}}
                                    </span>
                                    <span v-else-if="scope.row.stype=='MT1201'&&scope.row.awbh!=''" style="background-color:rgba(119,139,235,0.3);width: 100%;height:100%;display:block;color: black">
                                        {{scope.row.awba}}
                                    </span>
                                    <span v-else-if="scope.row.stype=='MT5201'&&scope.row.awbh==''" style="background-color:rgba(243,166,131,0.4);width: 100%;height:100%;display:block;color: black">
                                        {{scope.row.awba}}
                                    </span>
                                    <span v-else-if="scope.row.stype=='MT5201'&&scope.row.awbh!=''" style="background-color:rgba(247,215,148,0.4);width: 100%;height:100%;display:block;color: black">
                                        {{scope.row.awba}}
                                    </span>
                                </template>
                            </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
                                    label="回执内容"
                                    width="250">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.ext5 && scope.row.ext5.indexOf('异常') != -1" style="color: #F56C6C">
                                       {{scope.row.ext5}}
                                    </span>
                                    <span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不通过') != -1" style="color: #F56C6C">
                                       {{scope.row.ext5}}
                                    </span>
                                    <span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不接受') != -1" style="color: #F56C6C">
                                       {{scope.row.ext5}}
                                    </span>
                                    <span v-else-if="scope.row.status=='01' || scope.row.status=='11'" style="color: #67C23A">
                                        {{scope.row.ext5}}
                                    </span>
                                    <span v-else-if="scope.row.status=='02' || scope.row.status=='03'" style="color: #E6A23C">
                                        {{scope.row.ext5}}
                                    </span>
                                    <span v-else-if="scope.row.status=='12' || scope.row.status=='13'" style="color: #f56c6c">
                                        {{scope.row.ext5}}
                                    </span>
                                    <span v-else style="color: #909399;">
                                        {{scope.row.ext5}}
                                    </span>
                                </template>
                            </el-table-column>
<!--                            || scope.row.ext5.indexOf('不通过') != -1 || scope.row.ext5.indexOf('不接受') != -1-->
                        </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="[20, 50, 100, 200]"
                                :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>
    .ip{
        max-width: 100px;
        margin-right: -5px;
        display: inline-block;
        background-color: #6F8294;
        color: #ffffff;
        border: 1px solid #DCDFE6;
        vertical-align: middle;
        padding: 5px 18px;
        white-space: nowrap;
        border-top-right-radius: 0px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 0px;
        font-size: 10px;
    }
    .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: #67C23A}
    .fense{background-color: #409eff}
    .tallse{background-color: #FF8C00}
    .tallfense{background-color: #e6a23c}
    .cell{background: #5BB75B}
    .cell2{background-color: #12B399}
    .el-input-group{
        display: table;
    }
</style>
<script>
    import { QueryData } from '../../api/wayDeclaration'
    import {mapActions, mapGetters} from 'vuex'
    import {loginedUserInfo} from "../../api/user";
    import jsutil from "@/common/js/util";
    export default {
        name:'Waybill',
        data() {
            return {
                defaultQuery:{
                    awba:'',
                    carrier:'',
                    flightno:'',
                    flightdate:'',
                    status:'',
                    messageType:'',
                    departmentid:''
                },
                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:20,
                total:0,
                tableloading:false
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            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(){
                if(jsutil.checkNull(this.defaultQuery.awba)||jsutil.checkNull(this.defaultQuery.flightdate)){
                    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,
                        departmentid:loginedUserInfo().companyInfo.departmentid
                    };
                    this.tableloading=true;
                    QueryData(params).then(res =>{
                        let response=res.data.data;
                        this.tableData=response.list;
                        this.total=response.total;
                        this.tableloading = false;
                    }).catch(err => {
                        this.tableloading = false;
                    });
                }
                else {
                    this.$confirm('主单号和航班日期至少选填一项！', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                }
            },
            //点击进入原始页面
            handleClick(row){
                this.$router.push({path:'/origmaster',
                    query:{
                        flightno:row.carrier+row.flightno,
                        destinationstation:row.destinationstation,
                        awba:row.awba,
                        flightdate:row.flightdate,
                        originstation:row.originstation
                    }
                });
            },
            //点击进入理货页面
            handleTally(row){
                this.$router.push({path:'/tallymaster',query:{flightno:JSON.stringify(row.carrier+row.flightno),destinationstation:JSON.stringify(row.destinationstation),awba:JSON.stringify(row.awba),flightdate:JSON.stringify(row.flightdate),originstation:JSON.stringify(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();
                }
            },
            ...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
        },

    }
</script>