<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <!-- 操作栏 -->
      <div class="toolbar">
        <el-button
          type="primary"
          icon="el-icon-search"
          class="ele-btn-icon"
          @click="openForm()"
        >
          IP 查询
        </el-button>
      </div>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :need-page="false"
        :default-expand-all="false"
        :cache-key="cacheKeyUrl"

      />
    </el-card>

    <!-- 表单弹窗：添加/修改 -->
    <AreaForm ref="formRef" @success="reload" />
  </div>
</template>

<script>
import * as AreaApi from '@/api/config/elencoRegionale'
import AreaForm from './components/AreaForm.vue'
import { formatTreeData } from 'ele-admin'

export default {
  name: 'SystemArea',
  components: {
    AreaForm
  },
  data() {
    return {
      cacheKeyUrl: 'systemAreaTable',
      loading: false,
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'id',
          label: '编号',
          headerAlign: 'center',
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'name',
          label: '地名',
          headerAlign: 'center',
          align: 'center',
          showOverflowTooltip: true,
        }
      ]
    }
  },
  methods: {
    /* 表格数据源 */
    datasource() {
      return AreaApi.getAreaTree().then((res) => {
        return formatTreeData(res, (item, parent) => {
          return Object.assign({}, item, {
            parentId: parent?.id || '0'
          })
        }, 'children')
      })
    },

    /* 刷新表格 */
    reload() {
      this.$refs.table.reload()
    },

    /** 添加/修改操作 */
    openForm() {
      this.$refs.formRef.open()
    }
  }
}
</script>
<style lang="scss" scoped>
.toolbar {
  margin-bottom: 10px;
}
</style>