<template>
  <div class="custom-page">
    <el-form :inline="true" :model="searchForm" class="search-bar">
      <el-form-item label="关键词">
        <el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <avue-crud
      ref="crudRef"
      v-model:page="pagination"
      :data="crudData"
      :option="crudOptions"
      :table-loading="loading"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
      <!-- <template #menu="scope">
        <custom-table-operate :actions="getActions(scope.row)" :data="scope" />
      </template> -->
    </avue-crud>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import { mockData } from './mockData';
onMounted(() => {
  getData();
});
const getData = async () => {
  await new Promise((resolve) => setTimeout(resolve, 300));
  crudData.value = mockData;
  pagination.value.total = crudData.value.length;
};
const loading = ref(false);

const searchForm = ref({});
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const crudData = ref([]);
const crudOptions = ref({
  ...CRUD_OPTIONS,
  header: false,
  menu: false,
  height: 'calc(100vh - 330px)',
  column: [
    { label: '基地编码', prop: 'baseCode' },
    { label: '基地名称', prop: 'baseName' },
    { label: '所属行政区域', prop: 'regionName' },
    { label: '所属网格', prop: 'gridName' },
    { label: '具体位置', prop: 'adress' },
    { label: '经纬度', prop: 'coordinate', formatter: (row) => `${row.longitude}, ${row.latitude}` },
    { label: '气候条件', prop: 'weather' },
    { label: '海拔（米）', prop: 'altitude' },
    { label: '面积（亩）', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
    { label: '使用状态', prop: 'status' },
    { label: '经营主体代码', prop: 'businessCode' },
    { label: '经营主体类型', prop: 'businessType' },
    { label: '经营主体名称', prop: 'businessSubjectName' },
    { label: '创建时间', prop: 'createTime' },
  ],
});
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val;
};
const handleSizeChange = (val) => {
  pagination.value.pageSize = val;
};
const getActions = (row) => {
  return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
};
const handleView = (row) => {
  console.log(row);
};
</script>

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