<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="4">
                <el-input
                        placeholder="航空器注册编号"
                        v-model="query.aircraftno"
                        size="medium"
                        clearable>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-input
                        placeholder="进境（港）航班号"
                        v-model="query.flightno"
                        size="medium"
                        clearable>
                </el-input>
            </el-col>
            <el-col :span="8">
                <div class="block">
                    <el-date-picker
                            v-model="query.flightdate"
                            type="daterange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="medium"
                            align="right">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="2">
                <el-button size="medium" type="primary" plain>查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button size="medium" type="success" @click="addForm()" plain>新增</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="messageid"
                        label="编号"
                        width="320">
                </el-table-column>
                <el-table-column
                        prop="aircraftno"
                        label="航空器注册编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="flightno"
                        label="进境（港）航班号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="callport"
                        label="停靠港"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="flightdate"
                        label="航班日期"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="海关状态"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="140">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row :gutter="10">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                </el-pagination>
            </div>
        </el-row>
            <el-dialog
                    :title="'在港信息'+textMap[dialogStatus]"
                    :visible.sync="dialogVisible"
                    width="80%"
                    center>
                <el-form :model="form" label-width="130px">
                    <el-divider content-position="left">报给单位</el-divider>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="海关关区">
                                <el-select v-model="form.customcode"
                                           filterable
                                           allow-create
                                           default-first-option
                                           remote
                                           :remote-method="getCustomCode"
                                           :loading="loading" placeholder="请选择">
                                    <el-option
                                            v-for="item in customcodes"
                                            :key="item.customcode"
                                            :label="item.customcode"
                                            :value="item.customcode">
                                        <span style="float: left">{{ item.customcode }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">-{{ item.customname }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider content-position="left">航空器信息</el-divider>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="航空器注册编号">
                                <el-input v-model="form.aircraftno"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="注册海关关区">
                                <el-input v-model="form.registeredcustom"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="航空器备案类型">
                                <el-input v-model="form.aircrafttype"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider content-position="left">在港申报信息</el-divider>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="进境（港）航班号">
                                <el-input v-model="form.flightno"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="航班日期">
                                <el-input v-model="form.flightdate"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="停靠港">
                                <el-input v-model="form.callport"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="停机位">
                                <el-input v-model="form.callarea"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider content-position="left">备注信息</el-divider>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="滞留原因">
                                <el-input v-model="form.reasons"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="海关备注">
                                <el-input v-model="form.remark"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6">
                            <el-form-item>
                                <el-button @click="dialogVisible=false">取消</el-button>
                                <el-button type="primary">暂存</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
    </div>
</template>
<script>
    import {selectBycustomcode} from "../../api/transport/transport2.0";

    export default {
        data(){
            return{
                query:{
                    aircraftno:'',
                    flightno:'',
                    flightdate:''
                },
                customcodes:[],
                form:{
                    uuid:'',
                    customcode:'',
                    aircraftno:'',
                    registeredcustom:'',
                    aircrafttype:'',
                    flightno:'',
                    flightdate:'',
                    callport:'',
                    callarea:'',
                    reasons:'',
                    remark:'',
                    userid:'',
                    status:'',
                    statusmsg:'',
                    messageid:''
                },
                dialogVisible: false,
                currentPage4: 4,
                textMap:{
                    update: '编辑',
                    create: '新增'
                },
                dialogStatus:'',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                tableData: [{
                    messageid: 'CN_CAM006_1P2_460470678920X20211028075151',
                    aircraftno: 'N345UP',
                    flightno: '5X174',
                    callport: 'CGO',
                    flightdate: '2024-11-15',
                    status: '01'
                }]
            }
        },
        methods:{
            //获取关区代码
            getCustomCode:function(query){
                this.customcodes=[];
                let params={customcode:query};
                this.loading = true;
                selectBycustomcode(params).then(res =>{
                    if (res !== '') {
                        setTimeout(() => {
                            this.loading = false;
                            this.customcodes=res.data.data;
                        }, 200);
                    } else {
                        this.customcodes = [];
                    }

                });
            },
            //新增
            addForm(){
                this.dialogVisible=true;
                this.dialogStatus='create';
            },
            handleClick(row) {
                console.log(row);
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>