{% extends "./layout.html" %}

{% block title %}医院管理{% endblock %}

{% block css %}
<style>
  .drag-handle { cursor: move; color: #999; font-size: 18px; }
  .drag-handle:hover { color: #ff7800; }
  .sortable-ghost { opacity: 0.4; background: #fff7ed; }
</style>
{% endblock %}

{% block content %}
<div id="hospitalApp" v-cloak>
  <el-card shadow="never">
    <template #header>
      <div class="flex flex-col gap-3">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <el-input v-model="keyword" placeholder="搜索医院名称" style="width:240px;" clearable @keyup.enter="onSearch"></el-input>
            <el-cascader v-model="regionFilter" :options="regionTree"
              :props="{ value: 'code', label: 'name', children: 'children', checkStrictly: true }"
              placeholder="按地区筛选" clearable filterable :filter-method="filterRegionNode" style="width:240px;"></el-cascader>
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </div>
          <span class="text-xs text-gray-400">拖拽行可调整排序</span>
        </div>
        <div class="flex items-center gap-3">
          <el-button type="primary" :icon="Plus" @click="showAdd">新增医院</el-button>
          <el-button :icon="Upload" @click="showImport = true">导入医院</el-button>
        </div>
      </div>
    </template>

    <el-table :data="list" v-loading="loading" stripe border row-key="id">
      <el-table-column width="60" align="center">
        <template #header>排序</template>
        <template #default>
          <span class="drag-handle">⠿</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="医院名称" min-width="200"></el-table-column>
      <el-table-column label="所在地区" min-width="180">
        <template #default="{ row }">
          <span v-if="row.province_name">${ row.province_name } ${ row.city_name } ${ row.district_name }</span>
          <span v-else style="color:#c0c4cc;">未设置</span>
        </template>
      </el-table-column>
      <el-table-column label="是否展示" width="100" align="center">
        <template #default="{ row }">
          <el-switch :model-value="row.is_show === 1" @change="(v) => handleToggle(row, v)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template #default="{ row }">
          <el-button type="primary" link @click="showEdit(row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt-4">
      <el-pagination background layout="total, sizes, prev, pager, next" :total="total" :page-sizes="[10, 20, 50, 100]"
        v-model:page-size="pageSize" v-model:current-page="page" @current-change="loadList" @size-change="onSizeChange"></el-pagination>
    </div>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="460px" destroy-on-close draggable :close-on-click-modal="false">
    <el-form :model="form" label-width="90px">
      <el-form-item label="医院名称" required>
        <el-input v-model="form.name" placeholder="请输入医院名称" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item label="所在地区">
        <el-cascader v-model="form.regionCodes" :options="regionTree"
          :props="{ value: 'code', label: 'name', children: 'children' }"
          placeholder="请选择省/市/区" clearable filterable :filter-method="filterRegionNode" style="width:100%;"></el-cascader>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.sort" :min="0" :max="9999"></el-input-number>
      </el-form-item>
      <el-form-item label="是否展示">
        <el-switch v-model="form.is_show" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSave" :loading="saving">确定</el-button>
    </template>
  </el-dialog>

  <!-- Excel 导入弹窗 -->
  <el-dialog v-model="showImport" title="导入医院" width="500px" destroy-on-close :close-on-click-modal="false">
    <p style="font-size:13px;color:var(--el-color-primary);margin-bottom:12px;">
      请上传 Excel 文件（.xlsx），表头依次为：关联机构名称、省份、城市、区县。重复医院将自动跳过。
    </p>
    <el-upload drag :auto-upload="false" :limit="1" :on-change="onFileChange" :on-remove="onFileRemove"
      accept=".xlsx" :file-list="importFileList">
      <el-icon class="el-icon--upload"><Upload /></el-icon>
      <div class="el-upload__text">将 Excel 文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <template #footer>
      <div style="text-align:right;">
        <el-button @click="showImport = false">取消</el-button>
        <el-button type="primary" @click="handleImport" :loading="importing">确认导入</el-button>
      </div>
    </template>
  </el-dialog>
</div>
{% endblock %}

{% block js %}
<script src="/static/lib/sortablejs/Sortable.min.js"></script>
<script>
const { createApp, ref, reactive, onMounted, nextTick } = Vue;
const { Plus, Upload } = ElementPlusIconsVue;

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const loading = ref(false);
    const list = ref([]);
    const keyword = ref('');
    const total = ref(0);
    const page = ref(1);
    const pageSize = ref(10);
    const regionTree = ref([]);
    const regionFilter = ref([]);
    const dialogVisible = ref(false);
    const dialogTitle = ref('新增医院');
    const saving = ref(false);
    const form = reactive({ id: null, name: '', regionCodes: [], sort: 0, is_show: 1 });
    const showImport = ref(false);
    const importing = ref(false);
    const importFileList = ref([]);
    let importFile = null;
    let sortableInstance = null;

    async function loadRegionTree() {
      const res = await fetch('/common/regions').then(r => r.json());
      if (res.code === 0) regionTree.value = res.data || [];
    }

    function filterRegionNode(node, keyword) {
      const kw = (keyword || '').trim().toLowerCase();
      if (!kw) return true;
      const text = String(node.text || '').toLowerCase();
      const pathText = (node.pathLabels || []).join('').toLowerCase();
      return text.includes(kw) || pathText.includes(kw);
    }

    async function loadList() {
      loading.value = true;
      try {
        const params = new URLSearchParams({
          keyword: keyword.value, page: page.value, pageSize: pageSize.value
        });
        if (regionFilter.value && regionFilter.value.length >= 1) params.set('province_code', regionFilter.value[0]);
        if (regionFilter.value && regionFilter.value.length >= 2) params.set('city_code', regionFilter.value[1]);
        if (regionFilter.value && regionFilter.value.length >= 3) params.set('district_code', regionFilter.value[2]);
        const res = await fetch('/admin/hospital/list?' + params).then(r => r.json());
        if (res.code === 0) {
          list.value = res.data.data || [];
          total.value = res.data.count || 0;
          nextTick(() => initSortable());
        }
      } finally { loading.value = false; }
    }

    function initSortable() {
      if (sortableInstance) { sortableInstance.destroy(); sortableInstance = null; }
      const tbody = document.querySelector('#hospitalApp .el-table__body-wrapper tbody');
      if (!tbody) return;
      sortableInstance = Sortable.create(tbody, {
        handle: '.drag-handle',
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd(evt) {
          if (evt.oldIndex === evt.newIndex) return;
          const arr = list.value.slice();
          const item = arr.splice(evt.oldIndex, 1)[0];
          arr.splice(evt.newIndex, 0, item);
          list.value = arr;
          fetch('/admin/hospital/sort', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ids: arr.map(i => i.id) })
          }).then(r => r.json()).then(res => {
            if (res.code === 0) ElementPlus.ElMessage.success('排序已保存');
            else loadList();
          });
        }
      });
    }

    function showAdd() {
      dialogTitle.value = '新增医院';
      form.id = null; form.name = ''; form.regionCodes = []; form.sort = 0; form.is_show = 1;
      dialogVisible.value = true;
    }

    function onSearch() {
      page.value = 1;
      loadList();
    }

    function resetQuery() {
      keyword.value = '';
      regionFilter.value = [];
      page.value = 1;
      loadList();
    }

    function onSizeChange() {
      page.value = 1;
      loadList();
    }
    function showEdit(row) {
      dialogTitle.value = '编辑医院';
      form.id = row.id; form.name = row.name; form.sort = row.sort; form.is_show = row.is_show;
      form.regionCodes = [row.province_code, row.city_code, row.district_code].filter(Boolean);
      dialogVisible.value = true;
    }

    async function handleSave() {
      if (!form.name.trim()) { ElementPlus.ElMessage.warning('请输入医院名称'); return; }
      saving.value = true;
      try {
        const url = form.id ? '/admin/hospital/edit' : '/admin/hospital/add';
        const codes = form.regionCodes || [];
        const payload = {
          id: form.id, name: form.name, sort: form.sort, is_show: form.is_show,
          province_code: codes[0] || '', city_code: codes[1] || '', district_code: codes[2] || ''
        };
        const res = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally { saving.value = false; }
    }

    async function handleDelete(row) {
      try {
        await ElementPlus.ElMessageBox.confirm(`确定要删除「${row.name}」吗？`, '提示', { type: 'warning' });
        const res = await fetch('/admin/hospital/delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: row.id })
        }).then(r => r.json());
        if (res.code === 0) { ElementPlus.ElMessage.success('删除成功'); loadList(); }
        else { ElementPlus.ElMessage.error(res.msg || '删除失败'); }
      } catch (e) {}
    }

    async function handleToggle(row, val) {
      const res = await fetch('/admin/hospital/toggleShow', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: row.id, is_show: val ? 1 : 0 })
      }).then(r => r.json());
      if (res.code === 0) { row.is_show = val ? 1 : 0; ElementPlus.ElMessage.success('已更新'); }
      else { ElementPlus.ElMessage.error(res.msg || '操作失败'); }
    }

    function onFileChange(file) {
      importFile = file.raw;
      importFileList.value = [file];
    }

    function onFileRemove() {
      importFile = null;
      importFileList.value = [];
    }

    async function handleImport() {
      if (!importFile) { ElementPlus.ElMessage.warning('请先选择 Excel 文件'); return; }
      importing.value = true;
      try {
        const fd = new FormData();
        fd.append('file', importFile);
        const res = await fetch('/admin/hospital/import', { method: 'POST', body: fd }).then(r => r.json());
        if (res.code === 0) {
          let msg = `导入成功 ${res.data.count} 条，跳过 ${res.data.skipped} 条`;
          if (res.data.unmatchedCount > 0) msg += `，${res.data.unmatchedCount} 条地区未匹配`;
          ElementPlus.ElMessage.success(msg);
          showImport.value = false;
          importFile = null;
          importFileList.value = [];
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '导入失败');
        }
      } finally { importing.value = false; }
    }

    onMounted(() => { loadList(); loadRegionTree(); });

    return { loading, list, keyword, total, page, pageSize, regionTree, regionFilter, dialogVisible, dialogTitle, saving, form, showImport, importing, importFileList, loadList, onSearch, resetQuery, onSizeChange, showAdd, showEdit, handleSave, handleDelete, handleToggle, handleImport, onFileChange, onFileRemove, filterRegionNode, Plus, Upload };
  }
});

app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#hospitalApp');
</script>
{% endblock %}