<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 :label-position="labelPosition" :model="queryDeparture"  ref="queryFlight"
                         label-width="130px" class="demo-ruleForm">
<!--                    <el-col :span="6" >-->
<!--                        <el-form-item label="承运人：" prop="awcd" label-width="80px">-->
<!--                            <el-input v-model="queryDeparture.awcd" style="width:190px"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :span="6" >
                        <el-form-item label="航班号：" prop="flightNo" label-width="80px">
                            <el-input v-model="queryDeparture.flightNo" style="width:190px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item label="航班日期:" prop="flightDate" label-width="90px">
                            <el-date-picker
                                    v-model="queryDeparture.flightDate"
                                    type="date"
                                    value-format="yyyyMMdd"
                                    format="yyyyMMdd"
                                    style="width:190px"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" >
                        <el-button type="primary" @click="submitForm('queryDeparture')">查询</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <!--            表单区域-->
            <el-row>
                <el-table
                        :data="tableData"
                        border
                        height="500"
                        v-loading="tableloading"
                        style="width: 100%;margin-bottom: 10px">
                    <el-table-column
                            fixed="left"
                            label="操作"
                            width="100">
                        <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="flightNo"
                            label="航班号">
                    </el-table-column>
                    <el-table-column
                            prop="flightDate"
                            label="航班日期">
                    </el-table-column>
                    <el-table-column
                            prop="aircraftNo"
                            label="航空器注册码"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="departurePort"
                            label="出发港">
                    </el-table-column>
                    <el-table-column
                            prop="arrivalPort"
                            label="目的港">
                    </el-table-column>
                    <el-table-column
                            prop="customDistrictNo"
                            label="关区代码">
                    </el-table-column>
                    <el-table-column
                            prop="transportflag"
                            label="运输计划">
                    </el-table-column>
                    <el-table-column
                            prop="departuredatetime"
                            label="离港时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="statusMsg"
                            label="海关回执">
                    </el-table-column>
                    <el-table-column
                            prop=""
                            label="报文操作"
                            width="280">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="selectDetail(scope.$index,scope.row)">查看回执</el-button>
                            <el-button
                                    size="mini"
                                    type="warning"
                                    @click="trans_cancle(scope.row)">取消申报</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDel(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-row>
            <!--查看回执弹框-->
            <el-dialog title="回执明细" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                    <el-table-column property="sendtime" label="操作时间" ></el-table-column>
                    <el-table-column property="createBy" label="操作人" ></el-table-column>
                    <el-table-column property="flightNo" label="航班号"></el-table-column>
                    <el-table-column property="flightDate" label="航班日期" ></el-table-column>
                    <el-table-column property="receiptContent" label="回执内容" ></el-table-column>
                </el-table>
            </el-dialog>
            <!--            取消申报弹框-->
            <el-dialog title="取消申报" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="取消原因" prop="content" >
                        <el-input
                                v-model="form.content"
                                type="textarea"
                                :rows="2" required="required"
                                placeholder="取消原因必填"
                        />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="trans_add('form')">确 定</el-button>
                </div>
            </el-dialog>

        </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 {cancelPrediction, editPrediction, selectPrediction, selectReturnMsg} from "../../api/transport";

    export default {
        data(){
            return{
                queryDeparture:{
                    flightNo:undefined,
                    flightDate:undefined,
                },
                labelPosition:'left',
                pageNum: 1,
                pageSize:10,
                total:0,
                tableData:[],
                tableloading:false,
                gridData:[],
                dialogTableVisible: false,
                form:{
                    content:''
                },
                dialogFormVisible: false,
                textarea: '',
                row2:undefined
            }
        },
        methods: {
            //查询回执列表
            selectDetail(index,row){
                this.gridData=[];
                this.dialogTableVisible=true;
                let params={messageid:row.messageid};
                selectReturnMsg(params).then(res=>{
                    let response=res.data.data;
                    console.log(response)
                    this.gridData=response;
                });
            },
            //分页
            handleSizeChange(val) {
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                this.pageNum=val;
                this.submitForm();
            },
            //获取出港预报查询列表
            submitForm() {
                let params = {
                    pageNum: this.pageNum, pageSize: this.pageSize, flightNo: this.queryDeparture.flightNo,
                    flightDate: this.queryDeparture.flightDate
                };
                this.tableloading = true;
                selectPrediction(params).then(res => {
                    let response = res.data.data;
                    this.tableData = response.list;
                    this.tableloading = false;
                    this.total = response.total;
                });
            },
            //取消申报
            trans_cancle(row){
                this.dialogFormVisible=true;
                this.row2=row;
            },
            trans_add(form) {
                this.dialogFormVisible=true;
                this.row2.content=this.form.content;
                console.log(this.row2);
                // 进行表单的预验证
                // this.$refs.form.validate(valid => {
                //     // 未通过，表单预校验
                //     if (!valid) return

                cancelPrediction(this.row2).then((response) => {
                    const res = response.data
                    // 添加失败
                    if (res.code !== '200') {
                        // 关闭加载
                        return this.$message.error(res.msg)
                    }
                    // 添加，成功
                    this.$message.success(res.msg)
                    // 隐藏对话框
                    this.dialogFormVisible = false
                    // 刷新列表
                    this.submitForm()
                }).catch(error => {
                    this.$message.error(error.toString())
                })
                // })
            },
            //列表删除功能
            handleDel(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    editPrediction(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: '已取消删除'
                    });
                });
            },
            //获取默认值
            defaultData() {
                Object.assign(this.queryDeparture, this.$route.query);
            },
            //编辑进港预报
            handleEdit(index,row){
                this.$router.push({path:'/departure',query: row})
            },
        },
        //渲染方法
        mounted(){
            this.defaultData();
            this.submitForm();
        }
    }
</script>