<template>
    <el-container>
        <el-main>
            <el-row class="row-bg">
                <el-col :span="24">
                    <div class="grid-content content">航线查询</div>
                </el-col>
            </el-row>
            <el-row>
                <el-form :model="queryRoute" ref="serialNo" label-width="130px" >
                    <el-col :span="6">
                        <el-form-item label="航线序号" prop="serialNo" label-width="130px">
                            <el-input v-model="queryRoute.serialNo" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">   <el-button type="primary" @click="submitForm()">查 询</el-button></el-col>

                </el-form>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table
                            :data="tableData"
                            border
                            v-loading="tableloading"
                            style="width:100%;margin-bottom: 10px">
                        <el-table-column
                                fixed="left"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="serialNo"
                                label="航线序号">
                        </el-table-column>
                        <el-table-column
                                prop="departurePort"
                                label="出发港">
                        </el-table-column>
                        <el-table-column
                                prop="departureCustomNo"
                                label="出发港关区代码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="arrivalPort"
                                label="目的港">
                        </el-table-column>
                        <el-table-column
                                prop="arrivalCustomNo"
                                label="目的港关区代码"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="std"
                                label="长期离港时间">
                        </el-table-column>
                        <el-table-column
                                prop="sta"
                                label="长期抵港时间">
                        </el-table-column>
                        <el-table-column
                                prop="effStartdate"
                                label="有效期起始时间"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="effEnddate"
                                label="有效期结束时间"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="plan"
                                label="每周执行情况">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                prop="remark"
                                label="报文操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleDetail(scope.$index, scope.row)">查看明细</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-row>
        </el-main>
    </el-container>
</template>
<style scoped>
    .grid-content {
        height: 36px;
        line-height: 36px;
    }
    .el-dialog__body{text-align: center}
    .content {
        border-left: 4px #409EFF solid;
        padding-left: 10px;
        background-color: #f9fafc;
        margin-bottom: 2px
    }

    .row-bg{
        background-color: white;
    }
</style>
<script>
    import {editRoute, selectRoute} from "../../api/transport";

    export default {
        data(){
            return{
                queryRoute:{
                    serialNo:undefined,
                },
                labelPosition:'left',
                currentPage: 1,
                pageSize:10,
                total:0,
                tableData:[],
                tableloading:false,
            }
        },
        methods: {
            //分页方法
            handleSizeChange(val) {
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.submitForm();
            },
            //查看明细
            handleDetail(index,row){
                console.log(row)
            },
            //获取航线列表
            submitForm(){
                let params={currentPage:this.currentPage,pageSize:this.pageSize,serialNo:this.queryRoute.serialNo};
                this.tableloading=true;
                selectRoute(params).then(res=>{
                    let response=res.data.data;
                    this.tableData=response.list;
                    this.tableloading=false;
                    this.total=response.total;
                     });
                },
            //编辑航线功能
            handleEdit(index,row){
                this.$router.push({path:'/route',query:row})
            },
            //获取默认值
            defaultData(){
                Object.assign(this.queryRoute, this.$route.query);
            },
            //列表删除功能
            handleDelete(index,row){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        editRoute(row).then(res=>{
                            let response=res.data;
                            if(response.code=='200'){
                                this.$message({
                                    type: 'info',
                                    message: '删除成功'
                                });
                                this.submitForm();
                            }else{
                                this.$message({
                                    type: 'info',
                                    message: '删除失败'
                                });                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            }
        },
        //渲染方法
        mounted(){
            this.defaultData();
            this.submitForm();
        }
    }
</script>