{% extends 'base.html' %}

{% block title %}ZFSAFE{% endblock %}

<!-- 页面样式块 -->
{% block style %}
/* 查询条件区域：使用 row 分布，输入框占满所在列 */
    .search-section .form-control,
    .search-section .form-select {
      width: 100%;
    }
    /* 查询条件区域，每个条件统一高度且左右间隔均等 */
    .search-section .col {
      padding: 0 5px;
    }

    /* 表格样式：统一垂直居中 */
    .table thead th, .table tbody td {
      vertical-align: middle;
      text-align: center;
    }

    /* 分页区域右对齐 */
    .pagination-section {
      text-align: right;
      padding-right: 15px;
    }

    /* 固定行高，比如 45px，每页 10 行 */
    .fixed-row-height {
      height: 45px;
      overflow: hidden;
    }
{% endblock %}

<!-- 页面内容块 -->
{% block content %}
<div class="container-xxl mt-2">
    <!-- 查询区 -->
    <div class="row mb-3">
        <div class="col-2 mb-2"><button class="btn btn-primary me-3" onclick="openModal('add')">新增</button></div>
        <div class="col-10"></div>
        <div class="col-3 mb-2"><input type="text" class="form-control" id="searchUser" placeholder="资产用户"></div>
        <div class="col-2">
          <select class="form-select" id="ownerType">
            <option value="">用户类型</option>
            <option value="个人">个人</option>
            <option value="私营企业">私营企业</option>
            <option value="国有企业">国有企业</option>
            <option value="事业单位">事业单位</option>
            <option value="政府机构">政府机构</option>
            <option value="团体协会">团体协会</option>
          </select>
        </div>
        <div class="col-2"><input type="text" class="form-control" id="searchContact" placeholder="联系人"></div>
        <div class="col-3"><input type="text" class="form-control" id="searchPhone" placeholder="联系电话"></div>
        <div class="col-2 text-end">
          <button class="btn btn-primary" onclick="fetchData()">查询</button>
          <button class="btn btn-primary" onclick="exportOwnerData()">导出</button>
        </div>
    </div>
    <!-- 表格 -->
    <div class="table-responsive">
        <table class="table table-bordered table-hover" id="ownerTable" style="width: 100%; table-layout: fixed;">
          <thead>
            <tr>
              <th style="width:5%;">序号</th>
              <th style="width:30%;">资产用户</th>
              <th style="width:10%;">用户类型</th>
              <th style="width:10%;">联系人</th>
              <th style="width:15%;">联系电话</th>
              <th style="width:10%;">关联资产</th>
              <th style="width:20%;">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- JS 动态插入 10 行 -->
          </tbody>
        </table>
      </div>
    <!-- 分页 -->
    <nav class="mt-2">
        <ul class="pagination justify-content-end" id="userPagination">
          <li class="page-item"><a class="page-link" href="#" id="userPrev">上一页</a></li>
          <li class="page-item"><a class="page-link" href="#" id="userNext">下一页</a></li>
        </ul>
    </nav>

</div>

<!-- Modal -->
<div class="modal fade" id="ownerModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">新增/修改用户</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="ownerForm">
          <input type="hidden" id="ownerId">
          <div class="mb-3">
              <label class="form-label me-2">资产用户:</label>
            <input type="text" class="form-control" id="formUser">
          </div>
          <div class="mb-3">
              <label class="form-label me-2">用户类型:</label>
            <select class="form-select" id="formType">
              <option value="">用户类型</option>
              <option value="私营企业">私营企业</option>
              <option value="国有企业">国有企业</option>
              <option value="事业单位">事业单位</option>
              <option value="政府机构">政府机构</option>
              <option value="团体协会">团体协会</option>
              <option value="个人">个人</option>
            </select>
          </div>
          <div class="mb-3">
              <label class="form-label me-2">证件号码:</label>
            <input type="text" class="form-control" id="IDno">
          </div>
          <div class="mb-1 row gx-3">
              <div class="col-6">
                <label class="form-label me-2">联系人:</label>
                <input type="text" class="form-control" id="formContact">
              </div>
              <div class="col-6">
                  <label class="form-label me-2">联系电话:</label>
                <input type="text" class="form-control" id="formPhone">
              </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
          <button class="btn btn-primary" onclick="saveOwner()">保存</button>
        <button class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

<!-- 页面脚本块 -->
{% block script %}
<script>
  let currentMode = 'add';
  let ownersData = [];
  let currentPage = 1;
  const pageSize = 10;
  async function postJSON(url, payload) {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type':'application/json' },
    body: JSON.stringify(payload)
  });
  if (!res.ok) {
      const errorData = await res.json();
      throw new Error(errorData.error || `HTTP错误 ${res.status}`);
    }
  return res.json();
}

  function downloadCSV(text, filename) {
    const blob = new Blob([text], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
    URL.revokeObjectURL(link.href);
  }

  function fmtCell(val) {
      // 如果是数字-数字，比如 "2-4"、"10-12" 等
      if (/^\d+-\d+$/.test(val)) {
        return '="' + val + '"';
      }
      // 如果里面有中文或逗号，就双引号包裹
      if (/[,\u4e00-\u9fa5]/.test(val)) {
        return `"${val.replace(/"/g, '""')}"`;
      }
      return val;
  }

  async function exportOwnerData(){
      //导出数据
      let rows = [
        ['序号', '资产用户', '用户类型', '联系人', '联系电话','证件号码','关联IP','关联域名'].map(fmtCell).join(',')
      ];
      ownersData.forEach((row, i) => {
        rows.push([
          (i + 1).toString(),
          row[2].toString(),
          row[1] || '',
          row[4] || '',
          row[3] || '',
          row[5] || '',
          row[6].toString(),
          row[7].toString(),
        ].map(fmtCell).join(','));
      });

    const csv = '\uFEFF' + rows.join('\r\n');  // 加 BOM

    downloadCSV(csv, `assets_owner.csv`);
  }

  function openModal(mode, index = null) {
    currentMode = mode;
    document.getElementById('ownerForm').reset();
    document.getElementById('ownerId').value = '';
    if (mode === 'edit' && index !== null) {
      const data = ownersData[index];
      document.getElementById('modalTitle').innerText = '修改用户';
      document.getElementById('ownerId').value = data[0] || '';
      document.getElementById('formUser').value = data[2] || '';
      document.getElementById('formType').value = data[1] || '';
      document.getElementById('formContact').value = data[4] || '';
      document.getElementById('formPhone').value = data[3] || '';
      document.getElementById('IDno').value = data[5] || '';
    } else {
      document.getElementById('modalTitle').innerText = '新增用户';
    }
    new bootstrap.Modal(document.getElementById('ownerModal')).show();
  }

  async function saveOwner() {
    const data = {
      id: document.getElementById('ownerId').value,
      user: document.getElementById('formUser').value,
      type: document.getElementById('formType').value,
      contact: document.getElementById('formContact').value,
      phone: document.getElementById('formPhone').value,
      IOno: document.getElementById('IDno').value,
    };
    try{
      const jsondata = await postJSON('/api/assets/addUpdateOwners', {data,currentMode});
      bsuccess = jsondata.bsuccess;
      error = jsondata.error;
      if(bsuccess){
        ownersData = jsondata.owner_list || [];
        currentPage = 1;
        document.querySelector('#ownerModal .btn-close').click();
        renderTable();
      }else {
          alert("操作失败"+error)
      }
    } catch (error) {
        console.error("操作失败：",error)
        alert("操作失败："+error)
    }
  }

  function renderTable() {
      const tableBody = document.querySelector('#ownerTable tbody');
    //const tableBody = document.getElementById('tableBody');
    tableBody.innerHTML = '';
    const start = (currentPage - 1) * pageSize;
    const pageData = ownersData.slice(start, start + pageSize);

    pageData.forEach((item, i) => {     //IP,itype,uname,tellnum,tell_username,ID_num
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${start + i + 1}</td>
        <td>${item[2] || ''}</td>
        <td>${item[1] || ''}</td>
        <td>${item[4] || ''}</td>
        <td>${item[3] || ''}</td>
        <td>${item[8] || ''}</td>
        <td>
          <button class="btn btn-info btn-sm me-1" onclick="openModal('edit', ${start + i})">修改</button>
          <!-- <button class="btn btn-info btn-sm me-1" onclick="showassets(${start + i})">查看资产</button> -->
          <button class="btn btn-danger btn-sm" onclick="delowner(${start + i})">删除</button>
        </td>
      `;
      tableBody.appendChild(tr);
    });

    for (let i = pageData.length; i < pageSize; i++) {
      const tr = document.createElement('tr');
      tr.innerHTML = '<td colspan="7">&nbsp;</td>';
      tableBody.appendChild(tr);
    }
  }

  async function fetchData() {
      const ownerEl = document.getElementById("searchUser");
      const ownerTypeEl = document.getElementById("ownerType");
      const contactEl = document.getElementById("searchContact");
      const tellNumEl = document.getElementById("searchPhone");
      const owner = ownerEl.value;
      const owner_type = ownerTypeEl.value;
      const contact = contactEl.value;
      const tellnum = tellNumEl.value;
      try {
        const data = await postJSON("/api/assets/getOwners",{owner,owner_type,contact,tellnum})
        ownersData = data.owner_list || [];
        currentPage = 1;
        renderTable();
      } catch (error) {
        console.error("查询资产用户记录出错：", error);
        alert("查询失败！");
      }
  }

  async function showassets(index){
  }

  async function delowner(index){
      const data = ownersData[index];
      const id = data[0]
      if (!confirm('确认删除？')) return;
    try{
        const redata = await postJSON('/api/assets/delOwners', {id});
        bsuccess = redata.bsuccess;
        error = redata.error;
        if(bsuccess){
            alert("删除成功！");
            await fetchData(); //刷新数据
        }
        else{
            alert("删除失败！",error)
        }
    } catch (error) {
        console.error("删除失败！",error);
        alert("删除失败！",error)
    }
  }

  window.onload = fetchData;
</script>
{% endblock %}