<template>
  <div>
    <el-card class="box-card" shadow="never">
      <el-row>
        <el-col :span="16">
          <el-row>
            <Auth value="healthManage:tag:edit">
              <el-button
                type="primary"
                @click="
                  () => {
                    rowData = {};
                    visibleEdit = true;
                  }
                "
                >新增标签</el-button
              >
            </Auth>
          </el-row>
        </el-col>
        <el-col :span="8" class="flex">
          <el-input
            v-model="query.name"
            placeholder="请输入标签名称进行搜索"
            clearable
          />
          <el-button
            class="ml-2"
            type="primary"
            :icon="Search"
            @click="onSearch"
            :loading="loading"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <div class="mt-4">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="标签名称" />
        <el-table-column prop="purpose" label="标签用途" />
        <el-table-column prop="" label="操作" width="180">
          <template #default="scope">
            <el-space spacer="|">
              <Auth value="healthManage:tag:edit">
                <el-button type="primary" link @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-popconfirm
                  title="确定要删除此标签吗"
                  @confirm="onDelete(scope.row.id)"
                  width="200"
                >
                  <template #reference>
                    <el-button type="danger" text>删除</el-button>
                  </template>
                </el-popconfirm>
              </Auth>
            </el-space>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-4 justify-end"
        background
        :current-page="query.page"
        :page-size="query.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="onChangePage"
      />
      <DialogEditTags
        v-model:show="visibleEdit"
        @success="onSearch"
        :rowData="rowData"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import { request } from "@/utils/http";
import { ElMessage } from "element-plus";
import DialogEditTags from "./components/DialogEditTags.vue";
const tableData = ref([]);
const query = ref({
  page: 1,
  pageSize: 10,
  name: ""
});
const loading = ref(false);
const total = ref(0);

const visibleEdit = ref(false);

const rowData = ref({});

const getList = () => {
  loading.value = true;
  request
    .get("dataService/schemeManage/tag/paginate", {
      params: query.value
    })
    .then(resp => {
      tableData.value = resp.data.list;
      total.value = resp.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
const onSearch = () => {
  query.value.page = 1;
  getList();
};
const onChangePage = page => {
  query.value.page = page;
  getList();
};
const handleEdit = row => {
  rowData.value = row;
  visibleEdit.value = true;
};

const onDelete = id => {
  request.post("dataService/schemeManage/tag/delete", { id }).then(resp => {
    ElMessage.success(resp.message);
    getList();
  });
};

/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
  if (code === "Enter") {
    onSearch();
  }
}

onMounted(() => {
  window.document.addEventListener("keypress", onkeypress);
});

onBeforeUnmount(() => {
  window.document.removeEventListener("keypress", onkeypress);
});

const initData = () => {
  getList();
};
initData();
</script>
