<template>
  <div class="data-list-component">
    <a-table :columns="columns" :data-source="dataSource" :pagination="false" :bordered="true">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-button class="operation-button" shape="round" @click="handlerLocation(record)">
            定位
          </a-button>

          <a-button class="operation-button" shape="round" @click="handlerEdit(record)">
            编辑
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { DeleteOutlined } from '@ant-design/icons-vue'
import { h,defineEmits } from "vue"
import './index.scss'

const emits = defineEmits(["handlerLocation","handlerEdit"])
const columns = [
  {
    title: '位置',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '是否正常使用',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '所属单位',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'is_del',
    dataIndex: 'is_del',
    key: 'is_del',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  },
]
const dataSource = [
  {
    key: '1',
    address: '上海市普陀区金沙江路 1518 弄',
    type: '上海市普陀区金沙江路 1517 弄',
    is_del: '上海市普陀区金沙江路 1519 弄',
  },
  {
    key: '2',
    address: '上海市普陀区金沙江路 1517 弄',
    type: '上海市普陀区金沙江路 1519 弄',
    is_del: '上海市普陀区金沙江路 1516 弄',
  },
]

const handlerLocation = () => {
  emits("handlerLocation",[118.630881,35.800163])
}

const handlerEdit = () => {
  emits("handlerEdit")
}

</script>

<style lang="scss" scoped>
.data-list-component{
  position: absolute;
  bottom: 20px;
  left: 386px;
  background-color: #fff;
  padding: 13px 13px 8px 13px;
  .operation-button{
    background-color:#09B66D;
    color:#fff;
  }
  .operation-button:hover,.operation-button:focus{
    border-color: #09B66D;
  }
}
</style>