<!-- 筛选系统用户弹窗 -->
<script name="FilterSeal" lang="ts" setup>
import type { IListQuery, ISealInfo } from '../list/seal-info'
import { getSealInfoList } from '@/api/resource/seal'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const emit = defineEmits(['recordSelected'])

const showFilterDialog = ref(false)
const query = ref<IListQuery>({
  sealNo: '',
  sealName: '', // 查询委托方名录
  status: '1',
  offset: 1,
  limit: 5,
})
const total = ref<number>(0) // 数据总条数
const columns = ref <Array<TableColumn>>([
  { text: '印章编号', value: 'sealNo', align: 'center' },
  { text: '印章名称', value: 'sealName', align: 'center' },
  { text: '在用状态', value: 'statusName', align: 'center' },
  { text: '图形', value: 'minioFileUrl', align: 'center' },
]) // 表头

const sealList = ref<Array<ISealInfo>>([])

// 查询委托方名录列表
const getList = () => {
  getSealInfoList(query.value).then((res) => {
    if (res.code === 200) {
      sealList.value = res.data.rows
      total.value = res.data.total
    }
    else {
      sealList.value = []
    }
  })
}

// 逻辑
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    query.value.limit = val.size
  }
  if (val && val.page) {
    query.value.offset = val.page
  }
  getList()
}
// 改变页容量
function handleSizeChange(val: number) {
  changePage({ size: val })
}
// 改变当前页
function handleCurrentChange(val: number) {
  changePage({ page: val })
}

// 选中用户
const selectSingleUser = (row: Object) => {
  emit('recordSelected', row)
}

const showOrHideFilterDialog = (show: boolean) => {
  if (show === false) {
    query.value.sealNo = ''
    query.value.sealName = ''
    query.value.offset = 1
    query.value.limit = 5
  }
  else {
    getList()
  }

  showFilterDialog.value = show
}

defineExpose({
  showOrHideFilterDialog,
})
</script>

<template>
  <el-dialog v-model="showFilterDialog" title="选择印章" :append-to-body="true" :close-on-click-modal="false" top="10vh">
    <search-area :need-clear="false" @search="getList">
      <search-item>
        <el-input v-model="query.sealNo" placeholder="印章编号" clearable />
      </search-item>
      <search-item>
        <el-input v-model="query.sealName" placeholder="印章名称" clearable />
      </search-item>
    </search-area>

    <!-- 表格数据展示 -->
    <table-container :title-show="false">
      <!-- 表格区域 -->
      <el-table :data="sealList" :columns="columns" border stripe>
        <el-table-column align="center" label="序号" width="55" type="index" />

        <el-table-column v-for="col in columns" :key="col.value" :label="col.text" :align="col.align" :width="col.width">
          <template #default="scope">
            <el-image v-if="col.value === 'minioFileUrl'" :src="scope.row.minioFileUrl" />
            <span v-else>{{ scope.row[col.value] }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="130">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="selectSingleUser(row)">
              选定
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="query.offset"
        :page-sizes="[5, 10]"
        :page-size="query.limit"
        :total="total"
        layout="total, sizes, prev, pager, next"
        style="margin-top: 10px;"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </table-container>
  </el-dialog>
</template>
