<template>
  <div class="custom-page">
    <h1>林地</h1>
    <LandSearch :search="searchForm" @on-search="handleSearch" @on-reset="handleReset" />
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <!-- <el-tab-pane label="待提交" name="0" /> -->
      <el-tab-pane label="待审核" name="1" />
      <el-tab-pane label="已通过" name="2" />
      <el-tab-pane label="已驳回" name="0" />
    </el-tabs>
    <TableComponent
      :loading="loading"
      :columns="columns"
      :table-data="tableData"
      :current-page="pageData.currentPage"
      :page-size="pageData.pageSize"
      :total="pageData.total"
      :show-pagination="true"
      :show-border="true"
      :show-sort="true"
      style="height: calc(100vh - 320px)"
      @page-change="handlePageChange"
    />
    <el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
      <el-tabs v-model="activeFormTab" class="tabs-wrapper">
        <el-tab-pane label="土地基本信息" name="basic">
          <p class="form-title">基本信息</p>
          <el-form ref="basicFormRef" :model="formData" :disabled="isReadonly" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="地块名称" prop="landName">
                  <el-input v-model="formData.landName" placeholder="请输入地块名称" />
                </el-form-item>
                <el-form-item label="土地类型" prop="landType">
                  <el-tree-select
                    v-model="formData.landType"
                    :data="landTypeOptions"
                    :props="treeProps"
                    placeholder="选择土地类型"
                    clearable
                    check-strictly
                    :render-after-expand="false"
                    @change="handleLandTypeChange"
                  />
                </el-form-item>
                <el-form-item label="具体位置" prop="address">
                  <el-input v-model="formData.address" placeholder="请输入具体位置" />
                </el-form-item>
                <el-form-item label="土壤类型" prop="soilTypeId">
                  <url-select
                    v-model="formData.soilTypeId"
                    placeholder="选择土壤类型"
                    url="/land-resource/baseInfo/soilTypePage"
                    :params="{ current: 1, size: 100 }"
                    label-key="soilType"
                    value-key="id"
                    :clearable="true"
                  />
                </el-form-item>
                <el-form-item label="土地照片" prop="landUrl">
                  <FileUploader v-model="formData.landUrl" :limit="1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="面积(亩)" prop="area">
                  <el-input-number v-model="formData.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
                </el-form-item>

                <el-form-item label="" label-width="0" prop="gridId">
                  <AreaCascader v-model:region-code="formData.gridAreaCode" v-model:grid-id="formData.gridId" label="" :split-rows="true" />
                </el-form-item>

                <el-form-item label="土地范围" prop="scope">
                  <el-input v-model="formData.scope" placeholder="请输入土地范围" />
                  <!-- <Attrs v-model:attrs="formData.scope" type="add" accept="image/*" /> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="土地承包信息" name="property">
          <p class="form-title">承包信息</p>
          <el-form ref="propertyFormRef" :model="formData" :disabled="isReadonly" label-width="150px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="土地承包经营权人" prop="propertyName">
                  <el-input v-model="formData.propertyName" placeholder="请输入产权人姓名" />
                </el-form-item>
                <el-form-item label="联系方式" prop="propertyPhone">
                  <el-input v-model="formData.propertyPhone" placeholder="请输入产权人联系方式" />
                </el-form-item>
                <el-form-item label="土地经营权证书编号" prop="landCode">
                  <el-input v-model="formData.landCode" placeholder="请输入产权编号" />
                </el-form-item>
                <el-form-item label="土地经营权证书" prop="propertyCertificateUrl">
                  <FileUploader v-model="formData.propertyCertificateUrl" :limit="1" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12"></el-col> -->
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="土地流转信息" name="use">
          <p class="form-title">流转信息</p>
          <el-form ref="useForm" :model="formData" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否土地流转" prop="landTransfer">
                  <el-radio-group v-model="formData.landTransfer" :disabled="isReadonly">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="formData.landTransfer === '1'" label="土地受让方" prop="landUseName">
                  <el-input v-model="formData.landUseName" placeholder="请输入土地受让方" />
                </el-form-item>
                <el-form-item v-if="formData.landTransfer === '1'" label="联系电话" prop="landUsePhone">
                  <el-input v-model="formData.landUsePhone" placeholder="请输入土地受让方联系方式" />
                </el-form-item>
                <el-form-item v-if="formData.landTransfer === '1'" label="流转合同" prop="landCertificateUrl">
                  <FileUploader v-model="formData.landCertificateUrl" :limit="1" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <template v-if="!isReadonly">
            <el-button type="primary" @click="submitAll">修改</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import LandSearch from './components/LandSearch.vue';
import TableComponent from '@/components/tableComponent.vue';

const searchForm = ref({});
const handleSearch = (searchData) => {
  // 使用搜索条件
  console.log(searchData);
};

const handleReset = () => {
  // 重置后的逻辑
};

const activeTab = ref('1');
const handleTabChange = ({ name }) => {
  //   activeTab.value = name;
  console.log('切换tab', activeTab.value);
  searchForm.value.landStatus = Number(activeTab.value);
  getData();
};

const loading = ref(false);
const tableData = ref([]);
const pageData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const columns = ref([
  { label: '地块编号', prop: 'id', width: 160 },
  { label: '地块名称', prop: 'landName', width: 170 },
  { label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
  { label: '土地分类', prop: 'landTypeName' },
  { label: '土壤类型', prop: 'soilTypeName' },
  { label: '所属行政区域', prop: 'fullRegionName', width: 160 },
  { label: '所属网格', prop: 'gridName', width: 90 },
  { label: '具体位置', prop: 'address', width: 160 },
  { label: '土地承包经营人', prop: 'propertyName' },
  { label: '联系电话', prop: 'propertyPhone' },
  { label: '土地经营权证书编号', prop: 'landCode', width: 160 },
  { label: '是否土地流转', prop: 'isTransfer' },
  { label: '土地受让方', prop: 'transferName' },
  { label: '受让方联系电话', prop: 'transferPhone', width: 100 },
  { label: '流转合同', prop: 'transferContract' },
  { label: '信息填报人', prop: 'fillName' },
  { label: '信息填报单位', prop: 'fillGroup' },
  { label: '信息填报时间', prop: 'fillTime' },
  // { label: '信息更新人', prop: 'updateName' },
  // { label: '信息更新单位', prop: 'updateGroup' },
  { label: '信息更新时间', prop: 'updateTime' },
]);

const handlePageChange = ({ page, pageSize }) => {
  pageData.value.currentPage = page;
  pageData.value.pageSize = pageSize;
  getData();
};

const visible = ref(false);
const isReadonly = ref(false);
const dialogTitle = ref();
const activeFormTab = ref('basic');
const formData = ref({
  gridName: '',
  gridAreaCode: '',
  scope: '',
  scopeImg: '',
  note: '',
});
const initialFormData = { ...formData.value };
const resetForm = () => {
  formData.value = { ...initialFormData };
};

import { mockData } from './landData';
import { createLand, deleteLand, editLand, fetchLandList, getLandById, approveLand } from '@/apis/landResourceManagement/landManagement';
import request from '@/utils/axios';
const getData = async () => {
  //   const filteredParams = filterObject(searchForm.value);
  //   const response = await fetchGridList(filteredParams);
  //   crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
  loading.value = true;
  // 模拟接口延迟
  await new Promise((resolve) => setTimeout(resolve, 300));
  tableData.value = mockData
    .filter((item) => item.status === activeTab.value)
    .map((item) => ({
      ...item,
      landTypeName: '林地',
    }));
  pageData.value.total = tableData.value.length;
  loading.value = false;
};
const getLandDetail = async (id) => {
  const response = await getLandById(id);
  return response.data;
};
const landTypeOptions = ref([]);
const treeProps = ref({
  value: 'id',
  label: 'landType',
  children: 'children',
  // disabled: (data) => {
  //   return data.children && data.children.length > 0;
  // },
});
const fetchLandTypeData = async () => {
  try {
    const response = await request.get('/land-resource/baseInfo/landTree', { params: { status: '1' } });
    if (response.code === 200) {
      landTypeOptions.value = response.data;
    }
  } catch (error) {
    console.error('获取土地类型数据失败', error);
  }
};
onMounted(() => {
  getData();
  fetchLandTypeData();
});
</script>
<style scoped lang="scss">
.custom-page {
  display: flex;
  flex-direction: column;
}
h1 {
  font-size: 20px;
  font-weight: bold;
}
</style>
