<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="airline" :rules="rules" ref="airline" label-width="100px" class="demo-ruleForm">
                    <el-col :span="6">
                                <el-form-item label="出发港" prop="departurePort" label-width="120px">
                                <el-input @input="e => airline.departurePort=inputMe(e)" v-model="airline.departurePort"
                                          maxLength='3' ></el-input>
                            </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出发港关区" prop="departureCustomNo" label-width="120px">
                            <el-input v-model="airline.departureCustomNo" oninput="value=value.replace(/[^\d]/g,'')"
                                      maxLength='4'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="目的港" prop="arrivalPort" label-width="120px">
                            <el-input v-model="airline.arrivalPort" @input="e => airline.arrivalPort=inputMe(e)"
                                      maxLength='3'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="目的港关区" prop="arrivalCustomNo" label-width="120px">
                            <el-input v-model="airline.arrivalCustomNo" oninput="value=value.replace(/[^\d]/g,'')"
                                      maxLength='4'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="航线序号" prop="serialNo" label-width="120px">
                            <el-input v-model="airline.serialNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注内容" prop="meno" label-width="120px">
                            <el-input type="textarea" :rows="5" v-model="airline.meno"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="margin-bottom: 20px">
                            <el-col :span="24">
                                <div class="grid-content content">长期飞行计划<el-button type="primary" size="mini" @click="selectLongplan()" style="margin-left:25px">长期飞行计划查询</el-button></div>
                            </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="每周执行情况" prop="plan" label-width="120px">
                            <el-input v-model="airline.plan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="长期离港时间" prop="std" label-width="120px">
                            <el-time-picker
                                    v-model="airline.std"
                                    :picker-options="{
                                    selectableRange: '00:00:00 - 23:59:59'
                                    }"
                                    format="HHmmss"
                                    style="width:100%"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="长期抵港时间" prop="sta" label-width="120px">
                            <el-time-picker
                                    v-model="airline.sta"
                                    :picker-options="{
                                    selectableRange: '00:00:00 - 23:59:59'
                                    }"
                                    format="HHmmss"
                                    style="width:100%"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="有效起始时间" prop="effStartdate" label-width="120px">
                            <el-date-picker
                                    v-model="airline.effStartdate"
                                    type="date"
                                    value-format="yyyyMMdd"
                                    format="yyyyMMdd"
                                    style="width:100%"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="有效结束时间" prop="effEnddate" label-width="120px">
                            <el-date-picker
                                    v-model="airline.effEnddate"
                                    type="date"
                                    value-format="yyyyMMdd"
                                    format="yyyyMMdd"
                                    style="width:100%"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark" label-width="120px">
                            <el-input v-model="airline.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="margin-left: 120px">
                        <el-button type="primary" @click="submitForm('airline')">保 存</el-button>
                        <el-button type="success">保存并发送</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <el-row>
                    <el-dialog title="长期飞行计划" :visible.sync="dialogTableVisible">
                        <el-table
                                :data="tableData"
                                border
                                v-loading="tableloading"
                                style="width: 100%;margin-bottom: 10px">
                            <el-table-column
                                    fixed="left"
                                    label="选择"
                                    width="150">
                                <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="std"
                                    label="长期离港时间"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="sta"
                                    label="长期抵港时间"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="effStartdate"
                                    label="有效起始日期"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="effEnddate"
                                    label="有效结束日期"
                                    width="180">
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage4"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </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-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;
    }
    .el-col{margin-right: 0px;}
</style>
<script>
    const fecha = require('fecha');
    import {addRoute,selectLongTimePlan} from '../../api/transport'
    import loginUserInfo from '../../api/base'
    export default {
        data(){
          return{
              airline:{
                  uuid:undefined,
                  serialNo:undefined,
                  departurePort:undefined,
                  arrivalPort:undefined,
                  departureCustomNo:undefined,
                  arrivalCustomNo:undefined,
                  cancelFlag:undefined,
                  meno:undefined,
                  planno:undefined,
                  std:undefined,
                  sta:undefined,
                  effStartdate:undefined,
                  effEnddate:undefined,
                  plan:undefined,
                  remark:undefined,
                  createTime:undefined,
                  createBy:loginUserInfo.username,
                  updateTime:undefined,
                  updateBy:loginUserInfo.username,
                  isDelete:undefined,
              },
              longtimeplan:{
                  createBy:loginUserInfo.username
              },
              rules: {
                  departurePort: [
                      //{ min: 3, max: 3, message: '长度在3个字符', trigger: 'blur'},
                      {required: true, message: '请输入(三字码)', trigger: 'blur'},
                  ],
                  departureCustomNo: [
                      {required: true, message: '请输入四位（数字）关区代码', trigger: 'blur'}
                  ],
                  arrivalPort: [
                      {required: true, message: '请输入(三字码)', trigger: 'blur'},
                  ],
                  arrivalCustomNo: [
                      {required: true, message: '请输入四位（数字）关区代码', trigger: 'blur'}
                  ],
                  serialNo:[
                      {required: true, message: '请输入航线序号', trigger: 'blur'}
                  ],
                  plan: [
                      {required: true, message: '请输入', trigger: 'blur'},
                  ],
                  std: [
                      {required: true, message: '请选择时间', trigger: 'blur'}
                  ],
                  sta: [
                      {required: true, message: '请选择时间', trigger: 'blur'},
                  ],
                  effStartdate: [
                      {required: true, message: '请选择时间', trigger: 'blur'}
                  ],
                  effEnddate:[
                      {required: true, message: '请选择时间', trigger: 'blur'}
                  ]
              },
              tableData: [],
              //长期飞行计划弹框
              dialogTableVisible:false,
              //系统提示框
              centerDialogVisible:false,
              currentPage4:1,
              pageSize:10,
              total:0,
              msg:undefined,
              tableloading:false
          }
        },
        methods:{
            //查询长期飞行计划列表
            selectLongplan(){
                this.dialogTableVisible=true;
                this.tableloading=true;
                selectLongTimePlan(this.longtimeplan).then(res=>{
                    let response=res.data.data;
                    this.tableData=response.list;
                    this.tableloading=false;
                    this.total=response.total;
                });
            },
            //新增航线方法（保存按钮）
            submitForm(formName) {
                //重新定义范围域
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //重新定义airline
                        addRoute(this.airline).then(res=>{
                            let response=res.data;
                            if(response.code=='200'){
                                this.centerDialogVisible=true;
                                this.msg=response.msg;
                                this.$router.push({path:'/queryRoute',query:{serialNo:this.airline.serialNo}});
                                this.centerDialogVisible=false;
                            }else{
                                this.centerDialogVisible=true;
                                this.msg=response.msg;
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //分页方法
            handleSizeChange(val) {
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.submitForm();
            },
            //长期飞行计划选择功能
            handleEdit(index,row){
                this.airline.std=fecha.parse(row.std,'HHmmss');
                this.airline.sta=fecha.parse(row.sta,'HHmmss');
                this.airline.effStartdate=row.effStartdate;
                this.airline.effEnddate=row.effEnddate;
                this.dialogTableVisible=false;
            },
            //加载默认值
            defaultData(){
                if(this.$route.query.uuid!=null){
                    let ob=Object.assign(this.airline, this.$route.query);
                    if(ob.sta!=null && ob.sta!=undefined && ob.sta!=""){
                        this.airline.sta=fecha.parse(ob.sta,'HHmmss');
                    }
                    if(ob.std!=null && ob.std!=undefined && ob.std!=""){
                        this.airline.std=fecha.parse(ob.std,'HHmmss');
                    }
                }
            },
            // 过滤中英文
            inputMe(e){
                return e.replace(/[^a-zA-Z]/g,'').toUpperCase();
            }
        },

        //渲染方法
        mounted(){
           this.defaultData();
        }
    }
</script>