<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="peekEnglish" label="peekEnglish/英文" width="340">
            <template #default="scope">
              <el-input v-model="scope.row.peekEnglish" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="peekChinese" label="peekChinese/中文" width="340">
            <template #default="scope">
              <el-input v-model="scope.row.peekChinese" @blur="handleadds(scope.$index, scope.row)"></el-input>
              <!-- :disabled="getdisabled(scope.row.peekChinese)" -->
            </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 { selectpeekURL, updatepeekURL, insertpeekURL } from "@/api/home/Multisite";
import { ElMessage } from "element-plus";

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

  // nextTick(() => {
  //   const tableBody = document.querySelector(".el-table__body-wrapper");
  //   if (tableBody) {
  //     tableBody.scrollTop = tableBody.scrollHeight;
  //   }
  // });
  await insertpeekURL({});
  await getdata();
};

const handleadds = async (index: number, row: { peekChinese: any; peekEnglish: any }) => {
  // 处理编辑逻辑，例如更新数据源或发送请求
  console.log(index, row);
  let obj = {
    peekChinese: row.peekChinese,
    peekEnglish: row.peekEnglish
  };
  const { data } = await updatepeekURL(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 selectpeekURL({});
  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,
//     peekChinese: row.row.peekChinese,
//     peekEnglish: row.row.peekEnglish
//   };
//   const { data } = await updatepeekURL(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>
<!--

-->
