<script lang="ts" setup name="ListArea">
import { computed, onActivated, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { IlistQuery } from './area-interface'
import EditArea from './editArea.vue'
import { delArea, getAreaListPage } from '@/api/system/area'
import type { TableColumn } from '@/components/NormalTable/table_interface'

enum Perm {
  ADD = '/sys/area/add',
  EDIT = '/sys/area/update',
  DELETE = '/sys/area/delete',
}
const { proxy } = getCurrentInstance() as any
const editarea = ref()
const listQuery: IlistQuery = reactive({
  keywords: '',
  offset: 1,
  limit: 20,
  sort: '',
  order: '',
}) // 筛选条件
const columns: Ref<TableColumn[]> = ref([])
columns.value = [
  { text: '区域名称', value: 'areaName', align: 'center' },
  { text: '区域编码', value: 'id', align: 'center' },
  { text: '区域等级', value: 'levelName', align: 'center' },
  { text: '所属区域', value: 'pName', align: 'center' },
  { text: '区域排序', value: 'num', width: 100, align: 'center' },
]
const list = ref([]) // 列表数据
const total = ref(0)// 数据总数
const listLoading = ref(true)// 加载动画
const dialogFormVisible = ref(false) // 是否显示编辑框

// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
const showOperate = computed(() => {
  return proxy.hasPerm(Perm.EDIT) || proxy.hasPerm(Perm.DELETE)
})

// 获取区域数据
const fetchData = (isNowPage: boolean) => {
  listLoading.value = true
  if (!isNowPage) { // 是否显示当前页，否则跳转第一页
    listQuery.offset = 1
  }
  getAreaListPage(listQuery).then((response) => {
    if (response.code === 200) {
      list.value = response.data.rows
      total.value = parseInt(response.data.total)
      listLoading.value = false
    }
  })
}

fetchData(true)// 获取数据

onActivated(() => {
  fetchData(true)// 获取数据
})

// 新增区域
const add = () => {
  dialogFormVisible.value = true
  editarea.value.initDialog('create')
}

// 编辑区域信息
const edit = (row: any) => {
  dialogFormVisible.value = true
  // editShow = true
  editarea.value.initDialog('update', row)
}
// 删除区域
const del = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除区域吗？',
    '确认操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delArea(row.id).then((response) => {
      if (response.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        fetchData(true)
      }
    })
  })
}

// 查询数据
const search = () => {
  fetchData(false)
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  fetchData(true)
}
</script>

<template>
  <app-container>
    <!-- 筛选条件 -->
    <search-area @search="search">
      <search-item>
        <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编码" clearable />
      </search-item>
    </search-area>
    <table-container>
      <template #btns-right>
        <icon-button v-if="proxy.hasPerm(Perm.ADD)" icon="icon-add" title="新增" @click="add" />
      </template>
      <!-- 查询结果Table显示 -->
      <normal-table :data="list" :columns="columns" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
        <template #columns>
          <el-table-column v-if="showOperate" label="操作" width="160" align="center">
            <template #default="scope">
              <el-button v-if="proxy.hasPerm(Perm.EDIT)" type="primary" link size="small" @click="edit(scope.row)">
                修改
              </el-button>
              <el-button v-if="proxy.hasPerm(Perm.DELETE)" type="primary" link size="small" @click="del(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <edit-area v-show="dialogFormVisible" ref="editarea" @watch-child="fetchData" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>
