<template>
  <el-dialog v-model="state.dialogVisible" draggable title="查看标签记录" ref="dialogRef" width="60%" append-to-body>
    <el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
      <el-form-item label="市民标签" prop="Label">
        <el-input v-model="state.queryParams.Label" placeholder="市民标签" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="记录人" prop="CreatorName">
        <el-input v-model="state.queryParams.CreatorName" placeholder="记录人名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
        <el-button @click="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.tableData" max-height="500px">
      <el-table-column prop="label" label="市民标签" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="phone" label="市民" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="creatorName" label="记录人" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
        <template #default="{ row }">
          <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <Empty />
      </template>
    </el-table>
    <pagination
        :total="state.total"
        v-model:page="state.queryParams.PageIndex"
        v-model:limit="state.queryParams.PageSize"
        @pagination="queryList"
    />
  </el-dialog>
</template>

<script setup lang="ts" name="businessCitizenTagsRecord">
import {reactive, ref} from 'vue';
import type { FormInstance } from 'element-plus';
import {citizenLabelList} from "/@/api/business/citizen"
import {formatDate} from "/@/utils/formatTime";
// 定义变量内容
const state = reactive<any>({
  dialogVisible: false, // 弹窗显示隐藏
  queryParams: {
    PageIndex: 1, // 当前页
    PageSize: 10, // 每页条数
    Keyword: '',  // 关键字
  },
  tableData: [], // 表格数据
  total: 0,   // 总条数
  loading: false, // 加载状态
  citizen:<EmptyObjectType>{},//市民信息
});
const ruleFormRef = ref<RefType>(); // 表单ref
// 打开弹窗
const openDialog = (row: any) => {
  state.citizen = row;
  queryList();
  state.dialogVisible = true;
};
const dialogRef = ref<RefType>();
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
/** 搜索按钮操作 */
const handleQuery = () => {
  state.queryParams.PageIndex = 1;
  queryList();
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  handleQuery();
};
/** 获取历史工单 */
const queryList = () => {
  state.loading = true;
  let request = {
    ...state.queryParams,
    CitizenId: state.citizen.id
  };
  citizenLabelList(request)
      .then((response: any) => {
        state.tableData = response?.result.items ?? [];
        state.total = response?.result.total;
        state.loading = false;
      })
      .catch(() => {
        state.loading = false;
      });
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>

