<template>
  <view class="container">

    <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data>
    <view class="record-wrap" v-else>
      <view class="record-list-wrap" v-for="i in rows" @click="toEditPage(i.id)">
        <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view>
        <view class="record-list-right">
          <view class="record-list-right-title">
            <view>{{i.treetype}}</view>
            <view>{{i.updatetime.substring(0,10)}}</view>
          </view>
          <view class="fs-mt8">
            高度：{{i.treeheight}}
          </view>
          <view class="fs-mt8">
            胸径：{{i.dbh}}
          </view>
          <view class="fs-mt8">
            树木编号：{{i.treenumber}}
          </view>
        </view>
      </view>
    </view>


    <tui-button class="addTree" @click="toAddTreePage">新增树木录入</tui-button>
  </view>

</template>

<script>
import { treeRoadReq } from "@/api/tree";
export default {
  name: "treeRecord",
  data(){
    return{
      rows:[],
      roadId:''
    }
  },
  onLoad(options){
    this.roadId = options.roadId
    this.treeRoadQuery()
  },
  methods:{
    toEditPage(id){  // 前往修改页面
      uni.$tui.href(`/subPackages/treePage/editTree?id=${id}`)
    },
    toAddTreePage(){
      uni.$tui.href(`/subPackages/treePage/addTree?roadId=${this.roadId}`)
    },
    // 记录列表
    treeRoadQuery(){
      treeRoadReq({data:{road: this.roadId}}).then(res=>{
        console.log(res)
        this.rows = res.rows
      })
    },
  }
}
</script>

<style scoped>
.record-wrap{
  padding-bottom: 120rpx;
}
.record-list-wrap{
  height: 130px;
  margin: 20rpx 20rpx 0 20rpx;
  padding: 20rpx;
  box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3);
  border-radius: 10rpx;
  display: flex;
}
.record-list-left{
  height: 100px;
  width: 100px;
  background-size: 100% 100%;
}
.record-list-right{
  height: 140px;
  margin-left: 20px;
  flex:1
}
.record-list-right-title{
  display: flex;
  justify-content: space-between;
}
.addTree{
  width: 100%;
  position: fixed;
  bottom: 0;
}

</style>