<template>
  <div class="container">
    <div class="form-container">
      <input v-model="newData.name" placeholder="输入名称" />
      <input v-model="newData.logo" placeholder="输入Logo URL" />
      <input v-model="newData.localLogo" placeholder="输入本地Logo路径" />
      <input v-model="newData.sort" type="number" placeholder="输入排序" />
      <input v-model="newData.description" placeholder="输入描述" />
      <select v-model="newData.status">
        <option value="A">Active</option>
        <option value="D">Deleted</option>
      </select>
      <button @click="addData">添加数据</button>
    </div>
    <div class="json-container">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>Logo</th>
            <th>本地Logo</th>
            <th>排序</th>
            <th>描述</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in jsonData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.logo }}</td>
            <td>{{ item.localLogo }}</td>
            <td>{{ item.sort }}</td>
            <td>{{ item.description }}</td>
            <td>{{ item.status }}</td>
            <td>
              <button class="edit-button" @click="openEditModal(item)">修改</button>
              <button class="delete-button" @click="deleteData(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h2>编辑数据</h2>
        <input v-model="editData.name" placeholder="输入名称" />
        <input v-model="editData.logo" placeholder="输入Logo URL" />
        <input v-model="editData.localLogo" placeholder="输入本地Logo路径" />
        <input v-model="editData.sort" type="number" placeholder="输入排序" />
        <input v-model="editData.description" placeholder="输入描述" />
        <select v-model="editData.status">
          <option value="A">Active</option>
          <option value="D">Deleted</option>
        </select>
        <button @click="updateData">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const jsonData = ref([])
  const newData = ref({
    name: '',
    logo: '',
    localLogo: '',
    sort: 0,
    description: '',
    status: 'A' as 'A' | 'D',
  })
  const editId = ref<number | null>(null)
  const editData = ref({
    name: '',
    logo: '',
    localLogo: '',
    sort: 0,
    description: '',
    status: 'A' as 'A' | 'D',
  })
  const showModal = ref(false)

  const fetchData = () => {}

  const addData = () => {}

  const openEditModal = (item: any) => {
    editId.value = item.id
    editData.value = { ...item }
    showModal.value = true
  }

  const closeModal = () => {
    showModal.value = false
    editId.value = null
    editData.value = {
      name: '',
      logo: '',
      localLogo: '',
      sort: 0,
      description: '',
      status: 'A',
    }
  }

  const updateData = () => {}

  const deleteData = (id: number) => {}

  fetchData()
</script>

<style scoped lang="scss">
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
    padding: 20px;

    .form-container {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;

      input,
      select {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 200px;
      }

      button {
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #28a745;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: #218838;
        }
      }
    }

    .json-container {
      margin-top: 20px;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 100%;
      max-width: 800px;
      overflow-x: auto;

      table {
        width: 100%;
        border-collapse: collapse;

        th,
        td {
          padding: 10px;
          border: 1px solid #ccc;
          text-align: left;
        }

        th {
          background-color: #f8f8f8;
        }

        button {
          padding: 5px 10px;
          font-size: 14px;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s ease;
          margin-right: 10px;

          &.edit-button {
            background-color: #007bff;

            &:hover {
              background-color: #0056b3;
            }
          }

          &.delete-button {
            background-color: #dc3545;

            &:hover {
              background-color: #c82333;
            }
          }
        }
      }
    }

    .modal {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      width: 400px;
      max-width: 90%;
      text-align: center;

      .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        cursor: pointer;
      }

      input,
      select {
        margin-bottom: 10px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
      }

      button {
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: #0056b3;
        }
      }
    }
  }
</style>
