<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>
    <!-- 功能区域 - 只在开发环境显示 -->
    <section v-if="showAddButton" class="function-bar">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </section>
    <!-- 表格区域 -->
    <div class="table-container">
      <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"
        @page-change="handlePageChange"
      >
        <template #action="scope">
          <custom-table-operate :actions="actions" :data="scope" />
        </template>
      </TableComponent>
    </div>

    <!-- 详情/编辑对话框 -->
    <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">
          <el-form ref="basicFormRef" :model="formData" :disabled="isReadonly" label-width="120px">
            <p class="form-title">基地信息</p>
            <el-row :gutter="20">
              <el-col :span="12">
                <!-- 基地编码 -->
                <el-form-item label="基地编码" prop="code">
                  <el-input v-model="formData.code" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 所属行政区域 -->
                <el-form-item label="所属行政区域" prop="regionName">
                  <el-cascader
                    v-model="formData.regionName"
                    :options="regionOptions"
                    :props="{ checkStrictly: true }"
                    :disabled="isReadonly"
                    clearable
                  />
                </el-form-item>

                <!-- 具体位置 -->
                <el-form-item label="具体位置" prop="address">
                  <el-input v-model="formData.address" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 气候条件 -->
                <el-form-item label="气候条件" prop="weather">
                  <el-select v-model="formData.weather" :disabled="isReadonly" clearable>
                    <el-option v-for="item in weatherOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <!-- 面积（亩） -->
                <el-form-item label="面积（亩）" prop="area">
                  <el-input-number v-model="formData.area" :min="0" :precision="2" :disabled="isReadonly" controls-position="right" />
                </el-form-item>

                <!-- 投入使用时间 -->
                <el-form-item label="投入使用时间" prop="commissioningTime">
                  <el-date-picker
                    v-model="formData.commissioningTime"
                    type="date"
                    :disabled="isReadonly"
                    value-format="YYYY-MM-DD"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <!-- 基地名称 -->
                <el-form-item label="基地名称" prop="name">
                  <el-input v-model="formData.name" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 所属网格 -->
                <el-form-item label="所属网格" prop="gridName">
                  <el-input v-model="formData.gridName" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 经纬度 -->
                <el-form-item label="经纬度">
                  <div class="coordinate-container">
                    <el-input v-model="formData.longitude" placeholder="经度" :readonly="isReadonly" style="width: 45%" />
                    <span style="margin: 0 5px">,</span>
                    <el-input v-model="formData.latitude" placeholder="纬度" :readonly="isReadonly" style="width: 45%" />
                    <!-- <el-button v-if="!isReadonly" type="primary" link @click="handleSelectOnMap"> 地图选取 </el-button> -->
                  </div>
                </el-form-item>

                <!-- 海拔 -->
                <el-form-item label="海拔（米）" prop="altitude">
                  <el-input-number v-model="formData.altitude" :min="0" :precision="0" :disabled="isReadonly" controls-position="right" />
                </el-form-item>

                <!-- 基地使用状态 -->
                <el-form-item label="使用状态" prop="status">
                  <el-select v-model="formData.status" :disabled="isReadonly" clearable>
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <!-- 基地照片 -->
                <el-form-item label="基地照片">
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :file-list="formData.baseImages"
                    :disabled="isReadonly"
                    :auto-upload="false"
                    :limit="3"
                    :on-change="handleImageChange"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <p class="form-title">经营主体信息</p>
            <el-row :gutter="20">
              <el-col :span="12">
                <!-- 经营主体代码 -->
                <el-form-item label="经营主体代码" prop="businessCode">
                  <el-input v-model="formData.businessCode" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 经营主体名称 -->
                <el-form-item label="经营主体名称" prop="businessSubjectName">
                  <el-input v-model="formData.businessSubjectName" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 联系电话 -->
                <el-form-item label="联系电话" prop="contactPhone">
                  <el-input v-model="formData.contactPhone" :readonly="isReadonly" clearable />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <!-- 经营主体类型 -->
                <el-form-item label="经营主体类型" prop="businessType">
                  <el-select v-model="formData.businessType" :disabled="isReadonly" clearable>
                    <el-option v-for="item in businessTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <!-- 联系人 -->
                <el-form-item label="联系人" prop="contactPerson">
                  <el-input v-model="formData.contactPerson" :readonly="isReadonly" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <!-- 种植信息标签页 -->
        <el-tab-pane label="基地种植信息" name="plantInfo">
          <el-form ref="propertyFormRef" :model="formData" :disabled="isReadonly" label-width="150px">
            <el-row v-for="(item, index) in formData.plantInfoList" :key="index" :gutter="20">
              <el-col :span="12">
                <!-- 地块编号 -->
                <el-form-item label="地块编号" :prop="`plantInfoList.${index}.plotCode`">
                  <el-input v-model="item.plotCode" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 面积（亩） -->
                <el-form-item label="面积（亩）" :prop="`plantInfoList.${index}.area`">
                  <el-input-number v-model="item.area" :min="0" :precision="2" :disabled="isReadonly" controls-position="right" />
                </el-form-item>

                <!-- 品种名称 -->
                <el-form-item label="品种名称" :prop="`plantInfoList.${index}.varietyName`">
                  <el-input v-model="item.varietyName" :readonly="isReadonly" clearable />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <!-- 地块名称 -->
                <el-form-item label="地块名称" :prop="`plantInfoList.${index}.plotName`">
                  <el-input v-model="item.plotName" :readonly="isReadonly" clearable />
                </el-form-item>

                <!-- 作物名称 -->
                <el-form-item label="作物名称" :prop="`plantInfoList.${index}.cropName`">
                  <el-select v-model="item.cropName" :disabled="isReadonly" clearable>
                    <el-option v-for="crop in cropOptions" :key="crop.value" :label="crop.label" :value="crop.value" />
                  </el-select>
                </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, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { createBase, updateBase, deleteBase, deleteBaseBatch, fetchBaseList, getBaseDetail } from '@/apis/planting/base';
import { mockData } from './mockData';

// ==================== 常量定义 ====================
const DIALOG_TITLE = {
  VIEW: '查看基地信息',
  EDIT: '编辑基地信息',
  ADD: '新增基地信息',
};
// 获取环境变量
const env = import.meta.env.VITE_MODE;
console.log('环境变量:', env);
// ==================== 状态管理 ====================
const loading = ref(false);
const visible = ref(false);
const isReadonly = ref(false);
const dialogTitle = ref('');
const activeFormTab = ref('basic');

// 表单数据
const searchForm = ref({});
const formData = ref({});
const initialFormData = { ...formData.value };

// 分页数据
const pageData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 表格数据
const tableData = ref([]);

// ==================== 表格配置 ====================
const columns = ref([
  { label: '基地编码', prop: 'code' },
  { label: '基地名称', prop: 'name' },
  { label: '所属行政区域', prop: 'regionName' },
  { label: '所属网格', prop: 'gridName' },
  { label: '具体位置', prop: 'location' },
  {
    label: '经纬度',
    prop: 'coordinate',
    // formatter: (row) => `${row.longitude}, ${row.latitude}`,
  },
  { label: '气候条件', prop: 'climate' },
  { label: '海拔（米）', prop: 'altitude' },
  {
    label: '面积（亩）',
    prop: 'area',
    formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩`,
  },
  { label: '使用状态', prop: 'statusName' },
  { label: '经营主体代码', prop: 'businessId' },
  { label: '经营主体类型', prop: 'businessTypeName' },
  { label: '经营主体名称', prop: 'businessName' },
  { label: '创建时间', prop: 'createTime' },
  {
    label: '操作',
    prop: 'action',
    slotName: 'action',
    fixed: 'right',
  },
]);

const actions = [
  {
    name: '查看',
    icon: 'view',
    event: ({ row }) => handleView(row),
  },
  {
    name: '编辑',
    icon: 'edit',
    event: ({ row }) => handleEdit(row),
  },
  {
    type: 'danger',
    name: '删除',
    icon: 'delete',
    event: ({ row }) => handleDelete(row.id),
  },
];

// ==================== 生命周期 ====================
onMounted(() => {
  getData();
});

// ==================== 计算属性 ====================
const showAddButton = computed(() => {
  return env === 'DEV';
});

// ==================== 数据获取 ====================
const getData = async () => {
  loading.value = true;
  try {
    const res = await fetchBaseList({
      ...searchForm.value,
      current: pageData.value.currentPage,
      size: pageData.value.pageSize,
    });

    tableData.value = res.data.records || [];
    pageData.value.total = res.data.total || 0;
  } finally {
    loading.value = false;
  }
};

// ==================== 表格操作 ====================
const handlePageChange = ({ page, pageSize }) => {
  pageData.value.currentPage = page;
  pageData.value.pageSize = pageSize;
  getData();
};

// ==================== 表单操作 ====================
const handleAdd = () => {
  resetForm();
  dialogTitle.value = DIALOG_TITLE.ADD;
  visible.value = true;
};

const handleView = async (row) => {
  isReadonly.value = true;
  dialogTitle.value = DIALOG_TITLE.VIEW;
  formData.value = { ...row };
  visible.value = true;
};

const handleEdit = (row) => {
  isReadonly.value = false;
  dialogTitle.value = DIALOG_TITLE.EDIT;
  formData.value = { ...row };
  visible.value = true;
};

const handleDelete = async (id) => {
  await ElMessageBox.confirm('确定删除该基地信息吗？', '提示', {
    type: 'warning',
  });
  await deleteBase(id);
  ElMessage.success('删除成功');
  getData();
};

const resetForm = () => {
  formData.value = { ...initialFormData };
};

const handleSearch = () => {
  pageData.value.currentPage = 1;
  getData();
};

const handleReset = () => {
  searchForm.value = {};
  resetForm();
  handleSearch();
};

const submitAll = () => {
  console.log('提交表单', formData.value);
  visible.value = false;
};
</script>

<style scoped lang="scss">
.custom-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
  .search-bar {
    flex-shrink: 0;
    margin-bottom: 20px;
  }

  .table-container {
    flex: 1;
    min-height: 0; /* 解决flex容器内滚动问题 */
    display: flex;
    flex-direction: column;
    :deep(.el-table) {
      flex: 1;
      overflow: auto;
    }
  }
  .tabs-wrapper {
    width: 100%;
    display: flex;
    align-items: center;

    .el-tabs__header {
      width: 100%;

      .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
      }

      .el-tabs__item {
        font-size: 16px;
        color: #555555;
        font-weight: 500;
      }
    }

    :deep(.el-tabs__content) {
      padding: 20px;
      border-radius: 4px;
      width: 80%;
      height: calc(100vh - 400px);
      overflow-y: auto;

      .el-tab-pane {
        margin: 0 auto;
        width: 100%;
      }
    }
  }

  .form-title {
    font-size: 16px;
    font-weight: 500;
    margin: 30px 0;
    color: #333333;
  }

  .dialog-footer {
    display: block;
    text-align: center;
  }
}
</style>
