<script setup lang="ts">
import { getPointList } from 'apis/point'
import FtButton from 'components/common/FTButton/index.vue'
import Edit from 'components/point/Edit/index.vue'
import { cloneDeep } from 'lodash'
import { h, provide, ref } from 'vue'

const upDataVisible = ref(false)
const currentData = ref<Point.Point>()
provide('currentData', currentData)
const columns = [
  {
    title: '名称',
    key: 'name',
  },
  {
    title: '类型',
    key: 'type',
  },
  {
    title: '坐标',
    key: 'position',
  },
  {
    title: '操作',
    fixed: 'right',
    width: 120,
    render: (row: any) => {
      return h(
        FtButton,
        {
          class: ['table-cell-mouse-on'],
          id: row.id,
          onClick: () => {
            upDataVisible.value = true
            currentData.value = cloneDeep(row)
          },
        },
        { default: () => '编辑' },
      )
    },
  },
]
</script>

<template>
  <div>
    <FtTable :columns="columns" :get-data-fn="getPointList" />
    <Edit v-if="upDataVisible" @ok="upDataVisible = false" @cancel="upDataVisible = false" />
  </div>
</template>

<style scoped lang="scss">

</style>
