<template>
  <div class="airportInfo">
    <div class="headerBox">
      <Minheader :is-Preser="true" :is-statuser="true">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">报警预警场景</div>
          </div>
        </template></Minheader
      >
      <div class="diacont">
        <el-form :model="tableForm" class="w100 fw">
          <div class="outersurface pd30">
            <el-form-item label="策略名称" size="default">
              <el-input v-model="tableForm.name" placeholder="请输入策略名称" />
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="航司二字码" size="default">
              <el-input
                v-model="tableForm.china"
                placeholder="请输入航司二字码"
              />
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="起飞机场" size="default">
              <el-select
                style="width: 100%"
                v-model="tableForm.englin"
                class="input-shadow"
                filterable
                default-first-option
                clearable
                placeholder="请选择起飞机场"
              >
                <el-option
                  v-for="item in tableOptionser"
                  :key="item.v ? item.v : item.planDepartureApt"
                  :label="item.k ? item.k : item.planDepartureApt"
                  :value="item.v ? item.v : item.planDepartureApt"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="降落机场" size="default">
              <el-select
                style="width: 100%"
                v-model="tableForm.two"
                class="input-shadow"
                filterable
                default-first-option
                clearable
                placeholder="请选择降落机场"
              >
                <el-option
                  v-for="item in tableOptionser"
                  :key="item.v ? item.v : item.planDepartureApt"
                  :label="item.k ? item.k : item.planDepartureApt"
                  :value="item.v ? item.v : item.planDepartureApt"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="outersurface">
            <el-form-item label="航班号" size="default">
              <el-input v-model="tableForm.three" placeholder="请输入航班号" />
            </el-form-item>
          </div>
          <div class="outertwowid pd30">
            <el-form-item label="起止时间" size="default">
              <el-date-picker
                v-model="tableForm.time"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </div>
          <div class="outerthreewid">
            <el-form-item label="备注" size="default">
              <el-input v-model="tableForm.text" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="centerBox">
      <Minheader
        :is-auth="true"
        :is-statuser="true"
        :is-Search="true"
        @addForm="addForm"
        style="margin-top: 20px"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">报警预警策略</div>
          </div>
        </template></Minheader
      >
    </div>
    <div class="containers scroll-y">
      <DataTable
        :tableHeader="state.list"
        :tableData="tableData"
        :tableBtnGroup="tableBtnGroup"
        :tableProperty="{ rowKey: 'ID' }"
        @btnClick="btnClick"
      />
    </div>
    <Dialog
      width="600px"
      :flag="flag"
      :type="type"
      :msgTitle="msgTitle"
      @resetForm="resetForm"
      @delRest="delRest"
    >
      <div class="diacont">
        <el-form :model="tableForms">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="策略名称" size="default">
                <el-input
                  v-model="tableForms.name"
                  placeholder="请输入策略名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计算依据" size="default">
                <el-select
                  style="width: 100%"
                  v-model="tableForms.china"
                  class="input-shadow"
                  filterable
                  default-first-option
                  clearable
                  placeholder="请选择计算依据"
                >
                  <el-option
                    v-for="item in tableOptionser"
                    :key="item.v ? item.v : item.planDepartureApt"
                    :label="item.k ? item.k : item.planDepartureApt"
                    :value="item.v ? item.v : item.planDepartureApt"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预警时长" size="default">
                <el-input
                  v-model="tableForms.englin"
                  placeholder="请输入预警时长"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报警时长" size="default">
                <el-input
                  v-model="tableForms.two"
                  placeholder="请输入报警时长"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始节点" size="default">
                <el-select
                  style="width: 100%"
                  v-model="tableForms.three"
                  class="input-shadow"
                  filterable
                  default-first-option
                  clearable
                  placeholder="请选择开始节点"
                >
                  <el-option
                    v-for="item in tableOptionser"
                    :key="item.v ? item.v : item.planDepartureApt"
                    :label="item.k ? item.k : item.planDepartureApt"
                    :value="item.v ? item.v : item.planDepartureApt"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始位置" size="default">
                <el-select
                  style="width: 100%"
                  v-model="tableForms.text"
                  class="input-shadow"
                  filterable
                  default-first-option
                  clearable
                  placeholder="请选择开始位置"
                >
                  <el-option
                    v-for="item in tableOptionser"
                    :key="item.v ? item.v : item.planDepartureApt"
                    :label="item.k ? item.k : item.planDepartureApt"
                    :value="item.v ? item.v : item.planDepartureApt"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束节点" size="default">
                <el-select
                  style="width: 100%"
                  v-model="tableForms.text1"
                  class="input-shadow"
                  filterable
                  default-first-option
                  clearable
                  placeholder="请选择结束节点"
                >
                  <el-option
                    v-for="item in tableOptionser"
                    :key="item.v ? item.v : item.planDepartureApt"
                    :label="item.k ? item.k : item.planDepartureApt"
                    :value="item.v ? item.v : item.planDepartureApt"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束位置" size="default">
                <el-select
                  style="width: 100%"
                  v-model="tableForms.text2"
                  class="input-shadow"
                  filterable
                  default-first-option
                  clearable
                  placeholder="请选择结束位置"
                >
                  <el-option
                    v-for="item in tableOptionser"
                    :key="item.v ? item.v : item.planDepartureApt"
                    :label="item.k ? item.k : item.planDepartureApt"
                    :value="item.v ? item.v : item.planDepartureApt"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import Minheader from "@/components/minheader/index.vue";
import DataTable from "@/components/tableTemp/index.vue";
import Dialog from "@/components/dialog/index.vue";
const tableForm = reactive({
  name: "",
  china: "",
  englin: "",
  two: "",
  three: "",
  text: "",
  time: "",
}); //报警预警场景
const tableForms = reactive({
  name: "",
  china: "",
  englin: "",
  two: "",
  three: "",
  text: "",
  text1: "",
  text2: "",
}); //弹窗内容
const tableOptionser = ref<Array>([]); //下拉
const flag = ref<Boolean>(false); //弹窗开关
const type = ref<String>(""); //判断是否删除
const msgTitle = ref<String>("新增报警预警策略"); //弹窗标题
//列表
const tableData = ref([
  {
    name: "中国国际航空",
    china: "国航",
    englin: "AIRCHINA",
    two: "CA",
    three: "CCA",
    text: "CA国航",
  },
  {
    name: "中国国际航空",
    china: "国航",
    englin: "AIRCHINA",
    two: "CA",
    three: "CCA",
    text: "CA国航",
  },
  {
    name: "中国国际航空",
    china: "国航",
    englin: "AIRCHINA",
    two: "CA",
    three: "CCA",
    text: "CA国航",
  },
]);
//表头
const state = reactive({
  list: [
    { label: "名称", key: "name", width: "100px" },
    { label: "三字码", key: "china", width: "50px" },
    { label: "四字码", key: "englin", width: "50px" },
    { label: "中文简称", key: "two", width: "50px" },
    { label: "英文简称", key: "three", width: "50px" },
    { label: "全称", key: "text", width: "50px" },
    { label: "时区", key: "text1", width: "50px" },
    { label: "公司名称", key: "text2", width: "50px" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]);
//新增
const addForm = () => {
  msgTitle.value = "新增报警预警策略";
  flag.value = true;
  type.value = "";
};
//取消
const resetForm = () => {
  flag.value = false;
  tableForm.name = "";
  tableForm.china = "";
  tableForm.englin = "";
  tableForm.two = "";
  tableForm.three = "";
  tableForm.text = "";
};
//删除
const delRest = () => {
  flag.value = false;
};
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    msgTitle.value = "编辑报警预警策略";
    flag.value = true;
    type.value = "";
    tableForms.name = index.name;
    tableForms.china = index.china;
    tableForms.englin = index.englin;
    tableForms.two = index.two;
    tableForms.three = index.three;
    tableForms.text = index.text;
    tableForms.text1 = index.text1;
    tableForms.text2 = index.text2;
  } else if (param === 3) {
    msgTitle.value = "删除报警预警策略";
    flag.value = true;
    type.value = "del";
  } else if (param === 4) {
  }
};
</script>

<style lang="scss" scoped>
.airportInfo {
  .headerBox {
    width: 100%;
    min-height: 200px;
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    .diacont {
      width: 100%;
      padding: 0;
      .w100 {
        width: 100%;
      }
      .fw {
        display: flex;
        flex-wrap: wrap;
      }
      .outersurface {
        width: 20%;
      }
      .pd30 {
        padding: 0 30px 0 0;
      }
      .outertwowid {
        width: 40%;
      }
      .outerthreewid {
        width: 60%;
      }
    }
  }
  .centerBox {
    padding: 0 24px;
  }
  .containers {
    height: 540px;
  }
}
::v-deep .el-form-item__label {
  width: 90px;
}
</style>
