<template>
  <div>
    <div class="g-main" style="flex-direction: column">
      <div class="m-search" style="flex-direction: column">
        <section :class="boxHeight ? 'm-form-box-height' : 'm-form-box-height-auto'">
          <el-form :inline="true" class="communityHeight" ref="ref_searchform" :label-width="'100px'">
            <el-form-item label="所属区划" prop="ownerName">
              <el-cascader class="u-item-width-normal" ref="myCascader" clearable size="small"
                v-model.trim="formData.redeemOrgId" :options="orgOptions" :props="orgOptionProps"
                @change="handleChangeAgency"></el-cascader>
            </el-form-item>
            <el-form-item label="设施类别" prop="ownerPhone">
              <el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable
                placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
            <el-form-item label="设施名称" prop="ownerPhone">
              <el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable
                placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
            <el-form-item label="设施地点" prop="ownerPhone">
              <el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable
                placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
            <el-form-item label="所属单位" prop="ownerPhone">
              <el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable
                placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
            <el-form-item label="负责人姓名" prop="ownerPhone">
              <el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable
                placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
            <el-form-item label="负责人电话" prop="ownerPhone">
              <el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable
                placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
          </el-form>
        </section>
        <el-row>
          <el-col :span="24" align="right">
            <el-button style="margin-left: 10px" size="small" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="small" class="diy-button--white" @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="m-table">
        <div class="u-table-btn2">
          <div class="u-table-btn2-left">
            <el-button style="" class="diy-button--blue" icon="el-icon-plus" size="small"
              @click="handleAdd">新增设备</el-button>
            <!-- <el-button style="margin-left:10px" class="diy-button--white" size="small"
                            @click="handleExport">导出</el-button> -->
            <!-- <el-button style="margin-left:10px" class="diy-button--white" size="small"
                            @click="deleteBatch">批量删除</el-button> -->
            <el-button @click="handleExport" class="diy-button--white" size="small">导出</el-button>
            <el-button class="diy-button--white" size="small">
              <el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" action="uploadUlr" :limit="1"
                :accept="'.xls,.xlsx'" :with-credentials="true" :show-file-list="false" :auto-upload="true"
                :on-progress="handleProgress" :on-success="handleExcelSuccess" :before-upload="beforeExcelUpload"
                :http-request="uploadHttpRequest">
                上传导入
              </el-upload>
            </el-button>
            <el-button style="margin-left: 10px" size="small" class="diy-button--add" type="parimary"
              @click="deleteBatch">批量删除</el-button>
          </div>


        </div>

        <div class="m-table-item">
          <el-table :data="tableData" border :show-overflow-tooltip="true" style="width: 100%" selectable>
            <el-table-column width="55">
            </el-table-column>
            <el-table-column fixed="left" width="70" type="index" label="序号" header-align="center" align="center">
            </el-table-column>

            <el-table-column prop="buildingName" fixed="left" label="所属区划" header-align="left" align="left"
              min-width="180">
              <template slot-scope="scope">
                <a class="name-a" @click="handleToNextLevel(scope.row)">
                  {{ scope.row.buildingName }}
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="neighborHoodName" label="" header-align="left" align="left" min-width="160">
            </el-table-column>
            <el-table-column prop="buildingType" label="设施类别" header-align="left" align="left" width="90">
            </el-table-column>
            <el-table-column prop="buildingLeaderName" label="设施名称" header-align="left" align="left" min-width="90">
            </el-table-column>
            <el-table-column prop="buildingLeaderMobile" label="设施地点" header-align="left" align="left" min-width="110">
            </el-table-column>
            <el-table-column prop="totalUnitNum" header-align="left" align="left" label="所属单位">
            </el-table-column>
            <el-table-column prop="totalFloorNum" header-align="left" align="left" label="负责人姓名">
            </el-table-column>
            <el-table-column prop="realTotalHouseNum" header-align="left" align="left" width="90" label="负责人电话">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="220" header-align="center" align="center" class="operate">
              <template slot-scope="scope">

                <el-button type="text" class="div-table-button--blue" size="small"
                  @click="handleDetail(scope.row)">查看</el-button>
                <el-button type="text" class="div-table-button--blue" size="small"
                  @click="handleEdit(scope.row)">编辑</el-button>

                <el-button type="text" class="div-table-button--blue" size="small"
                  @click="handleDel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
        <!-- 新增/修改弹出框 -->
        <el-dialog :visible.sync="showAdd" :close-on-click-modal="false" :close-on-press-escape="false"
          :title="formTitle" width="750px" top="10vh" class="dialog-h" @closed="showAddClose">
          <add ref="ref_form" v-if="showAdd" @showAddClose="showAddClose" />
        </el-dialog>
        <!--查看弹出框 -->
        <el-dialog :visible.sync="showinfo" :close-on-click-modal="false" :close-on-press-escape="false"
          :title="formTitle" width="750px" top="10vh" class="dialog-h" @closed="showAddClose">
          <info ref="ref_form" v-if="showinfo" @showAddClose="showAddClose" />
        </el-dialog>
        <!-- 导出弹出框 -->
        <!-- <el-dialog :visible.sync="diyDialog" :close-on-click-modal="false" :close-on-press-escape="false"
                    width="1150px" title="导出模板" top="5vh" class="dialog-h">
                    <community-export-info v-if="diyDialog" ref="ref_diy" :list="exportList" :search="{
                    formCode: 'community_info',
                    pageNo: pageNo,
                    pageSize: pageSize,
                    conditions: queryConditions
                }" :orgId="agencyObj.id" @close="handleDiyClose"></community-export-info>
                </el-dialog> -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
          :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" layout="sizes, prev, pager, next, total"
          :total="total">
        </el-pagination>
      </div>




    </div>
  </div>


</template>
  <script>
  import axios from "axios";
  import CDialog from "@c/CDialog";
  import add from "./add.vue";
  // import info from "./info.vue";
  import info from "./info.vue"
//   import buildTable from "./buildTable";
//   import roomTable from "./roomTable";
  import { requestPost, requestGet } from "@/js/dai/request";
  import { mapGetters } from "vuex";
  import { Loading } from "element-ui"; // 引入Loading服务
  import nextTick from "dai-js/tools/nextTick";
  import debounce from "lodash/debounce";
  let loading; // 加载动画
  export default {
    data() {
      return {
        showinfo:false,
        pageSize:20,
        pageNo:1,
        total:0,
        ownerName:"",
        ownerPhone:"",
        buildingName:"", 
        neighborHoodName:"",
        buildingType:"",
        buildingLeaderName:"",
        buildingLeaderMobile:"",
        totalUnitNum:"",
        totalFloorNum:"",
        realTotalHouseNum:"",
        boxHeight: true,
        showAdd:false,
        formTitle:"",
        formData:{},
        tableData: [
            {
                buildingName: '区划A',
                neighborHoodName: '小区1',
                buildingType: '住宅',
                buildingLeaderName: '张三',
                buildingLeaderMobile: '13812345678',
                totalUnitNum: '单位A',
                totalFloorNum: '5层',
                realTotalHouseNum: '123456',
            },
            {
                buildingName: '区划B',
                neighborHoodName: '小区2',
                buildingType: '商用',
                buildingLeaderName: '李四',
                buildingLeaderMobile: '13898765432',
                totalUnitNum: '单位B',
                totalFloorNum: '8层',
                realTotalHouseNum: '654321',
            },
            {
                buildingName: '区划C',
                neighborHoodName: '小区3',
                buildingType: '住宅',
                buildingLeaderName: '王五',
                buildingLeaderMobile: '13812349876',
                totalUnitNum: '单位C',
                totalFloorNum: '3层',
                realTotalHouseNum: '123789',
            },
            {
                buildingName: '区划D',
                neighborHoodName: '小区4',
                buildingType: '工业',
                buildingLeaderName: '赵六',
                buildingLeaderMobile: '13867891234',
                totalUnitNum: '单位D',
                totalFloorNum: '12层',
                realTotalHouseNum: '789123',
            },
            {
                buildingName: '区划E',
                neighborHoodName: '小区5',
                buildingType: '住宅',
                buildingLeaderName: '钱七',
                buildingLeaderMobile: '13854321098',
                totalUnitNum: '单位E',
                totalFloorNum: '6层',
                realTotalHouseNum: '987654',
            }
        ],//表格数据
        orgOptions:[],//所属组织
        orgOptionProps: {
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        emitPath: false,
        multiple: false,
        checkStrictly: true
    },//所属组织配置
 
      };
    },
    components: {
        add,info
    },
    async mounted() {
      this.getTableData()
      this.getOrgTreeList()
      await this.loadOrgData(); 
    },
    computed: {
      rowHeight() {
        return this.$store.state.inIframe
          ? this.clientHeight - 140 + this.iframeHeight + "px"
          : this.clientHeight - 140 + "px";
      },
      treeHeight() {
        return this.$store.state.inIframe
          ? this.clientHeight - 245 + this.iframeHeight + "px"
          : this.clientHeight - 245 + "px";
      },
      ...mapGetters(["clientHeight", "iframeHeight"]),
      showIcons() {
        return function (data) {
          if (data.level == "building") {
            let arr = data.showNum.split("/");
            if (arr[0] !== arr[1]) {
              return true;
            } else {
              return false;
            }
          }
        };
      },
    },
    watch: {

    },
    methods: {
      //分页查询
      handleSizeChange(val) {
        this.pageSize = val;
        window.localStorage.setItem("pageSize", val);
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getTableData();
      },

      //批量删除
      deleteBatch() {
      if (this.selection.length > 0) {
        this.$confirm("删除之后无法恢复，确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.deleteresiBatch();
          })
          .catch((err) => {
            if (err == "cancel") {
            }
          });
      } else {
        this.$message.warning("请先选择要删除的居民");
      }
    },
    //批量删除
    async deleteresiBatch() {
      if (this.selection.length === 0)
        return this.$message.error("请选择之后进行操作");
      let userIds = this.selection.map((item) => item.resiId);
      this.$http
        .post("/actual/base/residentBaseInfo/batchdel", userIds)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success("删除成功");
            this.handleSearchFrom();
          }
        })
        .catch((err) => {
          return this.$message.error("网络错误");
        });
    },
      handleProgress(event, file, fileList) {

},
      async uploadHttpRequest(file) {
            this.importLoading = true;
            this.importBtnTitle = '正在上传中...';
            this.$message({
                showClose: true,
                dangerouslyUseHTMLString: true,
                message: "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度",
                duration: 3000
            });
            let than = this;
            document.getElementById('clickA').addEventListener('click', function () {
                than.$router.replace('/main/importRecord-index');
            });
            const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
            formData.append('file', file.file); //添加文件对象
            formData.append('code', ''); //添加文件对象
            let url = '/governance/icEvent/importEvent'
            if (this.importType == 2) {
              url = '/governance/icEvent/importAwo'
            }
            console.log(url)
            await this.$http
                .post(url, formData)
                .then(res => {
                    if (res.data.code == 0 && res.data.msg == 'success') {
                        const data = res.data.data;
                        this.dataList = [
                            ...Object.keys(data.option.exist).map(k => {
                                return {
                                    index: k,
                                    srcField: data.option.exist[k],
                                    exist: true,
                                    field: data.option.exist[k]
                                };
                            }),
                            ...Object.keys(data.option.notExist).map(k => {
                                return {
                                    index: k,
                                    srcField: data.option.notExist[k],
                                    exist: false,
                                    field: ''
                                };
                            })
                        ];
                        this.importOption = data.option;
                        this.importCode = data.code;
                        this.fileData = file;
                    } else this.$message.error(res.data.msg);
                })
                .catch(err => {
                    console.log('失败', err);
                    file.onError(); //上传失败的文件会从文件列表中删除
                });
            this.importLoading = false;
            this.importBtnTitle = '导入';
            this.$refs.upload.clearFiles();
            this.getTableData();
        },
      handleExcelSuccess(res, file) {
            if (!res.code === 0 && !res.msg === 'success') {
                this.$message.error(res.msg);
            }
        },
      //上传导入
      beforeExcelUpload(file) {
        const isType = file.type === 'application/vnd.ms-excel';
        const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        const fileType = isType || isTypeComputer;
        const isLt1M = file.size / 1024 / 1024 < 10;
        if (!fileType) {
          this.$message.error('上传文件只能是xls/xlsx格式！');
        }

        if (!isLt1M) {
          this.$message.error('上传文件大小不能超过 10MB!');
        }
        return fileType && isLt1M;
      },
      //导出
      async handleExport() {
        const url = "/governance/icEvent/export";
        const { pageSize, pageNo, formData } = this;
        axios({
          url: window.SITE_CONFIG["apiURL"] + url,
          method: "post",
          data: {
            pageSize,
            pageNo,
            ...formData,
          },
          responseType: "blob",
        })
          .then((res) => {
            let fileName = window.decodeURI(
              res.headers["content-disposition"].split(";")[1].split("=")[1]
            );
            let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
            var url = window.URL.createObjectURL(blob);
            var aLink = document.createElement("a");
            aLink.style.display = "none";
            aLink.href = url;
            aLink.setAttribute("download", fileName);
            document.body.appendChild(aLink);
            aLink.click();
            document.body.removeChild(aLink); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          })
          .catch((err) => {
            return this.$message.error("网络错误");
          });
      },

      //删除
      handleDel(row) {
        this.$confirm("删除之后无法回复，确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            console.log(row.id, "online");
            let url = "/voluntary/pointsAward/admin/delete"
            let params = {
              id: row.id
            }
            requestPost(url, params).then((res) => {
              console.log(res, "res");
              this.getTableData()

            })
          })
          .catch(err => {
            if (err == "cancel") {

            }

          });

      },
            //获取当前列表
            async getTableData() {
            // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
            const url = "/voluntary/pointsAward/admin/list";
            let params = {
              pageNo: this.pageNo,
              shelveOnTimeFrom: this.formData.shelveOnTimeFrom,
              redeemOrgId: this.formData.redeemOrgId,
              pageTo: this.pageSize,
              classKey: this.formData.classKey,
              shelveOnTimeTo: this.formData.shelveOnTimeTo

            }
            const { data, code, msg } = await requestGet(url, params)
            if (code === 0) {
              console.log("列表请求成功！！！！！！！！！！！！！！");
              this.total = data.total || 0;
              // this.tableData = data.list
              // // console.log(this.tableData, "this.tableData");
              // this.tableData.forEach(item => {
              //   console.log(item,"item");
              //   this.starList.forEach(item2 => {
              //     console.log(item2,"item2");
              //     if (item.starLevel == item2.id) {
              //       console.log(item.starId,item2.id, "item2.name");
              //       item.starName = item2.name
              //       console.log(item2.name, "item2.name");
                    
              //     }
              //   })
           
              // })
              console.log(this.tableData, "this.tableData1");
              

            } else {
            }
          },
                //获取当前组织
   getOrgTreeList() {
      this.$http
        .post("/gov/org/customeragency/agencygridtree", {orgTypeFilter:this.orgTypeFilter})
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.orgOptions = [];
            this.orgOptions.forEach(item => {
              item.subAgencyList.forEach(item2 => {
                
              })
            })
            this.orgOptions.push(res.data);
            console.log(this.orgOptions,"this.orgOptions");
            
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
          //选择当前组织
          handleChangeAgency(val) {
            console.log(val);
            this.redeemerOrgId = val

          },
        handleDetail(){
            this.formTitle = '查看'
            this.showinfo = true
            // this.$nextTick(() => {
            //     this.$refs.ref_form.initForm("info", "");
            // });
        },
        showAddClose(){
            console.log("23132132d");
            this.showAdd = false
        },
        handleAdd() {
            this.formTitle ='新增'
            this.showAdd = true
            this.$nextTick(() => {
        this.$refs.ref_form.initForm("add", "");
      });
    },
      handleEdit() {
        this.formTitle ='编辑'
        this.showAdd = true
        this.$nextTick(() => {
        this.$refs.ref_form.initForm("edit", row);
      })
        },
//      //加载组织数据
async loadOrgData() {
        const url = "/gov/org/agency/maporg";
        // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
        let params = {};
        const { data, code, msg } = await requestPost(url, params);
        if (code === 0) {
          this.centerPoint = [];
          this.centerPoint.push(data.latitude);
          this.centerPoint.push(data.longitude);
        } else {
          this.$message.error(msg);
        }
      },
      //搜索
      handleSearch() {
        this.getTableData()
      },
      //重置搜索条件
      resetSearch() {
        this.ownerName = "";
        this.ownerPhone = "";
        this.rentFlag = "";
        this.purpose = "";
        this.remark = "";
        this.updateStartDate = "";
        this.updateEndDate = "";
        this.neighborHoodId = "";
        this.buildingId = "";
        this.buildingUnitId = "";
        this.houseId = "";
        this.resiNumber ="";
        this.pageSize = 10;
        this.pageNo = 1;

      },





  
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "@/assets/scss/modules/visual/communityManage.scss";
  @import "@/assets/scss/modules/management/list-main.scss";
  </style>
  <style lang="scss" scoped>
  .m-search ::v-deep .el-row {
    margin-right: 0;
  }
  .g-main {
    display: flex;
  }
  .scrollar {
    margin-top: 30px;
    /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background: #e6f0ff;
      border-radius: 2px;
    }
    /deep/ .el-tree-node:focus>.el-tree-node__content {
      color: #0056d6;
      // background-color: #e6f0ff;
    }
    // /deep/ .el-tree-node__expand-icon {
    //   color: #0043c8;
    //   border: 1px solid #e1ecff;
    //   background-color: #e1ecff;
    //   padding: 0px;
    //   margin-right: 8px;
    //   font-size: 9px;
    // }
    /deep/.el-tree {
      flex: 1;
      .el-tree-node {
        margin-left: 2px;
      }
      //原有的箭头 去掉
      // .el-icon svg {
      //   display: none;
      //   height: 0;
      //   width: 0;
      // }
      //引入图标的位置
      // .el-tree-node__expand-icon {
      //   // position: absolute;
      //   // left: 2px;
      //   // 图标是否旋转，如果是箭头类型的，可以设置旋转90度。
      //   .expanded {
      //     transform: rotate(90deg);
      //   }
      //   // 未展开的节点
      //   &:before {
      //     // content: "\008B";
      //     // content: "\008B";
      //     font-size: 12px;
      //     color: #0043c8;
      //   }
      // }
      // 叶子节点（不显示图标）
      .is-leaf.el-tree-node__expand-icon::before {
        // display: none;
        // background: none !important;
        // border: 0px;
        // content: "";
        // width: 18px;
        // height: 18px;
      }
    }
  }
  .div_tree {
    margin: 7px 8px 7px 7px;
    width: 200px;
    padding: 24px 15px;
    background: #ffffff;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
      0px 3px 6px -4px rgba(0, 0, 0, 0.12);
    // border-radius: 5px;
    overflow-y: hidden;
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }
    /deep/ .el-scrollbar__bar {
      right: -2px;
    }
    //搜索输入框样式
    /deep/ .el-input--medium .el-input__inner {
      height: 32px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    overflow: hidden;
  }
  .over-ellipsis {
    display: block;
    width: 140PX;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
  }
  .filter_tree {
    overflow-x: auto;
    // background-color: #f6f6f6;
    margin-top: 5px;
  }
  .div_left {
    // flex: 1;
    width: calc(100% - 200px);
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  </style>
  