<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" placeholder="请输入名称" maxlength="30" border="none" readonly/>
      </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" placeholder="请输入" maxlength="10" border="none" input-align="left" readonly/>
              <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" placeholder="请输入" maxlength="10" border="none" input-align="left" readonly/>
              <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" placeholder="请选择" readonly border="none"/>
      </up-form-item>

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

      <up-form-item label="管护单位" prop="managedutyunit" required>
        <up-input v-model="formData.managedutyunit" placeholder="请输入" maxlength="30" border="none" readonly/>
      </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" placeholder="请输入" maxlength="30" border="none" readonly/>
            </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" placeholder="请输入" maxlength="50" border="none" readonly/>
        </up-form-item>

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="预估树龄" prop="estimationtreeage">
                <up-input v-model="formData.estimationtreeage" placeholder="请输入" maxlength="10" border="none" input-align="left" readonly/>
                <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="weekday">
                <up-input v-model="formData.weekday" placeholder="请输入" maxlength="10" border="none" input-align="left" readonly/>
                <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" placeholder="请输入" maxlength="10" border="none" input-align="left" readonly/>
                <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" placeholder="请输入" maxlength="10" border="none" input-align="left" readonly/>
                <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();

// 表单数据
const formData = reactive({
  treetype: '',
  treeheight: '',
  dbh: '',
  treelevel: '',
  treeleveltext: '',
  managedutyunit: '',
  oldtreeownership: '',
  oldtreeownershipText: '',
  latinname: '',
  estimationtreeage: '',
  canopysouthnorth: '',
  canopyeastwest: '',
  weekday: '',
  growlocation: '',
  growthenvironment: '',
  treeImgList: [],
  address: '',
  latitude: '',
  longitude: '',
  road: '',
  maintainunit: ''
})

// ✅ ✅ ✅ 核心新增：图片格式转换函数 【解决图片不显示的关键】
// 兼容两种格式：1.纯字符串数组 2.对象数组 都能正常渲染
const formatImgList = (imgList) => {
  if (!imgList || imgList.length === 0) return [];
  // 判断是否是纯字符串数组，转成uview需要的 {url:xxx} 格式
  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);
      // 这里不需要额外赋值图片，formData赋值后会自动同步，formatImgList会做格式转换
    });
  }
})

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>