<template>

  <div class="div_community_info"
       @click="handleCloseAllUser()">
    <div class="div_select">

      <img src="../../../../assets/img/shuju/title-tip.png"
           alt />

      <div class="second-select">
        <el-select v-model="selBuildingId"
                   :popper-append-to-body="false"
                   placeholder="请选择"
                   @click="handleCloseAllUser()">
          <el-option v-for="(item,index) in buildingArray"
                     :key="item.buildingId"
                     :label="item.buildingName"
                     :value="item.buildingId"
                     @click.native="handleClickBuilding(index)">
          </el-option>
        </el-select>
      </div>

    </div>

    <div class="div_room_bar">
      <el-scrollbar v-if="roomArray.length>0"
                    style="height:100%">
        <div class="info_loading"
             v-if="roomLoaded">
          <screen-loading>加载中</screen-loading>
        </div>
        <div v-if="!roomLoaded"
             class="div_room">

          <div v-for="(item,index) in roomArray"
               :key="index"
               :class="['item',{'item_sel':selHouseIndex==index}]"
               @click="handleClickRoom(index)">
            <div class="housename">{{item.houseName}}</div>

            <div class="icon_party">
              <img :src="item.partyUrl"
                   alt />
            </div>

            <div class="icon_roomstate">
              <div>出租</div>
            </div>

            <div class="icon_category">

              <div class="div_icon_item"
                   v-for="(iconItem,iconIndex) in item.iconArrayShow"
                   :key="iconIndex">
                <el-popover trigger="hover"
                            popper-class="icon_popover"
                            placement="bottom">
                  <div class="icon_name">{{iconItem.name}} </div>
                  <div slot="reference">
                    <img class="icon_img"
                         :src="iconItem.iconUrl"
                         alt />
                  </div>

                </el-popover>
              </div>
              <!-- <img v-for="(iconItem,iconIndex) in item.iconArrayShow"
                   :key="iconIndex"
                   :src="iconItem.iconUrl"
                   alt /> -->
            </div>

            <el-popover v-model="item.showAllUser"
                        placement="bottom"
                        width="50"
                        popper-class="my_popover"
                        trigger="manual">
              <div class="user_list">
                <div v-for="(userItem,userIndex) in userArray"
                     :key="userIndex"
                     class="user_item"
                     @click.stop="handleClickUser(userItem.userId)">
                  <div class="user_item_content">
                    <div class="name">{{userItem.name}}</div>

                    <img src="../../../../assets/img/jinru.png"
                         alt />

                  </div>
                  <div :class="['item_line',{'last_line':userIndex==(userArray.length-1)}]"></div>
                </div>

              </div>
              <div slot="reference"
                   class="div_user"
                   @click.stop="handleShowAllUser(index)">

                <span>全部成员</span>
                <img src="../../../../assets/img/xiala.png"
                     alt />
              </div>

            </el-popover>
          </div>

        </div>
      </el-scrollbar>

      <div v-else
           class="no-data">
        <img src="@/assets/img/modules/visual/noData.png"
             class="no-data-img" />
      </div>
    </div>

    <room-info v-show="showHouseInfo"
               v-if="selHouseId"
               :selHouseId="selHouseId"
               @close="showHouseInfo = false" />
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import ScreenLoading from "@/views/modules/visual/cpts/loading";
import nextTick from "dai-js/tools/nextTick";
import roomInfo from "@/views/modules/visual/basicinfo/cpts/roomInfo";

let loading;//加载动画

export default {

  data () {
    return {
      //父组件传过来的小区id
      neighborHoodId: '',
      neighborHoodName: '',
      buildingArray: [],//楼栋下拉框数据
      selBuildingId: '',
      selBuildingName: '',

      roomLoaded: false,
      roomArray: [],
      selHouseId: '',
      selHouseName: '',
      selHouseIndex: 0,
      showHouseInfo: false,

      userArray: [],
      selUserName: '',
      selUserId: '',

      orgData: {},//当前组织对象
      orgId: '',
      orgLevel: '',

      //下钻层级记录
      runNum: 0,
      runAgencyArray: [],




    }
  },
  async mounted () {


  },

  methods: {
    //小区id，小区名称
    async initData (neighborHoodId, neighborHoodName) {

      this.neighborHoodId = neighborHoodId
      this.neighborHoodName = neighborHoodName
      //加载楼栋数据
      await this.loadBuilding()

      if (this.selBuildingId) {
        await this.loadRoom()

      } else {
        this.roomArray = []
      }

    },

    //切换楼栋
    async handleClickBuilding (index) {

      this.selBuildingId = this.buildingArray[index].buildingId
      this.selBuildingName = this.buildingArray[index].buildingName

      await this.loadRoom()


      this.$emit('refreshInfoList', this.selBuildingId, 'building')
    },
    //选择房间
    handleClickRoom (index) {
      this.selHouseIndex = index
      this.selHouseId = this.roomArray[index].houseId
      this.selHouseName = this.roomArray[index].houseName

      this.showHouseInfo = true

      // this.$emit('refreshInfoList', this.selHouseId, 'room')-
    },
    //点击全部成员
    async handleShowAllUser (selIndex) {

      this.userArray = []
      this.roomArray.forEach((element, index) => {

        let obj = JSON.parse(JSON.stringify(element))

        obj.showAllUser = false
        this.$set(this.roomArray, index, obj)
        // element.showAllUser = false

      });

      await nextTick(50);

      if ((selIndex === 0 || selIndex) && !this.roomArray[selIndex].showAllUser) {

        await this.loadUser(this.roomArray[selIndex].houseId, selIndex)

      }


    },
    //关闭成员显示
    async handleCloseAllUser () {

      this.userArray = []
      this.roomArray.forEach((element, index) => {

        let obj = JSON.parse(JSON.stringify(element))

        obj.showAllUser = false
        this.$set(this.roomArray, index, obj)

      });

    },

    //点击用户
    handleClickUser (userId) {
      this.handleCloseAllUser()
      this.$emit('toSubAgency', 'people', userId, "")
    },
    //获取右侧infolist数据
    async loadList () {

    },

    onEnterTd () {
      console.log('进入')
    },
    onLeaveTd () {
      console.log('出来')
    },

    //加载楼栋数据
    async loadBuilding () {
      const url = "/gov/org/agency/baseinfofamilybuilding"
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding"
      let params = {
        neighborHoodId: this.neighborHoodId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        this.buildingArray = data
        this.buildingArray.forEach(item => {
          if (!this.buildingArray[0].buildingName) {
            item.buildingName = '楼'
          }

        });
        if (this.buildingArray.length > 0) {
          this.selBuildingId = this.buildingArray[0].buildingId
          this.selBuildingName = this.buildingArray[0].buildingName


        } else {
          this.selBuildingId = ''
          this.selBuildingName = ''
        }

      } else {
        this.$message.error(msg)
      }

    },

    //加载房间数据
    async loadRoom () {
      this.roomLoaded = true
      const url = "/gov/org/ichouse/houselist"
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist"
      let params = {
        buildingId: this.selBuildingId
      }

      const { data, code, msg } = await requestPost(url, params)
      this.roomLoaded = false
      if (code === 0) {

        if (data.length > 0) {

          data.forEach((roomItem, index) => {
            roomItem.showAllUser = false

            let categoryList = JSON.parse(JSON.stringify(roomItem.categoryList))

            roomItem.iconArrayShow = []

            if (categoryList.length > 0) {
              if (categoryList[0].isSpecial === '1') {//第一个图标是党员
                roomItem.isParty = true
                roomItem.partyUrl = categoryList[0].iconUrl
                categoryList.shift();//删除第一个数据
              } else {
                roomItem.isParty = false
              }

              let iconNum = categoryList.length > 4 ? 4 : categoryList.length

              for (let i = 0; i < iconNum; i++) {
                roomItem.iconArrayShow.push(categoryList[i])
              }
            }


          });

          this.$nextTick(() => {
            this.roomArray = [...data]
          });

        } else {
          this.roomArray = []
        }


      } else {
        this.$message.error(msg)
      }

    },

    //加载成员数据
    async loadUser (houseId, selIndex) {
      const url = "/epmetuser/icresiuser/getpeoplebyroom"
      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom"
      let params = {
        homeId: houseId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.userArray = data
        if (this.userArray.length === 0) {
          this.$message.warning('该房间下没有住户')
        } else {
          let objItem = JSON.parse(JSON.stringify(this.roomArray[selIndex]))

          objItem.showAllUser = true
          this.$set(this.roomArray, selIndex, objItem)
        }

      } else {
        this.$message.error(msg)
      }

    },


    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: '正在加载……', //加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' //背景颜色
      });

    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {

  },
  computed: {
    // selectWidth () {
    //   let width = this.selHouseName.length * 200
    //   console.log(width)
    //   return width + 'px';
    // },

    mapHeight () {

      return this.clientHeight - 120;

    },
    // zoom: {
    //   get () {
    //     //根据不同屏幕分辨率，控制zoom大小
    //     if (this.clientHeight < 900) {
    //       return 2.3
    //     } else {
    //       return 2.8
    //     }
    //   },
    //   set (value) {
    //   }
    // },
    ...mapGetters(["clientHeight"])

  },
  components: { ScreenLoading, roomInfo },
}

</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style lang=scss scoped>
.info_loading {
  margin-top: 50px;
}

.second-title {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .second-title-label {
    position: relative;
    padding-left: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }
  .second-title-label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    margin-top: -6px;
    background: #2865fa;
    border-radius: 50%;
  }
}
.second-select {
  margin: 0 10px 10px;
  ::v-deep .el-input {
    width: 380px;
    height: 36px;
    .el-input__inner {
      height: 100%;
      padding: 0 10px;
      color: #fff;
      line-height: 36px;
      background: #06186d;
      border: 1px solid #1a64cc;
      width: 380px;
    }

    .el-icon-arrow-up:before {
      content: "\e78f";
    }
    // .el-select__caret:before {
    //   content: '\E790'
    // }
  }
  ::v-deep .el-date-editor {
    width: 360px;
    position: relative;
    background: #06186d;
    border: 1px solid #1a64cc;
    .el-range-input {
      color: #fff;
      background: #06186d;
    }
    .el-range-separator {
      color: #fff;
    }
    .el-range__icon {
      position: absolute;
      right: 5px;
      // float: right;
    }
    .el-input__prefix {
      left: unset;
      right: 5px;
    }
  }
}
.second-select:last-child {
  margin-left: 0;
  margin-bottom: 10px;
}
</style> 


<style
  lang="scss"
  src="@/assets/scss/modules/visual/typeAnalyze.scss"
  scoped
></style>
<style lang="scss" scoped>
.div_room_bar {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }

  .no-data {
    padding-top: 120px;
    display: flex;
    justify-content: center;
  }
}
</style>
<style lang="scss" >
.el-popover.my_popover {
  padding: 0px;
  margin-top: 14px;
  border: 0;
}
.el-popover.icon_popover {
  font-size: 14px;
  min-width: 50px !important;
  margin-top: 5px !important;
  padding: 3px !important;
  background-color: rgb(247, 250, 253);
}
</style>
