<template>
    <el-container>
        <el-main >
            <!--检索条件-->
            <el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
                <el-col :span="6">
                    <el-input v-model="queryinfo.carrier" placeholder="承运人" style="width: 200px">
                        <template slot="prepend">承运人</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="queryinfo.flightno" placeholder="航班号" style="width: 200px">
                        <template slot="prepend">航班号</template>
                    </el-input>
                </el-col>

                <el-col :span="8">
                    <el-button type="primary" v-on:click="getList">查询</el-button>
                    <el-button type="success" v-on:click="toAddDialog">新增</el-button>

                </el-col>
            </el-row>
            <!--TableList-->
            <el-row>
                <template>
                    <el-table
                            v-loading="tableloading"
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="carrier"
                                label="承运人">
                        </el-table-column>
                        <el-table-column
                                prop="flightno"
                                label="航班号">
                        </el-table-column>
                        <el-table-column
                                prop="originatingstation"
                                label="起始站"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                prop="destinationstation"
                                label="目的站"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                prop="crossdays"
                                label="跨天天数"
                                width="70">
                        </el-table-column>
                        <el-table-column
                                prop="effectivedate"
                                label="航班计划开始时间"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="expirationdate"
                                label="航班计划结束时间"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="schedule"
                                label="航班计划航班时刻"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="state"
                                label="启/禁用">
                            <template slot-scope="scope">
                                <span v-if="scope.row.state == 1" style="color:rgb(103,194,58)">
                                       启用
                                    </span>
                                <span v-else="scope.row.state == 0" style="color: #F56C6C">
                                       禁用
                                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="150">
                            <template slot-scope="scope">
                                <el-button type="success" size="small" @click="toEditDialog(scope.row)">编辑</el-button>
                                <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
<!--            新增弹框-->
            <el-row>
                <el-dialog  :title="dialogMap[dialogStatus]"
                            :visible.sync="dialogCross.addDialog"  align="center" style="margin-left: 40px" width="70%">
                    <el-form ref="form" :model="form"  label-width="200px" label-position="right"  :inline="true" :rules="rules">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="state">
                                    <div class="ipt" style="padding-right: 105px">
                                        &emsp;&emsp;启/禁用&emsp;&emsp;
                                    </div>
                                    <el-select v-model="form.state" placeholder="请选择"  style="width: 200px" :clearable="true">
                                        <el-option v-for="item in splitcodes"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <!--                            <el-input v-model="form.state" :clearable="true"></el-input>-->
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="" prop="carrier">
                                    <el-input v-model="form.carrier" :clearable="true">
                                        <template slot="prepend">&emsp;&emsp;承运人&emsp;&emsp;</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="flightno">
                                    <el-input v-model="form.flightno" :clearable="true">
                                        <template slot="prepend">&emsp;&emsp;航班号&emsp;&emsp;</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="" prop="originatingstation">
                                    <el-input v-model="form.originatingstation" :clearable="true">
                                        <template slot="prepend">&emsp;&emsp;起始站&emsp;&emsp;</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="destinationstation">
                                    <el-input v-model="form.destinationstation" :clearable="true">
                                        <template slot="prepend">&emsp;&emsp;目的站&emsp;&emsp;</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="" prop="crossdays">
                                    <el-input v-model="form.crossdays"  :clearable="true">
                                        <template slot="prepend">&emsp;跨天天数&emsp;&emsp;</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="effectivedate">
                                    <div class="ipt" style="padding-right: 105px">
                                        航班计划开始时间
                                    </div>
                                    <el-date-picker type="date"  v-model="form.effectivedate" value-format="yyyy-MM-dd" style="width: 200px" :clearable="true"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="" prop="expirationdate" >
                                    <div class="ipt" style="padding-right: 105px">
                                        航班计划结束时间
                                    </div>
                                    <el-date-picker type="date"  v-model="form.expirationdate" value-format="yyyy-MM-dd" style="width: 200px" :clearable="true"></el-date-picker>
<!--                                    <el-date-picker type="date" value-format="yyyyMMdd" v-model="form.expirationdate" style="width: 200px" :clearable="true"></el-date-picker>-->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="" prop="schedule">
                                    <div class="ipt" style="padding-right: 105px">
                                        航班计划航班时刻
                                    </div>
                                    <el-select v-model="form.schedule" placeholder="请选择"  style="width: 200px" :clearable="true">
                                        <el-option label="周一" value="1"></el-option>
                                        <el-option label="周二" value="2"></el-option>
                                        <el-option label="周三" value="3"></el-option>
                                        <el-option label="周四" value="4"></el-option>
                                        <el-option label="周五" value="5"></el-option>
                                        <el-option label="周六" value="6"></el-option>
                                        <el-option label="周日" value="7"></el-option>
                                    </el-select>
                                    <!--                            <el-date-picker type="date" prefix-icon=0 v-model="form.schedule" style="width: 200px" :clearable="true"></el-date-picker>-->
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="" prop="remark">
                                    <el-input v-model="form.remark"  :clearable="true">
                                        <template slot="prepend">&emsp;&emsp;备&emsp;注&emsp;&emsp;</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer" align="center">
                        <el-button type="info" @click="cancel">取消</el-button>
                        <el-button type="primary"  @click="dialogStatus==='create'?add():edit()">提 交</el-button>
                    </div>
                </el-dialog>
            </el-row>
            <!--分页模块-->
            <el-row style="float: right;margin-top: 20px">
                <el-col>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="queryinfo.pageNum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="queryinfo.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

</template>

<script>
    import { addCrossday,ediCrossday,delCrossday,selectLists } from '../../api/mt1201'

    export default {
        name: "Cross",
        data() {
            /*初始化值*/
            return {
                queryinfo:{
                    carrier:'',
                    flightno:'',
                    pageNum:1,
                    pageSize:10,
                },
                total:0,
                tableData: [],
                tableloading:false,
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dialogStatus: 'create',
                dialogCross: {
                    // 添加对话框
                    addDialog: false,
                    // 编辑对话框
                    editDialog: false
                },
                form:{
                    state:1,
                    carrier:'',
                    flightno:'',
                    originatingstation:'',
                    destinationstation:'',
                    crossdays:'',
                    effectivedate:'',
                    expirationdate:'',
                    schedule:'',
                    remark:''
                },
                splitcodes: [{value:1,label:'启用'},{value:0,label:'禁用'}],
                rules: {
                    state: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    flightno: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    crossdays: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    effectivedate: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    expirationdate: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                    schedule: [
                        {  required: true, message: '请输入', trigger: 'change' }
                    ],
                }
            };
        },
        methods: {
            //取消
            cancel(){
                this.dialogCross.addDialog = false
                this.getList();
            },
            //查询
            getList() {
                const _this = this
                this.tableloading = true;
                selectLists(this.queryinfo).then((response) => {
                    console.log(response)

                    const res = response.data
                    if (res.code != '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data.list
                    // 获取列表的总记录数
                    _this.total = res.data.total
                    this.tableloading = false;
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            // 打开新增
            toAddDialog() {
                this.dialogStatus = 'create'
                this.dialogCross.addDialog = true
                this.form = {
                    state:1,
                        carrier:'',
                        flightno:'',
                        originatingstation:'',
                        destinationstation:'',
                        crossdays:'',
                        effectivedate:'',
                        expirationdate:'',
                        schedule:'',
                        remark:''
                }
            },
            // 新增功能
            add() {
                // 进行表单的预验证
                this.$refs.form.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    addCrossday(this.form).then((response) => {
                        const res = response.data
                        // 添加失败
                        if (res.code !== '200') {
                            // 关闭加载
                            return this.$message.error(res.msg)
                        }
                        // 添加，成功
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.dialogCross.addDialog = false
                        // 刷新列表
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
            // 打开编辑
            toEditDialog(row) {
                this.dialogCross.addDialog = true;
                this.dialogStatus = 'update';
                // console.log(row);
                this.form=row;
            },
            // 编辑功能
            edit(row) {
                // 进行表单的预验证
                this.$refs.form.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return
                    ediCrossday(this.form).then((response) => {
                        console.log(row)
                        const res = response.data
                        if (res.code != '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg)
                        // 隐藏对话框
                        this.dialogCross.addDialog = false
                        // 刷新列表
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.toString())
                    })
                })
            },
            // 删除
            del(index, row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    console.log(row);
                    delCrossday(row).then((response) => {
                        // console.log(row)
                        const res = response.data
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error.msg)
                    })
                }).catch(() => {
                })
            },
            // // 关闭对话框
            // dangerous_addDialogClosed() {
            //     // 重置对话框
            //     this.$refs.dangerousAddForm.resetFields()
            // },
            // 危险品操作员分页
            handleSizeChange(val) {
                this.queryinfo.pageSize= val
                this.getList()
            },
            handleCurrentChange(val) {
                this.queryinfo.pageNum  = val
                this.getList()
            },
        },
// 自动获取列表
        activated(){
            this.getList();
        },
    }
</script>

<style scoped>
    .el-input-group{
        display: table;
    }
    .ipt{
        max-width: 100px;
        margin-right: -4px;
        display: inline-block;
        background-color: #6F8294;
        color: #ffffff;
        border: 1px solid #DCDFE6;
        vertical-align: middle;
        padding: 0 18px;
        white-space: nowrap;
        border-top-right-radius: 0px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 0px;
        font-size: 10px;
    }
</style>