<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="queryBill" :rules="rules" ref="queryBill"
                      class="demo-ruleForm">
                    <el-col :span="5">
                        <el-form-item label="航班号:" prop="flightNo" label-width="70px">
                            <el-input v-model="queryBill.flightNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" >
                        <el-form-item label="航空器注册号:" prop="aircraftNo" label-width="110px" >
                            <el-input v-model="queryBill.aircraftNo"></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="5" >
                     <el-form-item label="进出港:" prop="accessFlag" label-width="70px">
                         <el-input v-model="queryBill.accessFlag"></el-input>
                     </el-form-item>
                 </el-col>
                    <el-col :span="5" >
                        <el-form-item label="航班日期:" prop="flightDate" label-width="80px" >
                            <el-date-picker
                                    v-model="queryBill.flightDate"
                                    type="date"
                                    value-format="yyyyMMdd"
                                    format="yyyyMMdd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="2" >
                        <el-button type="primary" @click="submitForm()" style="padding-left:10px">查询</el-button>
                    </el-col>
                 </el-form>
            </el-row>
            <!--表单区域-->
            <el-row>
                <el-table
                        :data="tableData"
                        border
                        v-loading="tableloading"
                        style="width: 100%;margin-bottom: 10px">
                    <el-table-column
                            fixed="left"
                            label="操作"
                            width="200">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="showPerson(scope.$index,scope.row)">添加机组人员</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop=aircraftNo"
                            label="航空器注册号">
                    </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="accessFlag"
                            label="进出港标识">
                    </el-table-column>
                    <el-table-column
                            prop="departureAirport"
                            label="出发港">
                    </el-table-column>
                    <el-table-column
                            prop="departuredatetime"
                            label="出发时间">
                    </el-table-column>
                    <el-table-column
                            prop="arrivalAirport"
                            label="目的港">
                    </el-table-column>
                    <el-table-column
                            prop="arrivaldatetime"
                            label="到达时间">
                    </el-table-column>
                    <el-table-column
                            prop="statusMsg"
                            label="海关回执">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            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="success">保存并发送</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="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-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-main>
        <!--添加机组人员dialog-->
        <el-row>
            <el-dialog title="机组人员添加" :visible.sync="dialogTableVisibles" >
                <el-form :model="billperson" :rules="brules" ref="billperson" label-width="130px"  class="demo-ruleForm">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="billperson.name" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="性别" prop="gender">
                                <el-input v-model="billperson.gender" placeholder="M/F"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="证件类型" prop="certType">
                                <el-input v-model="billperson.certType" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="证件号码" prop="ceterNo">
                                <el-input v-model="billperson.ceterNo" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="国籍" prop="nationality">
                                <el-input v-model="billperson.nationality" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="职务" prop="gareer">
                                <el-input v-model="billperson.gareer" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="meno">
                                <el-input v-model="billperson.meno" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">   <el-button type="primary" @click="submitPerson('billperson')" style="float: right">提 交</el-button></el-col>
                    </el-row>
                </el-form>
                <el-row>
                    <el-table
                            :data="tableData2"
                            border
                            style="width: 100%;margin-bottom: 10px">
                        <el-table-column
                                fixed="left"
                                prop="name"
                                label="姓名">
                        </el-table-column>
                        <el-table-column
                                prop="gender"
                                label="性别">
                        </el-table-column>
                        <el-table-column
                                prop="nationality"
                                label="国籍">
                        </el-table-column>
                        <el-table-column
                                prop="certType"
                                label="证件类型">
                        </el-table-column>
                        <el-table-column
                                prop="ceterNo"
                                label="证件编辑">
                        </el-table-column>
                        <el-table-column
                                prop="gareer"
                                label="职务">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                prop="meno"
                                label="备注">
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-dialog>
        </el-row>
        <!--对话提示框-->
        <el-row>
            <el-dialog
                    title="系统提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <span>{{msg}}</span>
                <span slot="footer" class="dialog-footer">
                          <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                      </span>
            </el-dialog>
        </el-row>

    </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 { addBillPerson, editBill, selectBill, selectReturnMsg} from "../../api/transport";
    import loginUserInfo from "../../api/base";
    export default {
        data(){
            return{
                queryBill:{
                    flightNo:undefined,
                    aircraftNo:undefined,
                    flightDate:undefined,
                    accessFlag:undefined,
                },
                billperson:{
                    autoId:undefined,
                    name:undefined,
                    gender:undefined,
                    gareer:undefined,
                    nationality:undefined,
                    certType:undefined,
                    ceterNo:undefined,
                    createTime:undefined,
                    createBy:loginUserInfo.username,
                    updateTime:undefined,
                    updateBy:loginUserInfo.username,
                    meno:undefined,
                    isDelete:undefined,
                    billsId:undefined
                },
                brules:{
                    name: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    certType: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    ceterNo: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    nationality: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    gareer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                },
                dialogTableVisibles:false,
                tableloading:false,
                rules:{},
                labelPosition:'left',
                currentPage: 1,
                pageSize:10,
                total:0,
                tableData:[],
                tableData2:[],
                gridData:[],
                dialogTableVisible: false,
                centerDialogVisible:false,
                msg:undefined
            }
        },
        methods: {
            //添加机组人员按钮
            showPerson(index,row){
                this.dialogTableVisibles=true;
                this.billperson.billsId=row.uuid;
            },
            //提交按钮
            submitPerson(formName){
                //console.log(this.billperson.billsId)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addBillPerson(this.billperson).then(res=>{
                            let response=res.data;
                            if(response.code=='200'){
                                this.centerDialogVisible=true;
                                this.msg=response.msg;
                            }else{
                                this.msg=response.msg;
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //查询回执列表
            selectDetail(index,row){
                this.gridData=[];
                this.dialogTableVisible=true;
                let params={messageid:row.messageid};
                selectReturnMsg(params).then(res=>{
                    let response=res.data.data;
                    this.gridData=response;
                });
            },
            //获取单据列表
            submitForm(){
                let params={currentPage:this.currentPage,pageSize:this.pageSize,flightNo:this.queryBill.flightNo,
                    aircraftNo:this.queryBill.aircraftNo,flightDate:this.queryBill.flightDate,accessFlag:this.queryBill.accessFlag};
                this.tableloading=true;
                selectBill(params).then(res=>{
                    let response=res.data.data;
                    this.tableData=response.list;
                    this.tableloading=false;
                    this.total=response.total;
                });
            },
            //列表删除功能
            handleDel(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    editBill(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.queryBill, this.$route.query);
            },
            //编辑单据查询
            handleEdit(index,row){
                this.$router.push({path:'/bill',query:row})
            },
            //分页
            handleSizeChange(val) {
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.submitForm();
            }
        },
        //渲染方法
        mounted(){
            this.defaultData();
            this.submitForm();
        }
    }
</script>