<template>
    <div>
        <el-dialog title="航线优先级排序" :visible.sync="open" width="25%" :close-on-click-modal="false" :show-close="false"
            @close="close" append-to-body center>
            <el-form ref="routeOrder" label-width="auto" label-position="left" size="small" @submit.native.prevent>
                <el-form-item label="航班号:" prop="fltNo">
                    <span>{{ fltNo }}</span>
                </el-form-item>
                <el-form-item label="航班日期:" prop="fltDate">
                    <span>{{ fltDate }}</span>
                </el-form-item>
                <el-form-item label="航线优先级" prop="route">
                    <Drag :routes="routeList" @drag="drag"></Drag>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { allRouteQuery, saveOrUpdateSpecifyDateRoute } from "@/api/destinationFlight";

export default {
    name: "",
    props: {
        open: {
            type: Boolean,
            default: false
        },
        fltData: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            fltNo: '',
            fltDate: '',
            routeList: [],
            submitData: [],
            loading: false
        }
    },
    watch: {
        open(val) {
            this.routeList = []
            this.submitData = []
            if (val) {
                this.fltNo = this.fltData.fltNo
                this.fltDate = this.fltData.fltDate
                allRouteQuery({
                    fltNo: this.fltNo,
                    routeDate: this.fltDate
                }).then(res => {
                    if (res.code === 200) {
                        this.routeList = res.data.list
                        this.submitData = res.data.list
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    },
    methods: {
        submit() {
            saveOrUpdateSpecifyDateRoute(this.submitData).then(res => {
                if (res.code === 200) {
                    this.msgSuccess('保存成功')
                    this.close()
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        close() {
            this.routeList = []
            this.submitData = []
            this.$emit('close')
        },
        drag(val) {
            val.forEach((item, index) => {
                item.ordinal = index + 1
            })
            this.submitData = val
        }
    }
}

</script>

<style lang="scss" scoped>

</style>