<template>
  <div class="app-container" v-loading="state.loading">
    <el-card class="search-container">
      <el-form :inline="true">
        <el-form-item label="职位名称">
          <el-input v-model="state.queryParams.name" placeholder="职位名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery" icon="Search"  v-auth="'positionIndex:page'">查询</el-button>
          <el-button type="primary" @click="() => positionEditDialogRef.openDialog()" v-auth="'positionIndex:add'">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="paged-table-container">
      <el-table ref="tableRef" row-key="id" :data="state.tableData" border>
        <el-table-column type="index" width="50">
          <template #default="scope">
            {{ scope.$index + 1 + (state.pageParams.Page - 1) * state.pageParams.PageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="positionName" label="职位名称"></el-table-column>
        <el-table-column prop="formCode" label="编码"></el-table-column>
        <el-table-column prop="sort" label="序号" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="success" disable-transitions>正常</el-tag>
            <el-tag v-else type="danger" disable-transitions>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" align="left" width="260" show-overflow-tooltip>
          <template #default="scope">
            <el-button
              link
              icon="Edit"
              type="primary"
              @click="() => positionEditDialogRef.openDialog(scope.row.id)"
              v-auth="'positionIndex:edit'"
            >
              编辑
            </el-button>
            <el-button link icon="Delete" type="danger" @click="handleDelete([scope.row.id])" v-auth="'positionIndex:delete'">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 15px;float:right"
        v-model:currentPage="state.pageParams.Page"
        v-model:page-size="state.pageParams.PageSize"
        :total="state.pageParams.Total"
        background
        layout="total, sizes,prev, pager, next"
        @size-change="handleQuery"
        @current-change="handleQuery"
        :page-sizes="[10, 20, 50, 100]"
      />
    </el-card>
    <PositionEditDialog ref="positionEditDialogRef" @onClose="handleQuery" />
  </div>
</template>
<script setup>
defineOptions({ name: 'positionIndex' })
import { reactive, ref, onMounted } from 'vue'
import PositionEditDialog from './components/editDialog.vue'
import { getPaged, deletePosition } from '@/api/system/positionApi'
import { ElMessageBox, ElMessage } from 'element-plus'

const state = reactive({
  loading: false,
  queryParams: {
    name: ''
  },
  pageParams: {
    Page: 1,
    PageSize: 10,
    Total: 0
  },
  tableData: []
})

const positionEditDialogRef = ref()

onMounted(() => {
  handleQuery()
})

function handleQuery() {
  state.loading = true
  getPaged(Object.assign({}, state.queryParams, state.pageParams))
    .then((resp) => {
      state.tableData = resp.data.data
      state.pageParams.Total = resp.data.total
    })
    .finally(() => (state.loading = false))
}

function handleDelete(ids) {
  ElMessageBox.confirm('是否删除该职位？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    state.loading = true
    deletePosition({ ids })
      .then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        handleQuery()
      })
      .finally(() => (state.loading = false))
  })
}
</script>
