<template>
  <div class="enterprise-list">
    <div class="title-gr">
      <div class="icon-circle"> </div>
      <div class="build-name">{{ parkName }} {{ buildingName }}</div>
    </div>
    <div class="serch-input">
      <div class="input-box">
        <input type="text" v-model="querParams.enterpriseName" placeholder="请输入搜索关键词" />
        <div class="input-close" v-show="querParams.enterpriseName">
          <van-icon name="clear" @click="querParams.enterpriseName = undefined" />
        </div>
      </div>
      <div class="serch-btn" @click="onSearch"></div>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="list-box">
        <div class="list-item" v-for="item in enterpriseList" :key="item.id" @click="onInfoClcik(item)">
          <div class="item-name">{{ item.enterpriseName }}</div>
          <div class="item-icon"><van-icon name="arrow" color="#CCCCCC" /></div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import xApi from '@/api/xApi'
import { listEnterpriseBuildPark } from '@/api/mudu/park.js'

export default {
  props: {
    parkProfileId: {
      type: String,
    },
  },
  data() {
    return {
      total: 0,
      querParams: {
        buildingId: null,
        parkId: null,
        pageNum: 1,
        pageSize: 10,
        enterpriseName: null
      },
      enterpriseList: [],
      loading: false,
      finished: false,
      parkName:null,
      buildingName:null,
    }
  },
  created() {

  },
  methods: {
    onLoad() {
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    getList() {
      this.querParams.buildingId = this.$route.query.buildingId
      this.querParams.parkId = this.$route.query.parkId
      this.$store.commit('SET_PERK_ID', this.$route.query.parkId)
      this.$store.commit('SET_BUILDING_ID', this.$route.query.buildingId)

      listEnterpriseBuildPark(this.querParams).then((res) => {
        this.enterpriseList = this.enterpriseList.concat(res.rows)
        this.parkName = this.enterpriseList[0].parkName
        this.buildingName = this.enterpriseList[0].buildingName
        this.total = res.total
        this.loading = false
        if (this.enterpriseList.length >= this.total) {
          this.finished = true
        } else {
          this.querParams.pageNum++
        }
      })
    },
    onSearch() {
      this.loading = false
      this.finished = false
      this.querParams.pageNum = 1
      this.querParams.pageSize = 10
      this.total = 0
      this.enterpriseList = []
      // this.getList()
    },
    onInfoClcik(item) {
      this.$router.replace({
        path: '/enterpriseData2/info',
        query: {
          id: item.enterpriseId,
          isShow: true,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title-gr {
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;

  .icon-circle {
    width: 0.35rem;
    height: 0.35rem;
    background-image: url("../../../../assets/image/vxEwm/big-circle2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 0.1rem;
  }

  .build-name {
    font-weight: 800;
    font-size: 0.29rem;
    color: #333333;
  }
}

div {
  box-sizing: border-box;
}

.enterprise-list {
  height: 100%;
  overflow: hidden;
}


.serch-input {
  height: 0.8rem;
  border-radius: 28px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #0000001a;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;

  .input-box {
    flex: 1;
    display: flex;
    align-items: center;

    input {
      border: 0;
      width: 90%;
      height: 0.5rem;

      line-height: 0.5rem;
      font-size: 0.22rem;
      font-weight: 500;
    }

    input::placeholder {
      font-size: 0.22rem;
      color: #cccccc;
      font-weight: 500;
    }
  }
}

.serch-btn {
  height: 0.3rem;
  width: 0.3rem;
  background: url('~@/assets/image/vxEwm/search-btn.png');
  background-size: 100% 100%;
}

/deep/ .van-list {
  height: calc(100% - 1.4rem);
  overflow-y: auto;
  border-radius: 16px;
}

.list-box {
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #0000001a;
  padding: 0 0.35rem;

  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid RGBA(218, 218, 218, 0.6);

    .item-name {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      white-space: nowrap;
      /* 让文本只显示在一行 */
      overflow: hidden;
      /* 隐藏溢出部分 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }
  }

  &>div:first-child {
    border-radius: 16px 16px 0 0;
  }

  &>div:last-child {
    border-radius: 0 0 16px 16px;
    border: 0;
  }
}

/deep/.van-cell__value {
  font-weight: 550;
  font-size: 0.24rem;
  color: #333333;
}
</style>
