<template>
  <view class="container">
    <tui-form ref="form" :show-message="false" :model="formData" style="border-bottom: 1px solid #f5f4f4">
      <tui-form-item arrow highlight prop="area" @click="pickerShow">
        <tui-input padding="0" :borderBottom="false" placeholder="请选择归属单位" disabled
                   backgroundColor="transparent" v-model="formData.area"></tui-input>
      </tui-form-item>
      <tui-form-item prop="name" :bottom-border="false">
        <tui-input padding="0" :borderBottom="false" placeholder="请输入道路" maxlength="20"
                   v-model="formData.name"></tui-input>
      </tui-form-item>
    </tui-form>

    <!--    <tui-row marginTop="10px" :gutter="5" class="full-height-row">-->
    <!--      <tui-col :span="8" class="left-con full-height-col" >-->
    <!--        <view class="full-height-col left-con">1</view>-->
    <!--      </tui-col>-->
    <!--      <tui-col :span="16" class="right-con full-height-col" >-->
    <!--        <view class="full-height-col">2</view>-->
    <!--      </tui-col>-->
    <!--    </tui-row>-->

    <view class="full-height-row">
      <view class="full-height-col left-con">
        <view v-for="(i,index) in 7" class="teamsItem" :key="index"
              @click="teamsChange(i)"
              :class="{teamsActive:index==currentIndex}"
        >
          <view class="fs-ellipsis fs-pt16 fs-pb16  fs-pl8 fs-pr8">归属班组归属班组归属班组</view>

        </view>
      </view>
      <view class="full-height-col right-con">
        <view class="nodata-wrap">
          <img src="/static/images/nodata.png" alt="">
          <view style="color: #aaa">暂无数据</view>

<!--          <tui-no-data imgUrl="/static/images/nodata.png">暂无数据</tui-no-data>-->
        </view>
        <view v-for="i in 6" class="card-wrap">

          <p class="fs-flex__between">
            <span>白菜湾四街</span>
            <span>154颗</span>
          </p>

          <p>已录入行道树：3颗</p>

          <p>起点。。。。。</p>
        </view>

      </view>
    </view>

    <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
    </tui-picker>

  </view>
</template>


<script>
export default {
  name: "treeFiles",
  data() {
    return {
      cardList:[],
      areaData: [{
        text: "中国",
        value: "1001"
      }, {
        text: "美国",
        value: "1002"
      }, {
        text: "俄罗斯",
        value: "1003"
      }],
      show: false,
      currentIndex: 0,
      formData: {
        //道路
        name: '',
        //归属单位
        area: '',
      },
      card: {
        title: {
          text: '白菜湾四街'
        },
        tag: {
          text: '153颗'
        },
        header: {
          bgcolor: '#F7F7F7',
          line: true
        }
      }
    }
  },
  methods: {
    teamsChange(i) {
      console.log(i)
      this.currentIndex = i
    },
    pickerShow() {
      this.show = true
    },
    pickerHide() {
      this.show = false
    },
    pickerChange(e) {
      console.log(e)
      this.formData.area = e.text
    },
  }
}
</script>


<style scoped lang="scss">
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* tui-row 设置100%高度 */
.full-height-row {
  /* 确保row使用flex布局 */
  display: flex;
  flex: 1
}

/* tui-col 设置100%高度 */
.full-height-col {
  height: 100%;
  background-color: #f0f0f0;
}


.left-con {
  width: 220rpx;
  height: 100%;
  background: #f3f3f3;
}

.right-con {
  flex: 1;
  height: 100%;
  background: #fff;
  padding-top: 20rpx;
}

.teamsItem {
}

.teamsActive {
  background: #fff;
}

.card-wrap {
  height: 200rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 20rpx;
  box-shadow: 0 1rpx 2rpx 5rpx rgb(0, 0, 0, .3);
  border-radius: 10rpx;
}

.nodata-wrap{
  margin: 20px auto;
  text-align: center;
  image{
    width: 160rpx ;
    height: 160rpx;
    margin-bottom: 20rpx;
  }
}

</style>

<style>
/* 单独写一个不带 scoped 的 style 来设置 page */
page {
  height: 100%;
  background: #fff;
}
</style>