<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
          {{resInfo.typeName || ''}}
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="区域位置">
        <el-select v-model="form.region" filterable placeholder="请选择区域位置" size="mini" @change="selectRegion">
          <el-option :label="item.buildName + '-' + item.floorName" :value="item.floorUuid" v-for="item in selectList" :key="item.floorUuid"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row class="threeBox" :gutter="10">
      <el-col v-for="item in equipmentList" :key="item.id">
        <img src="../../../assets/image/test1.png" alt="">
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
export default {
  props:['resInfo'],
  data() {
    return {
      form:{
        region:'',
      },
      resList:[],
      selectList:[],
      equipmentList:[],
    };
  },
  watch: {
    resInfo(){
      this.getData()
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    async getData(){
       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
        applicationCode: this.resInfo.applicationCode,
        pageSize:10000
      }))
      // if(res.success){
        this.resList = res.pageList
        this.selectList =  res.pageList.reduce((pre,cur)=>{
            return !pre.some(val=>val.floorUuid === cur.floorUuid) ? pre.concat(cur) : pre
        },[])
        this.form.region = this.selectList[0].floorUuid
        this.selectRegion()
      // }
    },
    selectRegion(){
      this.equipmentList = this.resList.filter(val=> val.floorUuid === this.form.region)
    }
  },
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view2.png") no-repeat;
  background-size: 100% 100%;
  .threeBox {
    flex: 1;
    width: 100%;
    overflow: hidden auto;
    display: flex;
    flex-wrap: wrap;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
        display: none;
        // opacity: 0;
        /* Chrome Safari */
    }
    .el-col{
      height: auto;
      width: 33.33%;
      padding: 0 10px 10px;
      img{
        width: 100%;
        display: block;
        margin: 0 auto;
      }
    }
  }
  .el-form{
    height: 40px;
    width: 100%;
    .el-select{
      width: 100%;
    }
  }
}
</style>