<template>
  <div>
    <el-row :gutter="20" class="elrow">
      <el-col :span="24">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="3">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../assets/img/mszssbgl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>已绑定门锁</div>
                    <div class="grid-num">4450</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content grid-con-1">
                <div class="colposition">
                  <img src="../assets/img/yfpry.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>已分配人员</div>
                    <div class="grid-num">5</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../assets/img/yqsl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>园区数量</div>
                    <div class="grid-num">8</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../assets/img/ldsl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>楼栋数量</div>
                    <div class="grid-num">56</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="3" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../assets/img/dysl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>单元数量</div>
                    <div class="grid-num">62</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../assets/img/lcsl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>楼层数量</div>
                    <div class="grid-num">426</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="3" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../assets/img/fjslpng.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>房间数量</div>
                    <div class="grid-num">5277</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="elrow">
      <el-col :span="24">
        <el-card shadow="hover" class="searchlist">
          <el-row :gutter="20" class="searchlist1">
            <el-col :span="6">
              园区名称：
              <el-select
                v-model="value"
                placeholder="请选择"
                filterable
                @change="query"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              楼号：
              <el-select
                v-model="value1"
                placeholder="请选择"
                filterable
                @change="query1"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              单元：
              <el-select
                v-model="value2"
                placeholder="请选择"
                filterable
                @change="query2"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              楼层：
              <el-select
                v-model="value3"
                placeholder="请选择"
                filterable
                @change="query3"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              房间名称：
              <el-input
                placeholder="请输入房间名称"
                v-model="input5"
                class="inputBox"
              >
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="getlist">查 询</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div class="userlist" v-if="activeiconfont">
      <div class="switchiconfont">
        <i
          class="iconfont httpicon-liebiao1"
          :class="activeiconfont ? 'active' : ''"
          @click="activeiconfun(true)"
        ></i>
        <i
          class="iconfont httpicon-liebiao"
          :class="activeiconfont ? '' : 'active'"
          @click="activeiconfun(false)"
        ></i>
      </div>
      <div class="adddbtn">
        <el-button type="primary" @click="handleSearch1" size="mini"
          >添加</el-button
        >
      </div>
      <div class="userli add">
        <div class="adddiv">
          <img src="../assets/img/add.png" alt="" />
        </div>
      </div>
      <div class="userli" v-for="(item, index) in userlist" :key="index">
        <houseing :userInfo="item"></houseing>
      </div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
      <div class="userli ko"></div>
    </div>
    <div class="tablelist" v-if="!activeiconfont">
      <div class="switchiconfont">
        <i
          class="iconfont httpicon-liebiao1"
          :class="activeiconfont ? 'active' : ''"
          @click="activeiconfun(true)"
        ></i>
        <i
          class="iconfont httpicon-liebiao"
          :class="activeiconfont ? '' : 'active'"
          @click="activeiconfun(false)"
        ></i>
      </div>
      <div class="adddbtn">
        <el-button type="primary" @click="handleSearch1" size="mini"
          >添加</el-button
        >
        <el-button type="primary" @click="selectmoredel" size="mini"
          >批量删除</el-button
        >
        <el-button type="primary" @click="dbing" size="mini"
          >管理绑定</el-button
        >
        <el-button type="primary" @click="exportfun" size="mini"
          >导出房源</el-button
        >
      </div>
      <el-row :gutter="20">
        <el-card shadow="hover" class="m20">
          <el-col :span="6">
            <div class="ZTREE" style="min-width: 200px;overflow-y: auto; height: 598px;">
              <el-card shadow="always" style="cardbg">
                <zTree :setting="setting" :nodes="zNodes" @onClick="onClick" />
              </el-card>
            </div>
          </el-col>
          <el-col :span="18">
            <el-table
              :data="userlist"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange"
              height="600"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="id"
                label="ID"
                align="center"
              ></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
              <el-table-column prop="count" label="入住"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
              <el-table-column label="户型" align="center">
                <template #default="scope">
                  <div v-if="scope.row.layout == 0">单间</div>
                  <div v-if="scope.row.layout == 1">一室一厅</div>
                  <div v-if="scope.row.layout == 2">两室一厅</div>
                  <div v-if="scope.row.layout == 3">三室一厅</div>
                  <div v-if="scope.row.layout == 4">无</div>
                </template>
              </el-table-column>
              <el-table-column prop="acreage" label="面积/m²"></el-table-column>
              <el-table-column label="操作" width="250" align="center">
                <template #default="scope">
                  <el-button
                    type="text"
                    icon="el-icon-folder-add"
                    @click="handleEdit1(scope.$index, scope.row)"
                    >添加下级</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <div class="paging">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[20]"
                :page-size="20"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-card>
      </el-row>
      <!-- <div class="nulldiv" v-if="userlist.length == 0">
        <img src="../assets/img/no-rooms.dfc2fbf1.png" alt="" class="nullimg" />
        <div>暂无房源</div>
      </div> -->
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="添加" :visible.sync="editVisible" width="30%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单个创建" name="first">
          <el-form ref="form" :model="form" label-width="70px">
            <!-- <el-form-item :label="'房源'+(index+1)+'级'" v-for="(item,index) in housingResources" :key="index">
          <el-input v-model="housingResources[index]" class="houseinput"><el-button slot="append" icon="el-icon-remove-outline" @click="delHierarchy" v-if="index == housingResources.length-1" title="删除层级"></el-button><el-button slot="append" icon="el-icon-circle-plus-outline" @click="addHierarchy" v-if="index == housingResources.length-1" title="增加层级"></el-button></el-input>
        </el-form-item> -->
            <el-form-item label="名称">
              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="form.address"
                placeholder="请输入地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="户型">
              <el-select v-model="form.layout" placeholder="请选择">
                <el-option
                  v-for="item in layoutlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面积">
              <el-input
                v-model="form.acreage"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="editVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit">添加</el-button>
            </span>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="模板创建" name="second">
          <el-form ref="form" :model="form" label-width="70px">
            <!-- <el-form-item :label="'房源'+(index+1)+'级'" v-for="(item,index) in housingResources" :key="index">
          <el-input v-model="housingResources[index]" class="houseinput"><el-button slot="append" icon="el-icon-remove-outline" @click="delHierarchy" v-if="index == housingResources.length-1" title="删除层级"></el-button><el-button slot="append" icon="el-icon-circle-plus-outline" @click="addHierarchy" v-if="index == housingResources.length-1" title="增加层级"></el-button></el-input>
        </el-form-item> -->
            <el-form-item label="层级名称">
              <el-input
                v-model="form.name"
                placeholder="例如：园区、办公楼、 楼栋单元、楼层、房间，多个以‘、’隔开"
              ></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="form.address"
                placeholder="请输入地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="层级数量">
              <el-input
                v-model="form.counts"
                placeholder="请输入对应层级数量，多个以‘、’隔开"
              ></el-input>
            </el-form-item>
            <el-form-item label="户型">
              <el-select v-model="form.layout" placeholder="请选择">
                <el-option
                  v-for="item in layoutlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面积">
              <el-input
                v-model="form.acreage"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="editVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit1">添加</el-button>
            </span>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog title="添加" :visible.sync="editVisible1" width="30%">
      <el-tabs v-model="activeName1" @tab-click="handleClick1">
        <el-tab-pane label="单个添加" name="first">
          <el-form ref="form" :model="form" label-width="70px">
            <!-- <el-form-item :label="'房源'+(index+1)+'级'" v-for="(item,index) in housingResources" :key="index">
          <el-input v-model="housingResources[index]" class="houseinput"><el-button slot="append" icon="el-icon-remove-outline" @click="delHierarchy" v-if="index == housingResources.length-1" title="删除层级"></el-button><el-button slot="append" icon="el-icon-circle-plus-outline" @click="addHierarchy" v-if="index == housingResources.length-1" title="增加层级"></el-button></el-input>
        </el-form-item> -->
            <el-form-item label="房间名称">
              <el-input
                v-model="form.name"
                placeholder="请输房间名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="户型">
              <el-select v-model="form.layout" placeholder="请选择">
                <el-option
                  v-for="item in layoutlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面积">
              <el-input
                v-model="form.acreage"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="editVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit2">添加</el-button>
            </span>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="模板添加" name="second">
          <el-form ref="form" :model="form" label-width="70px">
            <!-- <el-form-item :label="'房源'+(index+1)+'级'" v-for="(item,index) in housingResources" :key="index">
          <el-input v-model="housingResources[index]" class="houseinput"><el-button slot="append" icon="el-icon-remove-outline" @click="delHierarchy" v-if="index == housingResources.length-1" title="删除层级"></el-button><el-button slot="append" icon="el-icon-circle-plus-outline" @click="addHierarchy" v-if="index == housingResources.length-1" title="增加层级"></el-button></el-input>
        </el-form-item> -->
            <el-form-item label="楼层">
              <el-input v-model="form.name" placeholder="请输入楼层"></el-input>
            </el-form-item>
            <el-form-item label="房间数量">
              <el-input
                v-model="form.count"
                placeholder="请输入对应楼层的房间数"
              ></el-input>
            </el-form-item>
            <el-form-item label="户型">
              <el-select v-model="form.layout" placeholder="请选择">
                <el-option
                  v-for="item in layoutlist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="面积">
              <el-input
                v-model="form.acreage"
                placeholder="请输入数字"
              ></el-input>
            </el-form-item>
            <span class="dialog-footer">
              <el-button @click="editVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit3">添加</el-button>
            </span>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="editVisible2" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <!-- <el-form-item :label="'房源'+(index+1)+'级'" v-for="(item,index) in housingResources" :key="index">
          <el-input v-model="housingResources[index]" class="houseinput"><el-button slot="append" icon="el-icon-remove-outline" @click="delHierarchy" v-if="index == housingResources.length-1" title="删除层级"></el-button><el-button slot="append" icon="el-icon-circle-plus-outline" @click="addHierarchy" v-if="index == housingResources.length-1" title="增加层级"></el-button></el-input>
        </el-form-item> -->
        <el-form-item label="房间名称">
          <el-input v-model="form.name" placeholder="请输入公寓名称"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="form.address"
            placeholder="请输入公寓地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="户型">
          <el-select v-model="form.layout" placeholder="请选择">
            <el-option
              v-for="item in layoutlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="form.acreage" placeholder="请输入数字"></el-input>
        </el-form-item>
        <span class="dialog-footer">
          <el-button @click="editVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="modifyfun">修 改</el-button>
        </span>
      </el-form>
    </el-dialog>
    <el-dialog title="绑定" :visible.sync="editDeding" width="30%">
      <el-select v-model="userselectid" placeholder="请选择绑定用户">
        <el-option
          v-for="item in userselect"
          :key="item.id"
          :label="item.username"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <el-button @click="editDeding = false">取 消</el-button>
      <el-button type="primary" @click="Debinding">绑 定</el-button>
      <el-button type="primary" @click="Unbundling">解 绑</el-button>
    </el-dialog>
  </div>
</template>

<script>
import houseing from "../components/houseing.vue";
import zTree from "../components/zTree1.vue";
import { httpGet, httpPost, download } from "../api";
export default {
  name: "campus",
  data() {
    return {
      activeName: "first",
      activeName1: "first",
      layoutlist: [
        {
          value: 0,
          label: "单间",
        },
        {
          value: 1,
          label: "一室一厅",
        },
        {
          value: 2,
          label: "两室一厅",
        },
        {
          value: 3,
          label: "三室一厅",
        },
        {
          value: 4,
          label: "无",
        },
      ],
      editVisible: false,
      editVisible1: false,
      editVisible2: false,
      editDeding: false,
      housingResources: [""],
      form: {
        sex: 1,
        cardState: 1,
        name: "",
        number: "",
        cardId: "",
        phone: "",
        address: "",
      },
      currentPage4: 1,
      activeiconfont: false,
      userlist: [],
      options: [
        {
          value: "选项1",
          label: "公寓1",
        },
        {
          value: "选项2",
          label: "公寓2",
        },
      ],
      options1: [
        {
          value: "选项1",
          label: "1号楼",
        },
        {
          value: "选项2",
          label: "2号楼",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "1单元",
        },
        {
          value: "选项2",
          label: "2单元",
        },
      ],
      options3: [
        {
          value: "选项1",
          label: "1楼",
        },
        {
          value: "选项2",
          label: "2楼",
        },
      ],
      value: "",
      value1: "",
      value2: "",
      value3: "",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input5: "",
      select: "",
      total: 0,
      userselect: [],
      multipleSelection: [],
      userselectid: "",
      zNodes: [],
      type: "",
      pid: "",
      showIndex: 0,
      ztreeObj: null,
      setting: {
        edit: {
          enable: true,
          drag: {
            isMove: true,
          },
          showRemoveBtn: false,
          showRenameBtn: false,
        },
        check: {
          enable: false,
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "pid",
          },
        },
        view: {
          showIcon: true,
          addHoverDom: this.addHoverDom,
          removeHoverDom: this.removeHoverDom,
        },
      },
      fatherid: 0,
    };
  },
  components: { houseing, zTree },
  created() {
    this.getlist();
    // this.getUserList();
    this.getalllist();
  },
  mounted() {
    // var data = {};
    //   httpGet(data, this.$api.getSiteList).then((res) => {
    //     this.zNodes = res.data.list;
    //     $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
    //   });
  },
  methods: {
    // freshArea: function () {
    //   $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
    // },
    // 查询
    // selectlist(){
    //   var q={
    //     type:this.input5
    //   }
    //   var data={
    //     q:JSON.stringify(q),
    //     pageNum:1,
    //     pageSize:20
    //   }
    //   httpGet(data,'/v1/site/get/list').then(res=>{
    //     this.userlist = res.data.list;
    //     this.total = res.data.total;
    //   })
    // },
    onClick: function (evt, treeId, treeNode) {
      // 点击事件
      this.fatherid = treeNode.id;
      this.fatherMethod(treeNode.id);
    },
    fatherMethod1(pageNum) {
      var pageuserlist = JSON.parse(JSON.stringify(this.pageuserlist));
      var num1 = (pageNum - 1) * 20;
      var num2 = pageNum * 20;
      var userlist = [];
      pageuserlist.map((li, index) => {
        if (num1 <= index && index <= num2) {
          userlist.push(li);
        }
      });
      this.userlist = userlist;
      this.total = this.pageuserlist.length;
      // var q = {
      //   ancestor: this.fatherid,
      // };
      // var data = {
      //   q: JSON.stringify(q),
      //   pageNum:pageNum,
      //   pageSize:20
      // };
      // httpGet(data, this.$api.getSiteList).then((res) => {
      //   var userlist=[]
      //   res.data.list.map(li=>{
      //     if(JSON.parse(li.expand).type == '1'){
      //       userlist.push(li)
      //     }
      //   })
      //   this.userlist = userlist
      //   this.pageuserlist = userlist
      //   this.total = userlist.length;
      // });
    },
    fatherMethod(id) {
      var q = {
        ancestor: id,
      };
      var data = {
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var pageuserlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              pageuserlist.push(li);
            }
          }
        });
        this.pageuserlist = pageuserlist;
        var num1 = 0;
        var num2 = 20;
        var userlist = [];
        pageuserlist.map((li, index) => {
          if (num1 <= index && index <= num2) {
            userlist.push(li);
          }
        });
        this.userlist = userlist;
        this.total = pageuserlist.length;
      });
    },
    exportfun() {
      var q = {
        expand: {
          type: "1",
        },
      };
      var data = {
        q: JSON.stringify(q),
        fileName: "办公楼房源",
      };
      download(data, this.$api.exportSite).then((res) => {
        const link = document.createElement("a");
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });
        link.href = URL.createObjectURL(blob);
        link.download = "办公楼房源";
        link.click();
        URL.revokeObjectURL(objectUrl);
        // window.location.href = objectUrl;
      });
    },
    query(val) {
      var homelist = val ? this.options.find((ele) => ele.id === val) : "";
      this.type = homelist.type;
      this.pid = homelist.pid;
      var q = {
        pid: val,
      };
      var data = {
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var userlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              userlist.push(li);
            }
          }
        });
        this.options1 = userlist;
      });
    },
    query1(val) {
      var homelist = val ? this.options1.find((ele) => ele.id === val) : "";
      this.type = homelist.type;
      this.pid = homelist.pid;
      var q = {
        pid: val,
      };
      var data = {
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var userlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              userlist.push(li);
            }
          }
        });
        this.options2 = userlist;
      });
    },
    query2(val) {
      var homelist = val ? this.options2.find((ele) => ele.id === val) : "";
      this.type = homelist.type;
      this.pid = homelist.pid;
      var q = {
        pid: val,
      };
      var data = {
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var userlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              userlist.push(li);
            }
          }
        });
        this.options3 = userlist;
      });
    },
    query3(val) {
      var homelist = val ? this.options3.find((ele) => ele.id === val) : "";
      this.type = homelist.type;
      this.pid = val;
      var q = {
        pid: val,
      };
      var data = {
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var userlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              userlist.push(li);
            }
          }
        });
        this.options4 = userlist;
      });
    },
    queryfirst(id) {
      var q = {
        ancestor:id
      };
      var data = {
        q: JSON.stringify(q),
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var userlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              userlist.push(li);
            }
          }
        });
        this.options = userlist;
      });
    },
    // 获取用户列表
    getUserList() {
      var data = {
        pageNum: 1,
        pageSize: 100,
      };
      httpGet(data, this.$api.getUserList).then((res) => {
        this.userselect = res.data.list;
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClick1(tab, event) {
      console.log(tab, event);
    },
    getalllist() {
      var data = {};
      httpGet(data,  this.$api.getTree).then((res) => {
        var userlist = [];
        res.data.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "0") {
              userlist.push(li);
            }
          }
        });
        this.queryfirst(userlist[1].id)
        this.zNodes = userlist;
      });
    },

    // 获取列表
    getlist() {
      var q = {
        name: this.input5,
        pid: this.pid,
      };
      var data = {
        q: JSON.stringify(q),
        pageNum: 1,
        pageSize: 20,
      };
      httpGet(data, this.$api.getSiteList).then((res) => {
        var pageuserlist = [];
        res.data.list.map((li) => {
          if (li.expand) {
            if (JSON.parse(li.expand).type == "1") {
              pageuserlist.push(li);
            }
          }
        });
        var num1 = 0;
        var num2 = 20;
        this.pageuserlist = pageuserlist;
        var userlist = [];
        pageuserlist.map((li, index) => {
          if (num1 <= index && index <= num2) {
            userlist.push(li);
          }
        });
        this.userlist = userlist;
        this.total = pageuserlist.length;
      });
    },
    //减少层级
    delHierarchy() {
      if (this.housingResources.length <= 1) {
        this.$message.error("已到第一级");
      } else {
        this.housingResources.splice(-1, 1);
      }
    },
    // 增加层级
    addHierarchy() {
      this.housingResources.push("");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSearch1() {
      this.editVisible = true;
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible2 = true;
    },
    // 单个添加
    handleEdit1(index, row) {
      this.addid = row.id;
      this.editVisible1 = true;
    },
    //批量删除
    selectmoredel() {
      var list = this.multipleSelection;
      var idlist = [];
      list.map((li) => {
        idlist.push(li.id);
      });
      if (list.length == 0) {
        this.$message.error("请勾选需要删除的数据");
      } else {
        this.$confirm("确定要删除吗？", "提示", {
          type: "warning",
        })
          .then(() => {
            var data = {
              ids: idlist,
            };
            httpPost(data, this.$api.deleteSite).then((res) => {
              this.getlist();
              this.$message.success("删除成功");
            });
          })
          .catch(() => {});
      }
    },
    // 单个绑定
    dbing() {
      var list = this.multipleSelection;
      console.log(this.multipleSelection);
      if (list.length == 0) {
        this.$message.error("请勾选需要删除的数据");
      } else {
        this.editDeding = true;
      }
    },
    // 解绑
    Unbundling() {
      var list = this.multipleSelection;
      var idlist = [];
      list.map((li) => {
        var idli = {
          id: li.id,
          userId: this.userselectid,
        };
        idlist.push(idli);
      });
      if (list.length == 0) {
        this.$message.error("请勾选需要解绑的数据");
      } else {
        this.editDeding = true;
        this.$confirm("确定要解绑吗？", "提示", {
          type: "warning",
        })
          .then(() => {
            httpPost(idlist, this.$api.removeAssign).then((res) => {
              this.$message.success("解绑成功");
            });
          })
          .catch(() => {});
      }
    },
    // 管理绑定页面
    Debinding() {
      var list = this.multipleSelection;
      var idlist = [];
      list.map((li) => {
        var idli = {
          id: li.id,
          userId: this.userselectid,
        };
        idlist.push(idli);
      });
      if (list.length == 0) {
        this.$message.error("请勾选需要删除的数据");
      } else {
        this.editDeding = true;
        this.$confirm("确定要绑定吗？", "提示", {
          type: "warning",
        })
          .then(() => {
            httpPost(idlist, this.$api.siteAssign).then((res) => {
              this.$message.success("绑定成功");
            });
          })
          .catch(() => {});
      }
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          var ids = [];
          ids.push(row.id);
          var data = {
            ids: ids,
          };
          httpPost(data, this.$api.deleteSite).then((res) => {
            this.$message.success("删除成功");
            this.tableData.splice(index, 1);
            this.getlist();
          });
        })
        .catch(() => {});
    },
    // 保存编辑
    saveEdit() {
      var expand = {
        type: "1",
      };
      var data = {
        acreage: parseInt(this.form.acreage),
        layout: this.form.layout,
        name: this.form.name,
        expand: JSON.stringify(expand),
        address: this.form.address,
        type: 0,
      };
      if (this.form.name == "") {
        this.$message.error("公寓名称不能为空");
      } else {
        httpPost(data, this.$api.siteAddRoot).then((res) => {
          this.editVisible = false;
          this.getlist();
        });
      }
    },
    // 修改
    modifyfun() {
      var data = {
        acreage: parseInt(this.form.acreage),
        layout: this.form.layout,
        name: this.form.name,
        address: this.form.address,
        id: this.form.id,
      };
      if (this.form.name == "") {
        this.$message.error("公寓名称不能为空");
      } else {
        httpPost(data, this.$api.siteUpdate).then((res) => {
          this.editVisible2 = false;
          this.getlist();
        });
      }
    },
    // 模板创建
    saveEdit1() {
      var names = this.form.name.split("、");
      var counts = this.form.counts.split("、");
      var expand = {
        type: "1",
      };
      var data = {
        acreage: parseInt(this.form.acreage),
        layout: this.form.layout,
        counts: counts,
        expand: JSON.stringify(expand),
        address: this.form.address,
        names: names,
      };
      if (this.form.name == "") {
        this.$message.error("公寓单元名称不能为空");
      } else if (this.form.counts == "") {
        this.$message.error("公寓层数不能为空");
      } else if (names.length != counts.length) {
        this.$message.error("公寓单元和层数数量需要对应");
      } else {
        httpPost(data, this.$api.sitCreateMod).then((res) => {
          this.editVisible = false;
          this.getlist();
          this.getalllist();
        });
      }
    },
    // 单个房间创建
    saveEdit2() {
      var expand = {
        type: "1",
      };
      var data = {
        acreage: parseInt(this.form.acreage),
        ancestor: this.addid,
        layout: this.form.layout,
        name: this.form.name,
        expand: JSON.stringify(expand),
        type: 3,
      };
      if (this.form.name == "") {
        this.$message.error("公寓名称不能为空");
      } else {
        httpPost(data, this.$api.sitAddChild).then((res) => {
          this.editVisible1 = false;
          this.getlist();
        });
      }
    },
    // 楼层房间批量创建
    saveEdit3() {
      var expand = {
        type: "1",
      };
      var data = {
        acreage: parseInt(this.form.acreage),
        layout: this.form.layout,
        ancestor: this.addid,
        count: this.form.count,
        expand: JSON.stringify(expand),
        name: this.form.name,
        type: 2,
      };
      if (this.form.name == "") {
        this.$message.error("楼层名称不能为空");
      } else if (this.form.counts == "") {
        this.$message.error("房间数不能为空");
      } else {
        httpPost(data, this.$api.sitAddNodes).then((res) => {
          this.editVisible1 = false;
          this.getlist();
        });
      }
    },
    activeiconfun(t) {
      this.activeiconfont = t;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      var pageuserlist = JSON.parse(JSON.stringify(this.pageuserlist));
      var num1 = (val - 1) * 20;
      var num2 = val * 20;
      var userlist = [];
      pageuserlist.map((li, index) => {
        if (num1 <= index && index <= num2) {
          userlist.push(li);
        }
      });
      this.userlist = userlist;
      this.total = this.pageuserlist.length;
      // if(this.fatherid!=0){
      //   this.fatherMethod1(val)
      // }else{
      //   var data = {
      //     pageNum: val,
      //     pageSize: 20,
      //   };
      //   httpGet(data, this.$api.getSiteList).then((res) => {
      //   var userlist=[]
      //   res.data.list.map(li=>{
      //     if(JSON.parse(li.expand).type == '1'){
      //       userlist.push(li)
      //     }
      //   })
      //     this.userlist =userlist;
      //     this.total =userlist.length;
      //   });
      // }
    },
  },
};
</script>

<style scoped>
/* @import "../assets/css/zTreeStyle.css";
#areaTree {
  border: 1px solid #e5e5e5;
  margin-bottom: 2px;
  border-radius: 4px;
  overflow: hidden;
  max-height: 800px;
  height: 400px;
  overflow-y: scroll;
}
.box-title {
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
}
.box-title a {
  color: #2fa4e7;
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 8px 15px;
  cursor: pointer;
}
.box-title .fa {
  float: right;
  line-height: 20px;
} */

.handle-box .handle-input:last-child {
  display: inline-block;
}
.handle-input {
  width: 75%;
  display: inline-block;
  margin-bottom: 10px;
}
.mr10 {
  margin-right: 10px;
}
.marginb20 {
  margin-bottom: 20px;
}
.contentc {
  display: flex;
  align-items: center;
}
.cardrelative::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 57px;
}
.aftercolor1::before {
  background: #f2827c;
}
.aftercolor2::before {
  background: #ffd791;
}
.aftercolor3::before {
  background: #90d09e;
}
.aftercolor4::before {
  background: #73cde2;
}
.aftercolor5::before {
  background: #128bf1;
}
.contentc .contenttitle {
  font-size: 16px;
  color: #333;
  line-height: 30px;
  margin-left: 10px;
}
.contentc .contentnum {
  font-size: 35px;
  color: #333;
  line-height: 58px;
  margin-left: 30px;
}
.cardrelative {
  position: relative;
}
.cardrelative .pzimg {
  position: absolute;
  max-width: 100%;
  bottom: 0;
  right: 0;
}
.cardrelative .right20 {
  right: -15px;
  bottom: -4px;
}
.paddcontent {
  padding: 14px 0;
}
.contentc1 {
  display: block;
}
.contentleft {
  width: 48%;
  box-sizing: border-box;
  margin-left: 30px;
  display: inline-block;
  vertical-align: top;
}
.pieChart {
  width: 50%;
  height: 200px;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pieChart .schart {
  height: 100%;
}
.heightbt {
  height: 220px;
}
.contentleft .contenttitle {
  display: inline-block;
}
.contentleft .contentnum {
  display: inline-block;
}
.contentleft > ul {
  box-sizing: border-box;
  margin-left: 30px;
}
.contentul li {
  display: flex;
  align-items: center;
  line-height: 40px;
  position: relative;
  color: #333333;
}
.contentul li::before {
  content: "●";
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  color: #128bf1;
}
.contentul li > span {
  width: 50%;
}
.userlist {
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  margin-top: 20px;
}
/* .userlist::after{
  content: '';
  flex: auto;
} */
.userlist .userli {
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
}
.userlist .ko {
  height: 0;
  overflow: hidden;
  padding: 0;
  width: 300px;
}
.paging {
  margin-top: 30px;
  text-align: center;
}
.add {
  width: 300px;
  height: 276px;
  cursor: pointer;
}
.add .adddiv {
  margin-top: 50px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 9px 0px rgba(6, 6, 6, 0.06);
  height: 226px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add .adddiv img {
  max-width: 100%;
}
/* 搜索 */
.searchlist {
  margin-top: 20px;
}
.searchlist1 {
  margin-bottom: 20px;
}

.inputBox {
  width: 75%;
  display: inline-block;
  position: relative;
}
.selectBox {
  position: absolute;
  top: 0;
}
.tablelist {
  position: relative;
  margin-top: 20px;
  padding-top: 40px;
}
.switchiconfont {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  color: #333;
  display: flex;
}
.switchiconfont .iconfont {
  font-size: 16px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
}
.switchiconfont .active {
  color: #fff;
  cursor: pointer;
  background: #3a8ee6;
  border: 1px solid #3a8ee6;
}
.adddbtn {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 100px;
}
.houseinput button {
  font-size: 20px;
}

.elrow {
  margin-bottom: 20px;
}

.grid-content {
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-around;
  -webkit-box-align: center;
}
/* 加的 */
.colposition {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  border: 2px solid hsla(0, 0%, 100%, 0.2);
  /* width: 100%; */
}
.grid-cont-right {
  flex: 1;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
  font-size: 16px;
  color: #666;
  font-size: 14px;
  line-height: 32px;
}

.grid-num {
  font-size: 24px;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.grid-con-1 {
  position: relative;
}
.grid-con-1::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  width: 1px;
  transform: translateY(-50%);
  height: 70px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 1px dashed #666;
}
.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  /* color: rgb(45, 140, 240); */
  color: #333;
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  /* color: rgb(45, 140, 240); */
  color: #333;
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}
.nulldiv {
  text-align: center;
  color: #999;
  font-size: 16px;
  font-weight: 400;
}
.nullimg {
  margin: 30px auto;
  max-width: 300px;
}
.cardbg {
  height: 460px;
  overflow-y: scroll;
  background: #fff;
  margin: 20px;
  padding: 0;
}
.m20 {
  margin: 0 10px;
}
</style>
