<template>
    <!--<div class="app-container">-->
    <div class="app-content">
        <div class="filter-container" style="margin-top: 50px;padding-bottom: 5px">
            <el-input v-model="listQuery.awba" @blur="inputAwba" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="运单号"/>
<!--            <el-input v-model="listQuery.carrier" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="承运人"/>-->
            <el-input v-model="flightComNo" clearable style="width: 200px;margin-right: 10px" class="filter-item" placeholder="航班号"/>
            <el-date-picker v-model="listQuery.flightDate" type="date" placeholder="航班日期"
                            value-format="yyyy-MM-dd" class="filter-item"></el-date-picker>
        </div>
        <div class="filter-container" style="padding-bottom: 5px">
            <el-select v-model="listQuery.messageType" clearable class="filter-item" placeholder="请选择报文类型" style="width: 200px;margin-right: 10px">
                <el-option v-for="item in messageTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="listQuery.messageStatus" clearable class="filter-item" placeholder="请选择报文状态" style="width: 200px;margin-right: 10px">
                <el-option v-for="item in messageStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="listQuery.customStatus" clearable class="filter-item" placeholder="请选择海关状态" style="width: 200px;margin-right: 10px">
                <el-option v-for="item in customStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button type="warning" style="width:150px" icon="el-icon-search" @click="handleSearch">查&emsp;&emsp;询</el-button>
            <el-button type="primary" style="width:150px"  icon="el-icon-search"
                       @click="handleUpdateStatus">批量修改状态</el-button>
        </div>
        <div class="midSpan">
            <el-row>
                <el-col :span="0.5">
                    <span style="color: red">注：</span>
                </el-col>
                <el-col :span="1" style="background: oldlace; margin-right: 5px" align="center">
                    <span>预配舱单</span>
                </el-col>
                <el-col :span="1" style="background: #f0f9eb; margin-right: 5px" align="center">
                    <span>出港运抵</span>
                </el-col>
                <el-col :span="1" style="background: #bce7fd; margin-right: 5px" align="center">
                    <span>出港装载</span>
                </el-col>
                <el-col :span="1" style="background: #f5ffc0" align="center">
                    <span>出港理货</span>
                </el-col>
            </el-row>
        </div>
        <el-table v-loading="listLoading" :data="manifestData" :eval-func="func" :expand-all="true"
                    style="font-size: 13px" border @selection-change="handleSelectionChange"
                    :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column label="航班号" width="80px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.carrier }}{{ scope.row.flightno }}</span>
                </template>
            </el-table-column>
            <el-table-column label="航班日期" width="100px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.flightdate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="航段" width="100px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.originstation }}-{{ scope.row.destinationstation }}</span>
                </template>
            </el-table-column>
            <el-table-column label="主单号" width="120px" align="center" >
                <template slot-scope="scope" >
                    <span>{{ scope.row.awba }}</span>
                </template>
            </el-table-column>
            <el-table-column label="分单号" width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.awbh }}</span>
                </template>
            </el-table-column>
            <el-table-column label="件数" width="60px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.piece }}</span>
                </template>
            </el-table-column>
            <el-table-column label="重量" width="60px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.weight }}</span>
                </template>
            </el-table-column>
            <el-table-column label="关区" width="60px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.customcode }}</span>
                </template>
            </el-table-column>
            <el-table-column label="时间" width="150px" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.actime }}</span>
            </template>
        </el-table-column>
            <el-table-column label="状态" width="130px" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.status ==='01'">接受申报</span>
                <span v-if="scope.row.status ==='02'">待人工审核</span>
                <span v-if="scope.row.status ==='03'">退单</span>
                <span v-if="scope.row.status ==='05'">舱单报退单</span>
                <span v-if="scope.row.status ==='06'">舱单转人工</span>
                <span v-if="scope.row.status ==='07'">舱单报申报成功</span>
                <span v-if="scope.row.status ==='08'">已发舱单删除报</span>
                <span v-if="scope.row.status ==='09'">舱单删除报退单</span>
                <span v-if="scope.row.status ==='10'">舱单删除报转人工</span>
                <span v-if="scope.row.status ==='11'">放行</span>
                <span v-if="scope.row.status ==='12'">拒装</span>
                <span v-if="scope.row.status ==='13'">禁卸</span>
                <span v-if="scope.row.status ==='14'">舱单修改报转人工</span>
                <span v-if="scope.row.status ==='15'">舱单修改报成功</span>
                <span v-if="scope.row.status ==='16'">海关已存在</span>
                <span v-if="scope.row.status ==='21'">可自动发送</span>
                <span v-if="scope.row.status ==='22'">未发送</span>
                <span v-if="scope.row.status ==='23'">已发送新增报</span>
                <span v-if="scope.row.status ==='24'">已发送删除报</span>
                <span v-if="scope.row.status ==='25'">已发送修改报</span>
            </template>
            </el-table-column>
            <el-table-column label="回执内容"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status=='01' || scope.row.status=='11'" type="success">
                        {{scope.row.customText}}
                    </el-tag>
                    <el-tag v-else-if="scope.row.status=='02' || scope.row.status=='03'" type="warning">
                        {{scope.row.customText}}
                    </el-tag>
                    <el-tag v-else-if="scope.row.status=='12' || scope.row.status=='13'" type="danger">
                        {{scope.row.customText}}
                    </el-tag>
                    <el-tag v-else>
                        {{scope.row.customText}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                    <a style="color: #1d8ce0; margin-right: 5px" v-if="scope.row.messageType==='MT2201'" @click="handleUpdate(scope.row)">预配舱单</a>
                    <a style="color: #1d8ce0; margin-right: 5px" v-if="scope.row.messageType==='MT3201'" @click="handleUpdate(scope.row)">出港运抵</a>
                    <a style="color: #1d8ce0; margin-right: 5px" v-if="scope.row.messageType==='MT4201'" @click="handleUpdate(scope.row)">出港装载</a>
                    <a style="color: #1d8ce0; margin-right: 5px" v-if="scope.row.messageType==='MT5202'" @click="handleUpdate(scope.row)">出港理货</a>
<!--                    <a style="color: #1d8ce0" @click="handleUpdateStatus(scope.row)">更改状态</a>-->
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageSize" :limit.sync="listQuery.limitSize"
                    @pagination="getList"/>
    </div>
</template>
<script>
    import treeTable from '@/components/TreeTable'
    import treeToArray from '@/utils/customEval'
    import Pagination from '@/components/Pagination'
    import {getManifests} from "@/api/exitManifest"

    import {getMt520XListForParam} from "@/api/exitTidy";
    import {getMt3201ListForParam} from "@/api/exitArrive";
    import {getMt4201ListForParam} from "@/api/exitLoading";
    import {Message} from "element-ui";

    export default {
        name: "ExitManifest",
        components: {treeTable, Pagination},
        inject:['reload'],
        data() {
            return {
                func: treeToArray,
                total: 1,
                listLoading: false,
                listQuery: {
                    pageSize: 1,
                    limitSize: 10,
                    awba:undefined,
                    carrier: '',
                    flightno:'',
                    flightDate: new Date(),
                    messageType: undefined,
                    messageStatus: undefined,
                    customStatus: undefined,
                },
                manifestData: [],
                messageTypeList: [
                    {label:'预配舱单',value:'MT2201'},
                    {label:'出港运抵',value:'MT3201'},
                    {label:'出港装载',value:'MT4201'},
                    {label:'出港理货',value:'MT5202'}
                ],
                messageStatusList: [
                    {label:'未发送',value:'01'},
                    {label:'已发舱单报',value:'02'},
                    {label:'舱单报退单',value:'05'},
                    {label:'舱单转人工',value:'06'},
                    {label:'舱单报申报成功',value:'07'},
                    {label:'已发舱单删除报',value:'08'},
                    {label:'舱单删除报退单',value:'09'},
                    {label:'舱单删除报转人工',value:'10'},
                    {label:'舱单删除成功',value:'11'},
                    {label:'已发舱单修改报',value:'12'},
                    {label:'舱单修改报退单',value:'13'},
                    {label:'舱单修改报转人工',value:'14'},
                    {label:'舱单修改报成功',value:'15'},
                    {label:'海关已存在',value:'16'},
                ],
                customStatusList: [
                    {label:'普通货物',value:'001'},
                    {label:'国际转运货物',value:'002'},
                    {label:'国内转关',value:'003'},
                    {label:'空箱',value:'004'},
                    {label:'快件',value:'006'},
                ]
            }
        },
        computed: {
            flightComNo: {
                get: function () {
                    return this.listQuery.carrier+this.listQuery.flightno;
                },
                set: function (val) {
                    this.listQuery.carrier='';
                    this.listQuery.flightno = val.toUpperCase();
                }
            }
        },
        methods: {
            getList() {
                // 主单为空 航班号 航班日期 不能为空
                if (this.listQuery.awba == undefined
                    && this.listQuery.flightno != ''){
                    this.listLoading = true
                    if (this.listQuery.flightno != '' && this.listQuery.flightno.length > 0){
                        this.listQuery.carrier = this.listQuery.flightno.substring(0,2);
                        this.listQuery.flightno = this.listQuery.flightno.substring(2);
                    }
                    getManifests(this.listQuery).then(res =>{
                        this.manifestData = res.data.data.list
                        this.total = res.data.data.total
                        setTimeout(() =>{
                            this.listLoading = false
                        },1500)
                    })
                }else if (this.listQuery.awba != undefined){
                    this.listLoading = true
                    this.listQuery.flightDate = undefined;
                    getManifests(this.listQuery).then(res =>{
                        this.manifestData = res.data.data.list
                        this.total = res.data.data.total
                        setTimeout(() =>{
                            this.listLoading = false
                        },1500)
                    })
                }else {
                    Message.warning("请输入运单号或者航班号为查询条件");
                }

            },
            inputAwba(){
                this.listQuery.flightDate = '';
            },
            handleSelectionChange() {

            },
            handleSearch(){
                this.listQuery.pageSize =1;
                this.getList()
            },
            handleUpdateStatus(row){

            },
            handleUpdate(row){
                if(row.messageType === 'MT2201'){
                    this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
                }
                if(row.messageType === 'MT3201'){
                    this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
                }
                if(row.messageType === 'MT4201'){
                    this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
                }
                if(row.messageType === 'MT5202'){
                    this.$router.push({name: '出港航班信息', params: {scopeRow: row}})
                }
            },
            tableRowClassName({row,index}){
                if(row.messageType === 'MT2201'){
                    return 'MT2201-row'
                }
                if(row.messageType === 'MT3201'){
                    return 'MT3201-row'
                }
                if(row.messageType === 'MT4201'){
                    return 'MT4201-row'
                }
                if(row.messageType === 'MT5202'){
                    return 'MT5202-row'
                }
            }
        }
    }

</script>
<style>
    .el-table .MT2201-row {
        background: oldlace;
    }

    .el-table  .MT3201-row {
        background: #f0f9eb;
    }

    .el-table .MT4201-row {
        background: #bce7fd;
    }

    .el-table .MT5202-row {
        background: #f5ffc0;
    }
    .app-content{
        margin-top: 20px;
        width: 100%;
        height: 850px;
        overflow: auto;
    }
    .midSpan{
        margin-bottom: 10px;
    }
</style>