<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader :is-auth="true" :is-statuser="true" powerData="position_addition_button" @addForm="addForm">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">位置设置</div>
          </div>
        </template>
      </Minheader>
      <div class="app-containers">
        <DataTable :tableHeader="tableCols" :tableData="tableData" :tableBtnGroup="tableBtnGroup" :tableProperty="{ rowKey: 'ID' }" @btnClick="btnClick" />
      </div>
      <Dialog :flag="flag" :type="type" :msgTitle="msgTitle" :delName="tableForm.terminalName" @resetForm="resetForm" @delRest="delRest" @submitForm="submitForm" @delRemove="delRemove">
        <div class="diacont">
          <el-form :model="tableForm" :rules="formRules" ref="positionSettingForm">
            <el-row :gutter="24">
              <el-col>
                <el-form-item label="位置ID" size="default" prop="positionID" :rules="formRules.isNotNull">
                  <el-input v-model="tableForm.positionID" placeholder="位置ID" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="区域名称" size="default" prop="terminalName" :rules="formRules.isNotNull">
                  <el-input v-model="tableForm.terminalName" placeholder="请输入区域名称" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="位置名称" size="default" prop="positionName" :rules="formRules.isNotNull">
                  <el-input v-model="tableForm.positionName" placeholder="请输入位置名称" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="位置标识" size="default" prop="locationCode" :rules="formRules.isNotNull">
                  <el-input v-model="tableForm.locationCode" placeholder="请输入位置标识" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="位置所属节点" size="default" prop="positionNode" :rules="formRules.isNotNull">
                  <el-input v-model="tableForm.positionNode" placeholder="请输入位置所属节点" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="位置编码" size="default" prop="positionSN" :rules="formRules.isNotNull">
                  <el-input v-model="tableForm.positionSN" placeholder="请输入位置编码" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" size="default">
                  <el-input type="textarea" v-model="tableForm.remarks" placeholder="请输入备注" />
                </el-form-item>
              </el-col>
              <!-- <el-col>
                <el-form-item label="位置英文描述" size="default">
                  <el-input
                    v-model="tableForm.englishDescribe"
                    placeholder="请输入位置英文描述"
                  />
                </el-form-item>
              </el-col> -->
            </el-row>
          </el-form>
        </div>
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
import { Query, GeneralDataReception } from "@/api/webApi";
import { ElMessage } from "element-plus";
const formRules = useElement().formRules;
const route = useRoute();
const page = ref<number>(0); //分页参数
const dataContent = ref<object>({});
const noMore = ref<boolean>(false);
const rowTitle = ref<string>("");
const tableCols = ref<any>([]); //表头数据
const serviceId = ref<any>("");
const tableObj = ref({}); //增删改数据缓存
const flag = ref<boolean>(false); //弹窗开关
const type = ref<string>(""); //判断是否删除
const msgTitle = ref<string>("新增位置设置"); //弹窗标题
const tableColsCopys = reactive<Object>({}); //弹窗
const tableForm = reactive<any>({
  positionID: "",
  positionSN: "",
  positionDescribe: "",
  englishDescribe: "",
  locationCode: "",
  terminalID: "",
  terminalName: "",
  remarks: "",
  event: "",
  positionName: "",
  positionNode: "",
}); //弹窗内容
//列表
tableForm.terminalID = route.query.terminalID;
tableForm.terminalName = route.query.terminalName;
const tableData = ref<any>([]);
//表头
const state = reactive({
  list: [
    { label: "位置名称", key: "name" },
    { label: "位置所属节点", key: "china" },
    { label: "位置标识", key: "englin" },
    { label: "位置编码", key: "two" },
    { label: "位置描述", key: "three" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
    is: "position_edit_button",
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
    is: "location_delete_button",
  },
]);
//新增
const addForm = () => {
  msgTitle.value = "新增位置";
  tableForm.event = 1;
  flag.value = true;
  type.value = "";
};
//取消
const resetForm = () => {
  positionSettingForm.value?.resetFields();
  flag.value = false;
  // tableForm.positionID = "";
  // tableForm.positionSN = "";
  // tableForm.positionDescribe = "";
  // tableForm.englishDescribe = "";
  // tableForm.locationCode = "";
  // tableForm.remarks = "";
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除位置";
  flag.value = true;
  type.value = "del";
};
const delRemove = () => {
  const obj = {
    positionID: tableForm.positionID,
    event: 3,
  };
  generalDataReception(obj);
};
//删除
const delRest = () => {
  flag.value = false;
};
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    msgTitle.value = "编辑位置";
    flag.value = true;
    type.value = "";
    for (const key in index) {
      tableForm[key] = index[key];
    }
    tableForm.event = 2;
  } else if (param === 3) {
    msgTitle.value = "删除位置";
    flag.value = true;
    type.value = "del";
    tableForm.event = 3;
    tableForm.positionID = index.positionID;
    tableForm.positionSN = index.positionSN;
    tableForm.positionDescribe = index.positionDescribe;
    tableForm.englishDescribe = index.englishDescribe;
    tableForm.locationCode = index.locationCode;
    tableForm.terminalID = index.terminalID;
  } else if (param === 4) {
  }
};
//获取表格数据
const getQuery = async () => {
  try {
    const { code, returnData } = await Query({
      id: DATACONTENT_ID.airpositTableId,
      needPage: ++page.value,
      dataContent: [route.query.terminalID],
    });
    if (code === "0") {
      if (returnData.listValues.length === 0) {
        page.value--;
        noMore.value = true;
      }
      const titleColumn = returnData.columnSet.find(
        (item) => item.needShow === 1
      );
      if (titleColumn) {
        rowTitle.value = titleColumn.columnName;
      }
      tableData.value.push(...returnData.listValues);
      tableCols.value = returnData.columnSet;
      tableData.value.forEach((element) => {
        element.terminalName = route.query.terminalName;
      });
      tableCols.value.forEach((element) => {
        element.label = element.columnLabel;
        element.key = element.columnName;
        // if (element.columnName === "queryTemplate") {
        //   element.width = "300px";
        // }
      });
      serviceId.value = returnData.submitID;
    } else {
      page.value--;
    }
  } catch (error) {
    page.value--;
  }
};
// //确认提交
// const submitForm = () => {
//   generalDataReception(tableForm);
// };
//确认提交
const positionSettingForm: any = ref(null);
const submitForm = () => {
  positionSettingForm.value.validate((valid: any) => {
    if (valid) {
      generalDataReception(tableForm);
    } else {
      return false;
    }
  });
};
const resetTable = () => {
  page.value = 0;
  noMore.value = false;
  tableData.value = [];
};

const btnAuthMap = [
  ,
  "position_addition_button",
  "position_edit_button",
  "location_delete_button",
];
//新增-编辑-删除
const generalDataReception = async (data) => {
  try {
    // let obj = {
    //   terminalID: route.query.terminalID,
    // };
    data = {
      ...data,
    };
    const { code } = await GeneralDataReception({
      serviceId: serviceId.value,
      dataContent: JSON.stringify(data),
      btnAuth: btnAuthMap[data.event],
    });
    if (code == 0) {
      ElMessage.success(`操作成功`);
      // this.$message.success("操作成功");
      resetTable();
      getQuery();
      resetForm();
      flag.value = false;
      // rmFlag.value = false;
      tableObj.value = {};
      // this.$router.go(0);
    } else {
      ElMessage.error(`操作失败`);
      // this.$message.error("操作失败");
      // this.flag = false;
      // this.rmFlag = false;
      tableObj.value = {};
      resetForm();
    }
  } catch (error) {
    flag.value = false;
    //  rmFlag.value = false;
    tableObj.value = {};
    resetForm();
  }
};
getQuery();
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 110px;
}
</style>
