<template>
  <view class="container">

    <!--    <tui-no-data imgUrl="/static/images/nodata.png" v-if="rows.length==0">暂无数据</tui-no-data>-->
    <view class="record-wrap">
      <view class="record-list-wrap cad-box-shadow fs-bg__white" v-for="i in rows" @click="todetailPage(i)">
        <view style="display: flex">
          <view class="record-list-left" :style="`background-image: url(${i.treephotoone});`"></view>
          <view class="record-list-right">
            <view class="record-list-right-title">
              <view class="fs-ellipsis treetypeName">{{ i.treetype }}</view>
              <view style="text-align: right">{{ i.updatetime.substring(0, 10) }}</view>
            </view>
            <view class="fs-mt8 fs-align__center">
              <img src="/static/images/tree/tree-high.png" style="width: 14px;height: 14px;margin-right: 6px;"
                   alt=""> 高度：{{ i.treeheight }} 米
            </view>
            <view class="fs-mt8 fs-align__center">
              <img src="/static/images/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;"
                   alt="">胸径：{{ i.dbh }} 厘米
            </view>
          </view>
        </view>
        <view class="fs-mt8 fs-ellipsis treenumber-no">
          树木编号：{{ i.treenumber }}
        </view>
      </view>
    </view>

  </view>

</template>

<script>
import { useCounterStore } from '@/stores/counter'
import { treeLogReq } from "@/subPackages/common/api/tree.js";
export default {
  name: "treeLog",
  props: {
    logId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      rows: [],
      roadId: ''
    }
  },
  watch: {
    logId: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.initLogQuery(newVal)
        }
      }
    }
  },
  methods: {
    initLogQuery(val) {
      let obj = {
        treeid: val,
        pageNum: 1,
        pageSize: 10000
      }
      treeLogReq({data: {...obj}}).then(res => {
        console.log(res)
        this.rows = res.rows
      })
    },
    todetailPage(i) {
      const shareStore = useCounterStore()
      shareStore.setTreeInfo(i)
      uni.navigateTo({
        url: `/subPackages/treePage/treeInfo`,
      })
    }
  }
}
</script>


<style scoped>
.record-list-wrap {
  margin: 15px 10px 0 ;
  padding:10px;
  border-radius: 6px;
  font-size: 14px;
}
.treetypeName{
  flex:1;
  font-size: 16px;
  font-weight: bold;
}
.record-list-left {
  height: 70px;
  width: 70px;
  background-size: 100% 100%;
}

.record-list-right {
  margin-left: 20px;
  flex: 1;
  overflow: hidden;

}

.record-list-right-title {
  display: flex;
  justify-content: space-between;
}

.treenumber-no {
  padding: 3px 10px;
  background: #bdefd0;
  font-size: 12px;
}

</style>