<script lang="ts" setup name="ListArea">
import { computed, onActivated, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IlistQuery } from './area_interface'
import EditArea from './editArea.vue'
import { delArea, getAreaListPage } from '@/api/system/area'
const { proxy } = getCurrentInstance() as any
const editarea = ref()
const listQuery: IlistQuery = reactive({
  keywords: '',
  offset: 1,
  limit: 20,
  sort: '',
  order: '',
}) // 筛选条件
const columns: any = [
  {
    text: '区域名称',
    value: 'areaName',
    align: 'center',
  },
  {
    text: '区域编码',
    value: 'id',
    align: 'center',
  },
  {
    text: '区域等级',
    value: 'levelName',
    align: 'center',
  },
  {
    text: '所属区域',
    value: 'pName',
    align: 'center',
  },
  {
    text: '区域排序',
    value: 'num',
    width: 80,
    align: 'center',
  },
]// 显示列
const list = ref([]) // 列表数据
const total = ref(0)// 数据总数
const listLoading = ref(true)// 加载动画
const fullscreenLoading = ref(false) // 全屏加载动画
const dialogFormVisible = ref(false) // 是否显示编辑框

// 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
const showOperate = computed(() => {
  return proxy.hasPerm('/sys/area/update') || proxy.hasPerm('/sys/area/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 detail = (row: any) => {
  // detailwell.initDialog(true, row)
}

// 新增区域
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: any) => {
  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显示 -->
    <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
      <template #btns>
        <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
          新增
        </el-button>
      </template>
      <template #columns>
        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
          <template #default="scope">
            <span :class="column.class">{{ scope.row[column.value] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="showOperate" label="操作" width="160" align="center">
          <template #default="scope">
            <el-button v-if="proxy.hasPerm('/sys/area/update')" type="text" size="small" @click="edit(scope.row)">
              修改
            </el-button>
            <el-button v-if="proxy.hasPerm('/sys/area/delete')" type="text" size="small" @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
    <EditArea v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData" />
  </app-container>
</template>

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