<!--
 * @Author: your name
 * @Date: 2021-11-17 13:43:26
 * @LastEditTime: 2021-11-17 13:43:27
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \CABaggageData\src\views\dashboard\views\about.vue
-->

<template>
  <div class="airportInfo">
    <!--搜索-->
    <div class="nodeLnformation_header">
      <Search title="报警预警设置" @getSearchData="getSearchData">
        <button @click="handleAdd" class="btnAdd">新增</button>
      </Search>
    </div>

    <div class="aviInfo">
      <el-row :gutter="24">
        <el-col
          :span="4"
          class="box-card"
          v-for="(item, index) in warningArr"
          :key="index"
          style="padding-left: 24px; padding-right: 24px"
        >
          <div class="headerBox">
            <div class="tltle-head">
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.warnName"
                placement="bottom"
              >
                <div class="title fz16">{{ item.warnName }}</div>
              </el-tooltip>
              <div @click="gotoAram(item, index)" class="edit_log"></div>
            </div>
            <div @click="delBtn(item, index)" class="el-icon-close icon"></div>
          </div>
          <div class="text item" style="margin-top: 6px">
            <div class="adTime">
              生效时间：<span class="timeSt">{{ item.beginTime }}</span>
            </div>
            <div class="adTime">
              失效时间：<span class="timeSt">{{ item.endTime }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <img v-if="!warningArr.length" src="../../../assets/logo/nodata.png" /> -->
    </div>

    <!--删除弹框-->
    <Dialog :flag="flag">
      <div class="airportInfoDialog">
        <div class="del-title">删除机场信息</div>
        <div class="content er">
          <div class="log"></div>
          是否确认删除
          <p style="color: #eb2f3b; margin-top: 0px; margin-bottom: 0px">
            {{ warnname }}
          </p>
          ？
        </div>
        <div class="DelFoot right t30">
          <el-button
            size="medium"
            @click="remove"
            class="r25 buwitch"
            type="danger"
            >删除</el-button
          >
          <el-button size="medium" class="r26" @click="flag = false"
            >取消</el-button
          >
        </div>
      </div>
    </Dialog>
    <!-- 新增 -->
    <div class="EditDig">
      <el-dialog title="新增报警预警信息" :visible.sync="EditDialogVisible">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="110px"
          size="small "
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入名称（必填）"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="航司" prop="code2">
                <el-select v-model="form.code2" placeholder="请选择航司">
                  <el-option
                    v-for="item in aircompeny"
                    :key="item.value"
                    :label="item.airCompanyName"
                    :value="item.code2"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="起飞机场" prop="code3">
                <el-select v-model="form.code3" placeholder="请选择起飞机场">
                  <el-option
                    v-for="item in arilist"
                    :key="item.value1"
                    :label="item.name"
                    :value="item.code3"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="降落机场" prop="code4">
                <el-select v-model="form.code4" placeholder="请选择降落机场">
                  <el-option
                    v-for="item in arilist"
                    :key="item.value2"
                    :label="item.name"
                    :value="item.code3"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="航班号" prop="FlightNO">
                <el-input
                  v-model="form.FlightNO"
                  placeholder="航班号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <div class="digName">
          <div class="aviName">
            <span class="aviP">名称</span>
            <el-input v-model="name" placeholder="请输入名称" ></el-input>
          </div>
          <div class="aviName">
            <span class="aviP">航司</span>
            <el-select v-model="code2" placeholder="请选择">
              <el-option
                v-for="item in aircompeny"
                :key="item.value"
                :label="item.airCompanyName"
                :value="item.code2"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="digName">
          <div class="aviName">
            <span class="aviP">起飞机场</span>
            <el-select v-model="code3" placeholder="请选择起飞机场">
              <el-option
                v-for="item in arilist"
                :key="item.value1"
                :label="item.name"
                :value="item.code3"
              >
              </el-option>
            </el-select>
          </div>
          <div class="aviName">
            <span class="aviP">降落机场</span>
            <el-select v-model="code4" placeholder="请选择降落机场">
              <el-option
                v-for="item in arilist"
                :key="item.value2"
                :label="item.name"
                :value="item.code3"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="digName1">
          <span class="aviP1">航班号</span>
          <el-input placeholder="请输入航班号" v-model="FlightNO"></el-input>
        </div> -->
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="digName2">
              <span class="aviP2">起止时间</span>
              <el-date-picker
                v-model="BeginTime1"
                type="datetimerange"
                value-format="yyyy-MM-dd hh:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </el-col>
        </el-row>

        <div class="digName3">
          <span class="aviP1">备注</span>
          <el-input
            type="textarea"
            v-model="desc"
            resize="none"
            :autosize="{ minRows: 5, maxRows: 5 }"
          ></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class="btnstyle">
            <el-button class="r25 r26" type="primary" @click="addSubmit"
              >提 交</el-button
            >
            <el-button class="r26" @click="EditDialogVisible = false"
              >取 消</el-button
            >
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Search from "@/layout/components/Search/index.vue";
import Dialog from "@/layout/components/Dialog/index.vue";
import { findarrays } from "@/utils/validate";
import {
  warningList,
  AddWarning,
  AirlinesInquiry,
  AirportsList,
  DelWarning,
} from "@/api/SystemSettings.js";
export default {
  components: { Search, Dialog },
  data() {
    return {
      flag: false,
      EditDialogVisible: false,
      name: "",
      desc: "",
      warningArr: [
        {
          warnName: "名称",
          beginTime: "1111",
          endTime: "22222",
        },
      ],
      warnname: "",
      arilist: [],
      delId: "",
      aircompeny: [],
      BeginTime1: [], //起止时间
      code2: "",
      code3: "",
      code4: "",
      form: {
        name: "",
        code2: "",
        code3: "",
        code4: "",
        FlightNO: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        code2: [{ required: true, message: "请输入航司", trigger: "change" }],
        code3: [
          { required: true, message: "请输入起飞机场", trigger: "change" },
        ],
        code4: [
          { required: true, message: "请输入起飞机场", trigger: "change" },
        ],
        FlightNO: [
          { required: true, message: "请输入航班号", trigger: "blur" },
        ],
      },
      FlightNO: "", //航班号
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    // this.getWarningList();
    // this.getAirlines();
    // this.getAirlist();
  },
  methods: {
    getSearchData(val) {
      if (val) {
        this.warningArr = findarrays(this.warningArr, "warnName", val);
      } else {
        this.getWarningList();
      }
    },

    async getWarningList() {
      const res = await warningList({});
      if (res.code === 0) {
        this.warningArr = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    delBtn(item, index) {
      this.delId = item.id;
      this.warnname = item.warnName;
      this.flag = true;
    },
    //删除
    async remove() {
      const res = await DelWarning({
        id: this.delId,
      });
      if (res.code === 0) {
        this.$message.success("删除报警预警信息成功");
        this.getWarningList();
      } else {
        this.$message.error.message;
      }
      this.flag = false;
    },
    handleAdd() {
      this.EditDialogVisible = true;
    },
    //获取航司信息列表
    async getAirlines() {
      const res = await AirlinesInquiry({});
      if (res.code === 0) {
        this.aircompeny = res.returnData;
      } else {
        this.$message.error.message;
      }
    },
    //机场列表
    async getAirlist() {
      const res = await AirportsList({});
      if (res.code === 0) {
        this.arilist = res.returnData;
      } else {
        this.$message.error.message;
      }
    },

    //新增数据
    async addSubmit() {
      let arr = 0;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          arr = 1;
        } else {
          arr = 0;
          return false;
        }
      });
      if (arr == 1) {
        const res = await AddWarning({
          id: null,
          warnName: this.form.name,
          desc: this.desc,
          flightNO: this.form.FlightNO,
          airportCode2: this.form.code2,
          departureAirport: this.form.code3,
          ladingAirport: this.form.code4,
          beginTime: this.BeginTime1[0],
          endTime: this.BeginTime1[1],
        });
        if (res.code === 0) {
          this.$message.success("新增报警预警信息成功");
          this.getWarningList();
          this.form.name = null;
          this.desc = null;
          this.form.FlightNO = null;
          this.form.code2 = null;
          this.form.code3 = null;
          this.form.code4 = null;
          this.BeginTime1 = null;
        } else {
          this.$message.error.message;
        }
        this.EditDialogVisible = false;
      }
    },
    gotoAram(item, index) {
      this.$router.push({
        path: "/systemSettings/warningEdit",
        query: {
          id: item.id,
          airportCode2: item.airportCode2,
          beginTime: item.beginTime,
          endTime: item.endTime,
          BeginTime1: [item.beginTime, item.endTime],
          flightNO: item.flightNO,
          departureAirport: item.departureAirport,
          ladingAirport: item.ladingAirport,
          desc: item.desc,
          warnName: item.warnName,
          beginLocationId: item.beginLocationId,
          endNodeLocationId: item.endNodeLocationId,
        },
      });
    },
  },
};
</script>

<style  lang='scss' scoped>
.airportInfo {
  margin-top: 40px;
  .title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .log {
    width: 26px;
    height: 26px;
    background: #eb2f3b;
    border-radius: 50%;
    margin-right: 15px;
    background: url("../../../../assets/index/ic_close_hint.png") no-repeat;
    background-size: 100% 100%;
  }
  .er {
    display: flex;
    align-items: center;
  }
}
.text {
  font-size: 14px;
  cursor: pointer;
}

.item {
  margin-bottom: 18px;
}
.adTime {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  font-weight: bold;
  margin-bottom: 14px;
  // margin-left: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #101116;
}
.timeSt {
  width: 141px;
  height: 13px;
  font-size: 14px;
  font-weight: 400;
  color: #909399;
}
.delBtn {
  display: flex;
}
.headerBox {
  padding-top: 24px;
  // padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  .tltle-head {
    display: flex;
    width: calc(100% - 15px);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}
.iconBox {
  margin-right: 80px;
  display: flex;
  align-items: center;
}
.edit_log {
  margin-bottom: 18px;
  // top: -2px;
}
::v-deep .aviInfo {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  img {
    margin: 0 auto;
    margin-top: 10%;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    text-align: center;
  }
  .box-card {
    width: 268px;
    height: 144px;
    margin-left: 18px;
    margin-top: 24px;
    background: #fff;
    box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
    border-radius: 4px;
  }
  .el-card__body {
    padding: 0;
  }
  .el-card__header {
    border: none;
  }
}

::v-deep .EditDig {
  .el-dialog {
    width: 600px;
    height: 450px;
    border-radius: 2px;
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    .el-dialog__body {
      padding: 20px 20px 0 20px !important;
    }
    .el-dialog__footer {
      padding: 0 19px 0 0;
      background: #f0f5ff;
    }
    .dialog-footer {
      width: 100%;
      // background: #f0f5ff;
      border-radius: 2px;
      display: flex;
      height: 56px;
      line-height: 56px;
      justify-content: flex-end;
      .el-button {
        // height: 35px;

        text-align: center;
      }
      .el-button-primary {
        background: #2d67e3 !important;
        border-radius: 4px;
      }
      .btnstyle {
        width: 100%;
        height: 100%;
        // margin-right: 22px;
        // margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
  .el-dialog__header {
    padding: 10px 20px 10px;
    height: 36px;
    background: #2d67e3;
  }
  .el-dialog__title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
  .el-date-editor .el-range__icon {
    line-height: 24px;
  }
  .el-range-separator {
    line-height: 24px;
  }
  .el-dialog__headerbtn {
    top: 11px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .digName .el-input__inner {
    margin-left: 15px;
    width: 160px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
  .digName1 {
    display: flex;
    margin-left: 31px;
    margin-bottom: 20px;
  }

  .digName1 .el-input__inner {
    width: 464px;
    height: 32px;
    margin-left: 16px;
    background: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
  .digName3 .el-textarea__inner {
    width: 455px;
    height: 96px;
    margin-left: 16px;
    background: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
  .digName2 {
    display: flex;
    margin-left: 31px;
    margin-bottom: 20px;
  }
  .digName3 {
    display: flex;
    margin-left: 31px;
    margin-bottom: 20px;
  }
  .digName2 .el-input__inner {
    width: 500px;
    height: 32px;
    margin-left: 16px;
    background: #ffffff;
    border: 1px solid #d7dae3;
    border-radius: 4px;
  }
}
.digName {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.aviName {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
  width: 240px;
  margin-right: 10px;
  text-align: right;
}
.aviP {
  width: 100px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
}
.aviP1 {
  width: 70px;
  text-align: right;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
}
.aviP2 {
  width: 64px;
  text-align: right;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
}
</style>
