<!--
  revit信息点开关
 -->
<template>
  <div id="family">
    <header>
      <select class="form-control" v-model="value" @change="chooseMedicine">
        <option v-for="(opt,index) in options" :key="index" :value="opt.value">{{ opt.label }}</option>
      </select>
      <build-input style="width:20rem;" @search="changeVal" :placeholder="'支持关键字、英文代号查找'"></build-input>
    </header>
    <main>
      <div class="left_main" v-loading="isLoading">
        <div class="family" v-for="(letter,index) in letterArr" :key="index">
          <div class="family_title" :id="letter">{{letter}}</div>
          <div class="family_content" v-if="searchVal == ''">
            <ul class="family_list">
              <li
                class="family_item"
                @click="familyActive(family.name,family.code)"
                :class="active == family.name ? 'active' : ''"
                v-for="(family,index) in allFamily"
                :key="index"
                v-if="family.capitalize === letter"
              >{{family.name}}-{{family.code}}</li>
            </ul>
          </div>
          <div class="family_content" v-else>
            <ul class="family_list">
              <li
                class="family_item"
                @click="familyActive(family.name,family.code)"
                :class="active == family.name ? 'active' : ''"
                v-for="(family,index) in searchArr"
                :key="index"
                v-if="family.capitalize === letter"
              >{{family.name}}-{{family.code}}</li>
            </ul>
          </div>
        </div>
        <div id="letter"></div>
        <div class="initials">
          <ul id="characterList">
            <li @click="moveScroll()">↑</li>
            <li
              v-for="(character,index) in letterArr"
              :key="index"
              @click="moveScroll(character)"
            >{{ character }}</li>
          </ul>
        </div>
      </div>
      <div class="right_main" v-loading="rightLoading">
        <el-tabs v-if="labelKey.length && tabsFalg" tab-position="left" style="height: 100%;">
          <el-tab-pane v-for="(item,index) in labelKey" :key="index">
            <span slot="label">{{item.FirstTag}}</span>
            <div class="label_main" v-for="(tag,tagIndex) in item.details" :key="tagIndex">
              <p>{{tag.SecondTag}}</p>
              <ul v-for="(detail,detailInd) in tag.details" :key="detailInd">
                <el-checkbox
                  v-model="detail.Visible"
                  @change="boxChange(detail)"
                >{{detail.InfoPointName}}</el-checkbox>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div v-else class="right_main_msg">←请选择设备族</div>
      </div>
    </main>
    <!-- 请求提示弹窗 -->
    <el-dialog title="提示" :Visible.sync="dialogVisible">
      <span>{{ajaxMsg}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import buildInput from "@/components/input";
import {
  getAllFamily, //获取所有设备族
  getTableHeader, //点击时后去右侧的数据
  setHeader, //修改右侧数据
  getEqCode,
  getBussTypes
} from "../api/request";
export default {
  name: "family",
  components: {
    "build-input": buildInput
  },
  data() {
    return {
      value: "property",
      options: [{
        label: "系统",
        value: "system"
      }, {
        label: "资产",
        value: "property"
      }, {
        label: "设备",
        value: "equip"
      }, {
          label: "空间",
          value: "space"
      }],
      tabsFalg: false,
      active: "",
      checked2: false,
      allFamily: [],
      dialogVisible: false,
      ajaxMsg: "",
      code: '',
      letterArr: [], //出现的a-z字符
      UserId: this.$route.query.userId, //用户id
      ProjId: this.$route.query.projId, //项目id
      labelKey: [], // 右侧主体数据承接数组
      searchArr: [], // 搜索后的数据
      searchVal: "", //搜索内容
      isLoading: true,//loading弹窗
      rightLoading: false,//右侧loading
      strChineseFirstPY:
        " ",
      oMultiDiff: {
        "19969": "DZ",
        "19975": "WM",
        "19988": "QJ",
        "20048": "YL",
        "20056": "SC",
        "20060": "NM",
        "20094": "QG",
        "20127": "QJ",
        "20167": "QC",
        "20193": "YG",
        "20250": "KH",
        "20256": "ZC",
        "20282": "SC",
        "20285": "QJG",
        "20291": "TD",
        "20314": "YD",
        "20340": "NE",
        "20375": "TD",
        "20389": "YJ",
        "20391": "CZ",
        "20415": "PB",
        "20446": "YS",
        "20447": "SQ",
        "20504": "TC",
        "20608": "KG",
        "20854": "QJ",
        "20857": "ZC",
        "20911": "PF",
        "20504": "TC",
        "20608": "KG",
        "20854": "QJ",
        "20857": "ZC",
        "20911": "PF",
        "20985": "AW",
        "21032": "PB",
        "21048": "XQ",
        "21049": "SC",
        "21089": "YS",
        "21119": "JC",
        "21242": "SB",
        "21273": "SC",
        "21305": "YP",
        "21306": "QO",
        "21330": "ZC",
        "21333": "SDC",
        "21345": "QK",
        "21378": "CA",
        "21397": "SC",
        "21414": "XS",
        "21442": "SC",
        "21477": "JG",
        "21480": "TD",
        "21484": "ZS",
        "21494": "YX",
        "21505": "YX",
        "21512": "HG",
        "21523": "XH",
        "21537": "PB",
        "21542": "PF",
        "21549": "KH",
        "21571": "E",
        "21574": "DA",
        "21588": "TD",
        "21589": "O",
        "21618": "ZC",
        "21621": "KHA",
        "21632": "ZJ",
        "21654": "KG",
        "21679": "LKG",
        "21683": "KH",
        "21710": "A",
        "21719": "YH",
        "21734": "WOE",
        "21769": "A",
        "21780": "WN",
        "21804": "XH",
        "21834": "A",
        "21899": "ZD",
        "21903": "RN",
        "21908": "WO",
        "21939": "ZC",
        "21956": "SA",
        "21964": "YA",
        "21970": "TD",
        "22003": "A",
        "22031": "JG",
        "22040": "XS",
        "22060": "ZC",
        "22066": "ZC",
        "22079": "MH",
        "22129": "XJ",
        "22179": "XA",
        "22237": "NJ",
        "22244": "TD",
        "22280": "JQ",
        "22300": "YH",
        "22313": "XW",
        "22331": "YQ",
        "22343": "YJ",
        "22351": "PH",
        "22395": "DC",
        "22412": "TD",
        "22484": "PB",
        "22500": "PB",
        "22534": "ZD",
        "22549": "DH",
        "22561": "PB",
        "22612": "TD",
        "22771": "KQ",
        "22831": "HB",
        "22841": "JG",
        "22855": "QJ",
        "22865": "XQ",
        "23013": "ML",
        "23081": "WM",
        "23487": "SX",
        "23558": "QJ",
        "23561": "YW",
        "23586": "YW",
        "23614": "YW",
        "23615": "SN",
        "23631": "PB",
        "23646": "ZS",
        "23663": "ZT",
        "23673": "YG",
        "23762": "TD",
        "23769": "ZS",
        "23780": "QJ",
        "23884": "QK",
        "24055": "XH",
        "24113": "DC",
        "24162": "ZC",
        "24191": "GA",
        "24273": "QJ",
        "24324": "NL",
        "24377": "TD",
        "24378": "QJ",
        "24439": "PF",
        "24554": "ZS",
        "24683": "TD",
        "24694": "WE",
        "24733": "LK",
        "24925": "TN",
        "25094": "ZG",
        "25100": "XQ",
        "25103": "XH",
        "25153": "PB",
        "25170": "PB",
        "25179": "KG",
        "25203": "PB",
        "25240": "ZS",
        "25282": "FB",
        "25303": "NA",
        "25324": "KG",
        "25341": "ZY",
        "25373": "WZ",
        "25375": "XJ",
        "25384": "A",
        "25457": "A",
        "25528": "SD",
        "25530": "SC",
        "25552": "TD",
        "25774": "ZC",
        "25874": "ZC",
        "26044": "YW",
        "26080": "WM",
        "26292": "PB",
        "26333": "PB",
        "26355": "ZY",
        "26366": "CZ",
        "26397": "ZC",
        "26399": "QJ",
        "26415": "ZS",
        "26451": "SB",
        "26526": "ZC",
        "26552": "JG",
        "26561": "TD",
        "26588": "JG",
        "26597": "CZ",
        "26629": "ZS",
        "26638": "YL",
        "26646": "XQ",
        "26653": "KG",
        "26657": "XJ",
        "26727": "HG",
        "26894": "ZC",
        "26937": "ZS",
        "26946": "ZC",
        "26999": "KJ",
        "27099": "KJ",
        "27449": "YQ",
        "27481": "XS",
        "27542": "ZS",
        "27663": "ZS",
        "27748": "TS",
        "27784": "SC",
        "27788": "ZD",
        "27795": "TD",
        "27812": "O",
        "27850": "PB",
        "27852": "MB",
        "27895": "SL",
        "27898": "PL",
        "27973": "QJ",
        "27981": "KH",
        "27986": "HX",
        "27994": "XJ",
        "28044": "YC",
        "28065": "WG",
        "28177": "SM",
        "28267": "QJ",
        "28291": "KH",
        "28337": "ZQ",
        "28463": "TL",
        "28548": "DC",
        "28601": "TD",
        "28689": "PB",
        "28805": "JG",
        "28820": "QG",
        "28846": "PB",
        "28952": "TD",
        "28975": "ZC",
        "29100": "A",
        "29325": "QJ",
        "29575": "SL",
        "29602": "FB",
        "30010": "TD",
        "30044": "CX",
        "30058": "PF",
        "30091": "YSP",
        "30111": "YN",
        "30229": "XJ",
        "30427": "SC",
        "30465": "SX",
        "30631": "YQ",
        "30655": "QJ",
        "30684": "QJG",
        "30707": "SD",
        "30729": "XH",
        "30796": "LG",
        "30917": "PB",
        "31074": "NM",
        "31085": "JZ",
        "31109": "SC",
        "31181": "ZC",
        "31192": "MLB",
        "31293": "JQ",
        "31400": "YX",
        "31584": "YJ",
        "31896": "ZN",
        "31909": "ZY",
        "31995": "XJ",
        "32321": "PF",
        "32327": "ZY",
        "32418": "HG",
        "32420": "XQ",
        "32421": "HG",
        "32438": "LG",
        "32473": "GJ",
        "32488": "TD",
        "32521": "QJ",
        "32527": "PB",
        "32562": "ZSQ",
        "32564": "JZ",
        "32735": "ZD",
        "32793": "PB",
        "33071": "PF",
        "33098": "XL",
        "33100": "YA",
        "33152": "PB",
        "33261": "CX",
        "33324": "BP",
        "33333": "TD",
        "33406": "YA",
        "33426": "WM",
        "33432": "PB",
        "33445": "JG",
        "33486": "ZN",
        "33493": "TS",
        "33507": "QJ",
        "33540": "QJ",
        "33544": "ZC",
        "33564": "XQ",
        "33617": "YT",
        "33632": "QJ",
        "33636": "XH",
        "33637": "YX",
        "33694": "WG",
        "33705": "PF",
        "33728": "YW",
        "33882": "SR",
        "34067": "WM",
        "34074": "YW",
        "34121": "QJ",
        "34255": "ZC",
        "34259": "XL",
        "34425": "JH",
        "34430": "XH",
        "34485": "KH",
        "34503": "YS",
        "34532": "HG",
        "34552": "XS",
        "34558": "YE",
        "34593": "ZL",
        "34660": "YQ",
        "34892": "XH",
        "34928": "SC",
        "34999": "QJ",
        "35048": "PB",
        "35059": "SC",
        "35098": "ZC",
        "35203": "TQ",
        "35265": "JX",
        "35299": "JX",
        "35782": "SZ",
        "35828": "YS",
        "35830": "E",
        "35843": "TD",
        "35895": "YG",
        "35977": "MH",
        "36158": "JG",
        "36228": "QJ",
        "36426": "XQ",
        "36466": "DC",
        "36710": "JC",
        "36711": "ZYG",
        "36767": "PB",
        "36866": "SK",
        "36951": "YW",
        "37034": "YX",
        "37063": "XH",
        "37218": "ZC",
        "37325": "ZC",
        "38063": "PB",
        "38079": "TD",
        "38085": "QY",
        "38107": "DC",
        "38116": "TD",
        "38123": "YD",
        "38224": "HG",
        "38241": "XTC",
        "38271": "ZC",
        "38415": "YE",
        "38426": "KH",
        "38461": "YD",
        "38463": "AE",
        "38466": "PB",
        "38477": "XJ",
        "38518": "YT",
        "38551": "WK",
        "38585": "ZC",
        "38704": "XS",
        "38739": "LJ",
        "38761": "GJ",
        "38808": "SQ",
        "39048": "JG",
        "39049": "XJ",
        "39052": "HG",
        "39076": "CZ",
        "39271": "XT",
        "39534": "TD",
        "39552": "TD",
        "39584": "PB",
        "39647": "SB",
        "39730": "LG",
        "39748": "TPB",
        "40109": "ZQ",
        "40479": "ND",
        "40516": "HG",
        "40536": "HG",
        "40583": "QJ",
        "40765": "YQ",
        "40784": "QJ",
        "40840": "YK",
        "40863": "QJG"
      }
    };
  },
  created() {
    this.getAllFamily();
  },
  methods: {
    chooseMedicine(val) {
      this.getAllFamily()
    },
    //获取所有设备族
    getAllFamily() {
      if (this.value == "property") {
        getAllFamily().then(result => {
          this.isLoading = false
          if (result.data.Result == "success") {
            this.allFamily = result.data.Content;
            this.familySort();
          } else {
            this.dialogVisible = true;
            this.ajaxMsg = "请求出错";
          }
        });
      } else if(this.value == "space"){
          getBussTypes(res => {
              this.isLoading = false
            //   this.allFamily = res.Content;
            this.allFamily = [
          {
            "code": "GeneralZone",
            "name": "默认分区",
            "rel_type": "99"
          },
          {
            "name": "供电分区",
            "rel_type": "1",
            "code": "PowerSupplyZone"
          },
          {
            "name": "照明分区",
            "rel_type": "2",
            "code": "LightingZone"
          },
          {
            "name":"空调分区",
            "rel_type":"4",
            "code":"AirConditioningZone"
        },
        ]
            this.familySort();
          })
      } else {
        getEqCode().then(res => {
          if (res.data.Result == "success") {
            this.allFamily = this.changeValue(res.data.Content, this.value)
            this.familySort();
          } else {
            this.$message.error("请求错误：" + res.data.ResultMsg)
          }
        }).catch(_ => {
          this.$message.error("请求错误")
        })
      }
    },

    changeSpace(arr){
        return arr.map(item => {
            return {
                name: item.name,
                code: item.code
            }
        })
    },

    changeValue(list, val) {
      let data = []
      list.map(item => {
        if (!!item.content && item.content.length) {
          item.content.map(child => {
            //val为系统放入
            if (val == "system") {
              data.push({
                name: child.system,
                code: child.code
              })
            } else {
              //否则为设备
              if (!!child.content && !!child.content.length) {
                child.content.map(facility => {
                  if (val == "equip") {
                    data.push({
                      name: facility.facility,
                      code: facility.code
                    })
                  }
                })
              }
            }
          })
        }
      })
      return data
    },

    //点击checkBox的事件
    boxChange(detail) {
      console.log(detail)
      let param = {
        FamilyId: this.code,
        code: detail.InfoPointCode,
        perjectId: this.ProjId,
        UserId: this.UserId,
        Visible: detail.Visible
      };
      setHeader(param).then(res => {
        if (res.data.Result == "success") {
          return;
        } else {
          this.$message.error("保存失败");
        }
      });
    },

    //修改search
    changeVal(val) {
      let newArr = [],
        arr = [],
        obj = {};
      this.searchVal = val;
      const self = this;
      for (let i = 0; i < this.allFamily.length; i++) {
        if (this.allFamily[i].name.indexOf(val) >= 0 || this.allFamily[i].code.indexOf(val) >= 0) {
          newArr.push(this.allFamily[i]);
        }
      }
      newArr.forEach(function (value, index, array) {
        //在每个城市加一个capitalize的标识代表首字母
        value.capitalize = self
          .makePy(value.name)[0]
          .toUpperCase()
          .substr(0, 1);
        if (!obj[value.capitalize]) {
          obj[value.capitalize] = true;
          arr.push(value.capitalize);
        }
      });
      if (val == "") {
        this.getAllFamily();
      } else {
        this.searchArr = newArr;
        this.letterArr = arr;
      }
    },

    //高亮行
    familyActive(name, code) {
      this.rightLoading = true
      this.active = name;
      this.code = code;
      let param = {
        UserId: this.UserId,
        code: code,
        ProjId: this.ProjId
      };
      this.tabsFalg = false
      getTableHeader(param).then(result => {
        this.rightLoading = false
        if (result.data.Result == "success") {
          this.tabsFalg = true
          this.labelKey = this.arrayCnt(result.data.Content);
        } else {
          this.dialogVisible = true;
          this.ajaxMsg = "请求出错";
        }
      });
    },

    //处理头部函数
    arrayCnt(arr) {
      let first = {}
      //一级循环出来一级标签
      arr.map(item => {
        if (!!first[item.FirstTag] && first[item.FirstTag].length) {
        } else {
          first[item.FirstTag] = []
        }
        first[item.FirstTag].push({
          InfoPointName: item.InfoPointName,
          InfoPointCode: item.InfoPointCode,
          Visible: item.Visible,
          SecondTag: item.SecondTag
        })
      })
      //循环出第二级标签
      let sound = []
      for (let key in first) {
        let obj = {
          FirstTag: key,
          details: {}
        }
        first[key].map(item => {
          if (!!obj.details[item.SecondTag] && obj.details[item.SecondTag].length) {

          } else {
            obj.details[item.SecondTag] = []
          }
          obj.details[item.SecondTag].push({
            InfoPointName: item.InfoPointName,
            InfoPointCode: item.InfoPointCode,
            Visible: item.Visible,
          })
        })
        sound.push(obj)
      }

      //循环出制定的数据结构
      let newArr = sound.map(item => {
        let copyarr = Object.assign(item.details, {})
        for (let k in item.details) {
          if (item.details instanceof Array) {
          } else {
            item.details = []
          }
          item.details.push({
            SecondTag: k,
            details: copyarr[k]
          })
        }
        return item
      })
      return newArr
    },

    //所选字母淡入淡出效果
    moveScroll(character) {
      const LetterBox = $("#letter");
      const Initials = $(".initials");
      Initials.css("background", "rgba(145,145,145,0.6)");
      if (self.timeOut) {
        clearTimeout(self.timeOut);
      }
      self.timeOut = setTimeout(function () {
        Initials.css("background", "rgba(145,145,145,0)");
        LetterBox.fadeOut();
      }, 1000);
      if (character == undefined) {
        $(".left_main").animate({ scrollTop: "0px" }, 300); //点击第一个滚到顶部
      } else {
        if ($("#" + character).length > 0) {
          LetterBox.html(character).fadeIn();
          const LetterTop = document.getElementById(character).offsetTop;
          $(".left_main").animate({ scrollTop: LetterTop }, 300);
        }
      }
    },

    //排序方法
    familySort() {
      let obj = {};
      let arr = [];
      const self = this;
      this.allFamily.forEach(function (value, index, array) {
        //在每个城市加一个capitalize的标识代表首字母
        value.capitalize = self
          .makePy(value.name)[0]
          .toUpperCase()
          .substr(0, 1);
        if (!obj[value.capitalize]) {
          obj[value.capitalize] = true;
          arr.push(value.capitalize);
        }
      });
      //字母列表排序
      this.letterArr = arr.sort();
    },

    //对字符串进行截取
    makePy(str) {
      if (typeof str != "string")
        throw new Error(-1, "函数makePy需要字符串类型参数!");
      let arrResult = new Array(); //保存中间结果的数组
      for (let i = 0, len = str.length; i < len; i++) {
        //获得unicode码
        let ch = str.charAt(i);
        //检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理
        arrResult.push(this.checkCh(ch));
      }
      //处理arrResult,返回所有可能的拼音首字母串数组
      return this.mkRslt(arrResult);
    },

    //处理中文字符
    checkCh(ch) {
      let uni = ch.charCodeAt(0);
      //如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
      if (uni > 40869 || uni < 19968) return ch; //dealWithOthers(ch);
      //检查是否是多音字,是按多音字处理,不是就直接在this.strChineseFirstPY字符串中找对应的首字母
      return this.oMultiDiff[uni]
        ? this.oMultiDiff[uni]
        : this.strChineseFirstPY.charAt(uni - 19968);
    },

    //对数组添加首字母
    mkRslt(arr) {
      let arrRslt = [""];
      for (let i = 0, len = arr.length; i < len; i++) {
        let str = arr[i];
        let strlen = str.length;
        if (strlen == 1) {
          for (let k = 0; k < arrRslt.length; k++) {
            arrRslt[k] += str;
          }
        } else {
          let tmpArr = arrRslt.slice(0);
          arrRslt = [];
          for (let k = 0; k < strlen; k++) {
            //复制一个相同的arrRslt
            let tmp = tmpArr.slice(0);
            //把当前字符str[k]添加到每个元素末尾
            for (let j = 0; j < tmp.length; j++) {
              tmp[j] += str.charAt(k);
            }
            //把复制并修改后的数组连接到arrRslt上
            arrRslt = arrRslt.concat(tmp);
          }
        }
      }
      return arrRslt;
    }
  }
};
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
}
#family {
  overflow-y: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  select {
    height: 28px;
    line-height: 40px;
    option {
      height: 28px;
    }
  }
  header {
    height: 2rem;
    margin: 0 0.5rem;
  }
  main {
    flex: 1;
    margin-top: 1rem;
    overflow: hidden;
    .left_main {
      width: 24rem;
      float: left;
      overflow-y: auto;
      height: 100%;
      position: relative;
      #letter {
        width: 100px;
        height: 100px;
        border-radius: 5px;
        font-size: 75px;
        color: #555;
        text-align: center;
        line-height: 100px;
        background: rgba(145, 145, 145, 0.6);
        position: fixed;
        left: 10rem;
        top: 50%;
        margin: -50px 0px 0px -50px;
        z-index: 99;
        display: none;
      }
      .initials {
        position: fixed;
        top: 3rem;
        left: 22rem;
        height: 100%;
        width: 16px;
        text-align: center;
        font-size: 12px;
        padding-top: 100px;
        z-index: 99;
        background: white !important;
        li {
          cursor: pointer;
          font-size: 14px;
        }
        li:hover {
          color: #409eff;
        }
      }
      .family_title {
        font-size: 18px;
        font-weight: bold;
        padding: 5px 10px;
        background-color: #ccc;
      }
      .family_content {
        background-color: #fff;
      }
      .family_item {
        padding: 5px 10px;
        border-bottom: 1px solid #eee;
        color: #333;
        cursor: pointer;
      }
      .family_item:hover {
        background-color: #409eff;
        color: #fff;
      }
      .active {
        background-color: #409eff;
        color: #fff;
      }
    }
    .right_main {
      float: left;
      overflow-y: auto;
      width: calc(100% - 24rem);
      height: 100%;
      .right_main_msg {
        padding-left: 10px;
        padding-top: 200px;
        font-size: 40px;
        font-weight: 600;
      }
      .label_main {
        p {
          font-size: 18px;
          padding-left: 30px;
          color: #333;
          line-height: 40px;
        }
        ul {
          display: inline-block;
          width: 240px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>

