<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 label="" label-width="0">
        <AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
      </el-form-item>
      <el-form-item label="种植作物" prop="planCrop">
        <url-select
          v-model="searchForm.planCrop"
          url="/land-resource/crops/page"
          :params="{ status: '0' }"
          label-key="cropsName"
          value-key="id"
          placeholder="请选择种植作物"
          style="width: 200px"
        />
      </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: 'landNumber', width: 160 },
    { label: '地块名称', prop: 'landName', width: 170 },
    { label: '面积', prop: 'planArea', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
    { label: '所属行政区域', prop: 'belongRegion', width: 160 },
    { label: '所属网格', prop: 'belongGrid', width: 90 },
    { label: '具体位置', prop: 'address', width: 160 },
    { label: '基地编码', prop: 'baseCode' },
    { label: '基地名称', prop: 'baseName' },
    { label: '种植批次编码', prop: 'batchCode' },
    { label: '种植批次名称', prop: 'batchName' },
    { label: '种植作物', prop: 'crop' },
    { label: '作物品种', prop: 'cropBrand' },
    { label: '种植开始时间', prop: 'startDate' },
    { label: '种植结束时间', prop: 'endDate' },
    { label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
    { label: '经营主体类型', prop: 'businessEntityType', width: 130 },
    { label: '经营主体名称', prop: 'businessEntityName', width: 130 },
    { label: '账号（手机号）', prop: 'account', width: 130 },
    { label: '信息填报时间', prop: 'fillTime', width: 110 },
    { label: '信息审核时间', prop: 'approvalTime', width: 110 },
  ],
});
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>
