<template>
    <!--<div class="app-container">-->
    <div class="app-content">
        <div class="filter-container">
            <el-input v-model="listQuery.awba" clearable style="width: 200px;" class="filter-item" placeholder="运单号"/>
            <el-input v-model="listQuery.carrier" clearable style="width: 200px;" class="filter-item" placeholder="承运人"/>
            <el-input v-model="listQuery.flightno" clearable style="width: 200px;" 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">
            <el-select v-model="listQuery.messageType" clearable class="filter-item" placeholder="请选择报文类型" style="width: 200px;">
                <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;">
                <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;">
                <el-option v-for="item in customStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button class="filter-item" type="primary" @click="handleSearch">查询</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="warning"
                       @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>
        <tree-table v-loading="listLoading" :data="manifestData" :eval-func="func" :expand-all="true"
                    style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                    tooltip-effect="dark" border @selection-change="handleSelectionChange"
                    :row-class-name="tableRowClassName">
            <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="90px" 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 ==='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>
                </template>
            </el-table-column>
            <el-table-column label="回执内容"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.customText }}</span>
                    <!--<div>-->
                    <!--<el-progress :percentage="scope.row.customComplate" :status="scope.row.status | statusFilter"/>-->
                    <!--</div>-->
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px" align="center" fixed="right">
                <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>
        </tree-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";

    export default {
        name: "LostLoadChange",
        components: {treeTable, Pagination},
        inject:['reload'],
        data() {
            return {
                func: treeToArray,
                total: 1,
                listLoading: false,
                listQuery: {
                    pageSize: 1,
                    limitSize: 100,
                    awba:undefined,
                    carrier: undefined,
                    flightno:undefined,
                    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'},
                ]
            }
        },
        methods: {
            getList() {
                this.listLoading = true
                getManifests(this.listQuery).then(res =>{
                    this.manifestData = res.data.dataList
                    this.total = res.data.count
                    setTimeout(() =>{
                        this.listLoading = false
                    },1500)
                })
            },
            handleSelectionChange() {

            },
            handleSearch(){
                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 === 'MT5201'){
                    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;
    }
    .midSpan{
        margin-bottom: 10px;
    }
</style>