<template>
  <view class="page-container">
    <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
      <up-form-item label="名称" prop="treetype" required>
        <up-input v-model="formData.treetype" border="none" readonly placeholder=""/>
      </up-form-item>

      <!-- 新增：树种类型 treeSpeciesType -->
      <up-form-item label="树种类型">
        <text class="show-text">{{ uni.$dict.getDictLabel('tree_species_type',formData.treeSpeciesType) || '' }}</text>

         <!-- <text class="show-text">{{ formData.treeSpeciesType || '' }}</text> -->
      </up-form-item>

      <view class="form-row-wrap">
        <up-row gutter="10">
          <up-col span="6">
            <up-form-item label="胸径" prop="dbh" required>
              <up-input v-model="formData.dbh" maxlength="10" border="none" input-align="left" readonly placeholder=""/>
              <template #right>
                <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>
              </template>
            </up-form-item>
          </up-col>
          <up-col span="6">
            <up-form-item label="高度" prop="treeheight">
              <up-input v-model="formData.treeheight" maxlength="10" border="none" input-align="left" readonly placeholder=""/>
              <template #right>
                <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
              </template>
            </up-form-item>
          </up-col>
        </up-row>
      </view>

      <up-form-item label="位置" prop="growlocation" required class="location-form-item">
        <up-input v-model="formData.growlocation" readonly border="none" placeholder=""/>
      </up-form-item>

      <up-row gutter="10">
        <up-col span="6">
          <up-form-item label="经度" :borderBottom="false">
            <up-input v-model="formData.longitude" readonly border="none" placeholder=""/>
          </up-form-item>
        </up-col>
        <up-col span="6">
          <up-form-item label="纬度" :borderBottom="false">
            <up-input v-model="formData.latitude" readonly border="none" placeholder=""/>
          </up-form-item>
        </up-col>
      </up-row>

      <up-form-item label="管护单位" prop="managedutyunit" required>
        <up-input v-model="formData.managedutyunit" maxlength="30" border="none" readonly placeholder=""/>
      </up-form-item>

      <up-form-item label="权属分类" prop="oldtreeownershipText" required>
        <text class="show-text">{{ uni.$dict.getDictLabel('tree_ownership',formData.oldtreeownership) || '' }}</text>
      </up-form-item>

      <up-form-item label="图片信息" prop="treeImgList" required>
        <up-upload
            :file-list="formatImgList(formData.treeImgList)"
            multiple
            :width="70"
            :height="70"
            :maxCount="formatImgList(formData.treeImgList).length"
            disabled
            :deletable="false"
            :preview-full-image="true"
        ></up-upload>
      </up-form-item>

      <view class="animated-area">
        <up-row gutter="10">
          <up-col span="6">
            <up-form-item label="拉丁文" prop="latinname">
              <up-input v-model="formData.latinname" maxlength="30" border="none" readonly placeholder=""/>
            </up-form-item>
          </up-col>
          <up-col span="6">
            <up-form-item label="级别">
              <text class="show-text">{{ uni.$dict.getDictLabel('tree_level',formData.treelevel) || '' }}</text>
            </up-form-item>
          </up-col>
        </up-row>

        <up-form-item label="生长环境" prop="growthenvironment">
          <up-input v-model="formData.growthenvironment" maxlength="50" border="none" readonly placeholder=""/>
        </up-form-item>

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <!-- 预估树龄 → 栽种年月，绑定plantingDate -->
              <up-form-item label="栽种年月">
                <up-input v-model="formData.plantingDate" maxlength="10" border="none" input-align="left" readonly placeholder=""/>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="干周" prop="weekday">
                <up-input v-model="formData.weekday" maxlength="10" border="none" input-align="left" readonly placeholder=""/>
                <template #right>
                  <text style="padding-left:12rpx;color:#ccc;font-size:14px">厘米</text>
                </template>
              </up-form-item>
            </up-col>
          </up-row>
        </view>

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="东西冠幅" prop="canopyeastwest">
                <up-input v-model="formData.canopyeastwest" maxlength="10" border="none" input-align="left" readonly placeholder=""/>
                <template #right>
                  <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                </template>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="南北冠幅" prop="canopysouthnorth">
                <up-input v-model="formData.canopysouthnorth" maxlength="10" border="none" input-align="left" readonly placeholder=""/>
                <template #right>
                  <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                </template>
              </up-form-item>
            </up-col>
          </up-row>
        </view>
      </view>

    </up-form>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { treeDetailReq } from "@/api/tree-archive/tree-archive.js";
import { useUserStore } from '@/pinia/user';

// ========== 状态管理 ==========
const formRef = ref(null)
const userStore = useUserStore();

// 表单数据【新增 plantingDate、treeSpeciesType】
const formData = reactive({
  treetype: '',
  treeSpeciesType: '', // 新增：树种类型
  treeheight: '',
  dbh: '',
  treelevel: '',
  treeleveltext: '',
  managedutyunit: '',
  oldtreeownership: '',
  oldtreeownershipText: '',
  latinname: '',
  estimationtreeage: '', // 字段保留不再使用
  plantingDate: '', // 新增：栽种年月
  canopysouthnorth: '',
  canopyeastwest: '',
  weekday: '',
  growlocation: '',
  growthenvironment: '',
  treeImgList: [],
  address: '',
  latitude: '',
  longitude: '',
  road: '',
  maintainunit: ''
})

// 图片格式转换函数
const formatImgList = (imgList) => {
  if (!imgList || imgList.length === 0) return [];
  return imgList.map(item => {
    if (typeof item === 'string') {
      return { url: item };
    } else {
      return item;
    }
  });
}

// ========== 生命周期 ==========
onUnload(() => {
  uni.reLaunch({
    url: '/pages-sub/data/tree-archive/index'
  })
})

onLoad((options) => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (currentPage.getOpenerEventChannel) {
    const eventChannel = currentPage.getOpenerEventChannel();
    eventChannel.on('logData', (data) => {
      console.log('接收上一页完整数据：', data);
      Object.assign(formData, data);
    });
  }
})

onShow(async () => {})
onReady(() => {});
</script>

<style scoped lang="scss">
.page-container {
  padding: 25rpx;
  box-sizing: border-box;
  background: #fff;
}

.location-form-item {
  padding-right: 10rpx;
}

:deep(.u-input__inner) {
  color: #333;
  background-color: transparent !important;
}

.show-text {
  font-size: 28rpx;
  color: #333;
  line-height: 80rpx;
  width: 100%;
  display: block;
  text-align: left;
}

.form-row-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  :deep(.u-form-item) {
    position: relative;
    margin-bottom: 0 !important;
  }
}
.form-row-wrap + .u-form-item {
  margin-top: 25rpx !important;
}
.animated-area {
  margin-top: 10rpx;
}
</style>