<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(res.code);
          } else {
            this.msgWarning(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    close(code) {
      this.routeList = [];
      this.submitData = [];
      this.$emit("close", code);
    },
    drag(val) {
      val.forEach((item, index) => {
        item.ordinal = index + 1;
      });
      this.submitData = val;
    },
  },
};
</script>

<style lang="scss" scoped></style>