<template>
  <div>
    <div class="title">
      通信管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card content-box">
      <div class="elform1">
        <div class="elformadd">
          <el-button type="primary" color="#0052d9" @click="addNewRow">新增行</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%" @row-click="handleRowClick">
          <el-table-column prop="mysqlName" label="mysqlName" width="240">
            <template #default="scope">
              <el-input
                v-model="scope.row.mysqlName"
                :disabled="getdisabled(scope.row.mysqlName)"
                @blur="handleadd(scope.$index, scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="tdengineName" label="tdengineName" width="240">
            <template #default="scope">
              <el-input
                v-model="scope.row.tdengineName"
                :disabled="getdisabled(scope.row.mysqlName)"
                @blur="handleadds(scope.$index, scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="center" width="240">
            <template #default="scope">
              <el-button v-if="inputindex == scope.$index" color="#0052d9" @click="preservation(scope)">保存</el-button>
              <el-button v-else @click="newition(scope)">编辑</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { nextTick } from "vue";
import { selectAllURL, updateMysqlTDengineURL } from "@/api/home/Multisite";
import { ElMessage } from "element-plus";

interface TableData {
  mysqlName: string;
  tdengineName: string;
}
const tableData = ref();
// 新增行
const addNewRow = () => {
  const newRow = ref<TableData>({
    mysqlName: "",
    tdengineName: ""
  });
  tableData.value.push(newRow.value);

  nextTick(() => {
    const tableBody = document.querySelector(".el-table__body-wrapper");
    if (tableBody) {
      tableBody.scrollTop = tableBody.scrollHeight;
    }
  });
};
const handleadd = async (
  index: number,
  row: {
    mysqlName: any;
    id: any;
  }
) => {
  // 处理编辑逻辑，例如更新数据源或发送请求
  let obj = {
    id: row.id,
    TDengienName: "",
    MysqlName: row.mysqlName
  };
  const { data } = await updateMysqlTDengineURL(obj);
  if (data) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  } else {
    ElMessage.error("保存失败");
  }
};
const handleadds = async (index: number, row: { id: any; tdengineName: any }) => {
  // 处理编辑逻辑，例如更新数据源或发送请求
  console.log(index, row);
  let obj = {
    id: row.id,
    TDengienName: row.tdengineName,
    MysqlName: ""
  };
  const { data } = await updateMysqlTDengineURL(obj);
  if (data) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  } else {
    ElMessage.error("保存失败");
  }
};
const getdisabled = (val: any) => {
  if (val == "ts") {
    return true;
  } else {
    return false;
  }
  console.log(val);
};
const handleRowClick = (row: TableData) => {
  console.log(row);

  // 点击行的处理逻辑，可以根据实际情况进行实现
};
const getdata = async () => {
  const { data } = await selectAllURL({});
  console.log(data);

  tableData.value = data;
};
// const inputindex = ref();
// 保存
// const preservation = async (row: any) => {
//   console.log(row.row.id);

//   let obj = {
//     id: row.row.id,
//     TDengienName: row.row.tdengineName,
//     MysqlName: row.row.mysqlName
//   };
//   const { data } = await updateMysqlTDengineURL(obj);
//   if (data) {
//     ElMessage({
//       message: "保存成功",
//       type: "success"
//     });
//   } else {
//     ElMessage.error("保存失败");
//   }
//   inputindex.value = -1;
// };
// // 编辑
// const newition = async (row: any) => {
//   console.log(row.row);
//   inputindex.value = row.$index;
// };

const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getdata();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!-- -->
