<template>
  <div class="airportInfoDetails">
    <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
      <template #header>
        <div class="status flex-wrap">
          <div class="manageTitle">机场信息维护</div>
        </div>
      </template></Minheader
    >
    <div class="airportInfo-content">
      <el-row :gutter="24">
        <el-col :span="6" style="background: #fff">
          <div class="tree_left">
            <el-scrollbar style="height: 100%">
              <div class="corporate">{{ company }}</div>
              <el-tree :data="data2" accordion @node-click="handleNodeClick">
              </el-tree>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="app-containers">
            <DataTable
              :tableColumnProperty="tableColumnProperty"
              :tableHeader="state.list"
              :tableData="tableData"
              :tableBtnGroup="tableBtnGroup"
              :tableProperty="{ rowKey: 'ID' }"
              @btnClick="btnClick"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog
      width="600px"
      :flag="flag"
      :type="type"
      :msgTitle="msgTitle"
      @resetForm="resetForm"
      @delRest="delRest"
    >
      <div class="diacont">
        <el-form :model="tableForm">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="机场名称" size="default">
                <el-input
                  v-model="tableForm.name"
                  placeholder="请输入机场名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三字码" size="default">
                <el-input
                  v-model="tableForm.china"
                  placeholder="请输入三字码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="四字码" size="default">
                <el-input
                  v-model="tableForm.englin"
                  placeholder="请输入四字码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中文简称" size="default">
                <el-input
                  v-model="tableForm.two"
                  placeholder="请输入中文简称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文简称" size="default">
                <el-input
                  v-model="tableForm.three"
                  placeholder="请输入英文简称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="全称" size="default">
                <el-input v-model="tableForm.text" placeholder="请输入全称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="时区" size="default">
                <!-- <el-input v-model="tableForm.china" /> -->
                <el-select
                  style="width: 100%"
                  v-model="tableForm.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-input
                  v-model="tableForm.text2"
                  placeholder="请输入机场三字码"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Dialog from "@/components/dialog/index.vue";
const router = useRouter();
const tableBtnGroup = ref<Array>([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
  },
  {
    name: "航站楼设置",
    className: "editBtn",
    param: 4,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]); //单独的编辑
const flag = ref<Boolean>(false); //弹窗开关
const type = ref<String>(""); //判断是否删除
const msgTitle = ref<String>("新增机场信息维护"); //弹窗标题
const tableOptionser = ref<Array>([]); //弹窗下拉
const tableColsCopys = reactive<Object>({}); //弹窗
const tableForm = reactive({
  name: "",
  china: "",
  englin: "",
  two: "",
  three: "",
  text: "",
  text1: "",
  text2: "",
}); //弹窗内容
const tableColumnProperty = reactive({
  width: "120px",
  fixed: "",
  sortable: false,
  showOverflowTooltip: false,
  align: "center",
  headerAlign: "",
}); //弹窗内容
//列表
const tableData = ref([
  {
    name: "成都双流机场",
    china: "CTU",
    englin: "ZUUU",
    two: "",
    three: "CHENGDU",
    text: "成都双流机场",
    text1: "",
    text2: "西南分公司",
  },
  {
    name: "成都双流机场",
    china: "CTU",
    englin: "ZUUU",
    two: "",
    three: "CHENGDU",
    text: "成都双流机场",
    text1: "",
    text2: "西南分公司",
  },
  {
    name: "成都双流机场",
    china: "CTU",
    englin: "ZUUU",
    two: "",
    three: "CHENGDU",
    text: "成都双流机场",
    text1: "",
    text2: "西南分公司",
  },
]);
//表头
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 company = ref("所属公司");
const data2 = reactive([
  {
    id: 1,
    label: "中国国际航空",
    children: [
      {
        id: 2,
        label: "西南分公司",
      },
      {
        id: 3,
        label: "浙江分公司",
      },
      {
        id: 4,
        label: "重庆分公司",
      },
      {
        id: 5,
        label: "天津分公司",
      },
      {
        id: 6,
        label: "上海分公司",
      },
    ],
  },
]);
//新增
const addForm = () => {
  msgTitle.value = "新增机场信息维护";
  flag.value = true;
  type.value = "";
};
//取消
const resetForm = () => {
  flag.value = false;
};
//编辑
const editDialog = (data) => {
  msgTitle.value = "编辑机场信息维护";
  flag.value = true;
  type.value = "";
  tableForm.name = data.name;
  tableForm.china = data.china;
  tableForm.englin = data.englin;
  tableForm.two = data.two;
  tableForm.three = data.three;
  tableForm.text = data.text;
  tableForm.text1 = data.text1;
  tableForm.text2 = data.text2;
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除机场信息维护";
  flag.value = true;
  type.value = "del";
};
//删除取消
const delRest = () => {
  flag.value = false;
};
//航站楼跳转
const aloneDialog = () => {
  router.push({ path: "/BasicsData/airportInfoChild" });
};
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    msgTitle.value = "编辑机场信息维护";
    flag.value = true;
    type.value = "";
    tableForm.name = index.name;
    tableForm.china = index.china;
    tableForm.englin = index.englin;
    tableForm.two = index.two;
    tableForm.three = index.three;
    tableForm.text = index.text;
    tableForm.text1 = index.text1;
    tableForm.text2 = index.text2;
  } else if (param === 3) {
    msgTitle.value = "删除机场信息维护";
    flag.value = true;
    type.value = "del";
  } else if (param === 4) {
    router.push({ path: "/BasicsData/airportInfoChild" });
  }
};
//点击树事件
const handleNodeClick = (data) => {
  company.value = data.label;
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 80px;
}
.airportInfoDetails {
  .airportInfoDetails-head {
    padding: 32px 40px 0px 32px;
    background: #ffffff;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    .airportInfoDetails-head-content {
      margin-top: 30px;
      .el-input {
        min-width: 240px;
      }
      .el-form--inline .el-form-item {
        margin-bottom: 24px;
        margin-right: 50px;
      }
    }
  }
  .corporate {
    margin-top: 24px;
    margin-left: 24px;
    margin-bottom: 23px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
  }
  .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%;
  }
  .airportInfoDialog {
    ::v-deep .el-form-item__content {
      margin-left: 120px !important;
    }
    ::v-deep .el-form-item__label {
      width: 120px !important;
    }
    ::v-deep .el-form-item {
      margin-bottom: 20px;
    }
  }
  .airportInfo-content {
    margin-top: 30px;
    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;
    }
    .grid-content {
      padding: 24px;
      margin-bottom: 24px;
      height: 144px;
      .edit_log {
        position: relative;
        // top: -2px;
      }
      .icon {
        cursor: pointer;
      }
      .desc {
        margin-top: 60px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #afb4bf;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  ::v-deep .el-input__suffix {
    right: 30px;
  }
  ::v-deep .el-input__inner {
    height: 32px;
    border-radius: 2px;
  }
  .flxdes {
    padding: 10px 0px 10px 20px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    height: 36px;
    background: #eb2f3b;
    color: #ffffff;
    margin-bottom: 46px;
    width: 100%;
  }
  .airportInfoDetails-content {
    height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 32px 0x 0 0;
    // background: #ffffff;
    // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    // margin-top: 24px;
    .terminal-info {
      margin-top: 20px;
      margin-bottom: 20px;
      .terminal-info-add {
        width: 216px;
        height: 120px;
        background: #f5f7fa;
        border: 1px dashed #d7dae3;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .icon {
          font-size: 31px;
          color: #d7dae3;
        }
      }
      .terminal-info-team {
        .terminal-info-list {
          width: 216px;
          height: 120px;
          margin-bottom: 24px;
          background: #f5f7fa;
          box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
          border-radius: 8px;
          padding: 24px;
          position: relative;
          margin-right: 24px;
          cursor: pointer;
          .name {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #303133;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .edit {
            margin-top: 32px;
            .round {
              display: inline-block;
              width: 28px;
              height: 28px;
              background: #6e82a7;
              border-radius: 50%;
              line-height: 28px;
              text-align: center;
              box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              right: 0;
              i {
                color: #fff;
              }
            }
          }
          .close {
            width: 24px;
            height: 24px;
            background: #000000;
            opacity: 0.8;
            border-radius: 50%;
            position: absolute;
            right: -12px;
            line-height: 24px;
            text-align: center;
            top: -12px;
            i {
              color: #fff;
            }
          }
          &:last-child {
            margin-right: 0;
          }
        }
        .active {
          border: 2px solid #9ebbf7;
          .name {
            color: #fff;
          }
          .edit {
            .round {
              background: #fff;
              i {
                color: #6e82a7;
              }
            }
          }
        }
      }
    }

    .locationBox {
      // padding: 0 0 0 32px;
      // background: #ffffff;

      margin-top: 30px;
    }
    .LBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .lbox-add {
      width: 100%;
      height: 144px;
      background: #f5f7fa;
      border: 1px dashed #9ebbf7;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .icon {
        font-size: 31px;
        color: #9ebbf7;
      }
    }
    .forBox {
      width: 230px;
      height: 120px;
      margin-bottom: 24px;
      background: #f5f7fa;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      padding: 24px;
      position: relative;
      margin-right: 24px;
      cursor: pointer;
      .name {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .edit {
        margin-top: 32px;
        .round {
          display: inline-block;
          width: 28px;
          height: 28px;
          // background: #f5f7fa;
          border-radius: 50%;
          line-height: 28px;
          text-align: center;
          // box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 20px;
          i {
            color: #fff;
          }
        }
      }
      .close {
        width: 24px;
        height: 24px;
        background: #000000;
        opacity: 0.8;
        border-radius: 50%;
        position: absolute;
        right: -12px;
        line-height: 24px;
        text-align: center;
        top: -12px;
        i {
          color: #fff;
        }
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      // background: #6e82a7;
      border: 2px solid #9ebbf7;
      .name {
        // color: #fff;
      }
      .edit {
        .round {
          background: #fff;
          i {
            color: #6e82a7;
          }
        }
      }
    }
  }
}
</style>
