<template>
  <div id="equip_pro">
    <div class="title">设备实例本地名称</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="属性" name="first">
        <div class="property">
          <div class="base-property">
            <div>
              <span>W</span>
              <el-input
                style="width: 74px; margin-left: 6px"
                size="mini"
                v-model="width"
                @input="changeWidth"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div>
              <span>H</span>
              <el-input
                style="width: 74px; margin-left: 6px"
                size="mini"
                v-model="height"
                @input="changeHeight"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
            >
              <i class="el-icon-link"></i>
            </el-upload>
          </div>
          <div class="base-property base-property-left">
            <div>
              <span>R</span>
              <el-input
                style="width: 74px; margin-left: 6px"
                size="mini"
                v-model="width"
                @input="changeWidth"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="imgUpdate">
            <div class="img-tit">设计图</div>
            <div class="btn-list">
              <Button type="default">上传文件</Button>
            </div>
          </div>
          <div class="imgUpdate">
            <div class="img-tit">附加数据</div>
            <div class="textarea">
              <el-input type="textarea" :rows="2" placeholder="请输入内容">
              </el-input>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="信息点" name="second">
        <div class="msgPoint-box">
          <Input
            class="baseItemInput"
            :width="200"
            iconType="search"
            placeholder="搜索信息点"
            v-model="getPressMsg"
            @pressEnter="pressEnter"
            @clear="pressEnter"
          />
          <div class="msgPoint-list" v-show="!pressMsgData.length">
            <div class="type-list" v-for="(item, key) in msgData" :key="key">
              <div class="type-title" @click="clips(item)">
                <i
                  v-bind:class="[
                    item.showChildren ? 'caret-icon-active' : 'caret-icon',
                    'el-icon-caret-bottom',
                  ]"
                ></i>
                <span>{{ item.msgType }}</span>
              </div>
              <el-collapse-transition>
                <ul class="list" v-show="item.showChildren">
                  <li v-for="(a, b) in item.children" :key="'i' + b">
                    <Checkbox
                      :checked="a.checked ? 'checked' : 'uncheck'"
                      @change="changeCheck(a)"
                    />
                    <p>{{ a.msgName }}</p>
                  </li>
                </ul>
              </el-collapse-transition>
            </div>
          </div>
          <ul class="msgPoint-list-press" v-show="pressMsgData.length">
            <li v-for="(a, b) in pressMsgData" :key="b">
              <Checkbox
                :checked="a.checked ? 'checked' : 'uncheck'"
                @change="changeCheck(a)"
              />
              <p>{{ a.msgName }}</p>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { msgData } from "./msgData.js";
import { queryEquipMsg } from "@/api/editer";
export default {
  props: ["InfoPointList", "EquipId"],
  data() {
    return {
      activeName: "first",
      width: "",
      height: "",
      checked1: "checked",
      isShow: true,
      msgData: [],
      pressMsgData: [], // 搜索后得信息点数组
      getPressMsg: "", //输入信息
    };
  },
  methods: {
    // 折叠信息点操作
    clips(item) {
      item.showChildren = !item.showChildren;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    changeWidth() {},
    changeHeight() {},
    eforeAvatarUpload() {},
    // 切换选中选项
    changeCheck(item) {
      item.checked = !item.checked;
    },
    // 搜索回车操作
    pressEnter() {
      const list = [];
      if (!this.getPressMsg) {
        this.pressMsgData = [];
        return;
      }
      // 对信息点相同得提取出来
      this.msgData.forEach((item) => {
        item.children.forEach((a) => {
          if (a.msgName.includes(this.getPressMsg)) {
            list.push(a);
          }
        });
      });
      this.pressMsgData = list;
    },
  },
  watch: {
    EquipId(val) {
      const data = {
        Filters: `id = '${val}'`,
      };
      queryEquipMsg(data).then((res) => {
        console.log("获取到相应的信息点数据", res);
      });

      // 模拟接口
      setTimeout(() => {
        let arr = [];
        // 勾选设备中选中的对象
        if (this.InfoPointList && this.InfoPointList.length) {
          msgData.map((item) => {
            this.InfoPointList.forEach((a) => {
              if (a.id == item.id) {
                item.checked = true;
              }
            });
            return item;
          });
        }
        //  生成二级树
        msgData.forEach((item) => {
          if (arr.length) {
            let index = -1;
            arr.forEach((aItem) => {
              if (aItem.msgTypeId == item.msgTypeId) {
                index = 1;
                aItem.children.push(item);
                aItem.number++;
              }
            });
            if (index == -1) {
              let obj = {
                msgTypeId: item.msgTypeId,
                msgType: item.msgType,
                children: [item],
                number: 1,
                showChildren: true,
              };
              arr.push(obj);
            }
          } else {
            let obj = {
              msgTypeId: item.msgTypeId,
              msgType: item.msgType,
              children: [],
              number: 1,
              showChildren: true,
            };
            obj.children.push(item);
            arr.push(obj);
          }
        });
        this.msgData = arr;
        console.log("this.msgData", this.msgData);
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#equip_pro {
  .title {
    height: 47px;
    border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
  }
  .property {
    .base-property {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .base-property-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 12px;
      padding-top: 12px;
      box-sizing: border-box;
    }
    .imgUpdate {
      border-top: 1px solid #e4e5e7;
      width: 100%;
      margin-bottom: 16px;
      padding: 0 12px 0 12px;
      box-sizing: border-box;
      .img-tit {
        margin: 12px 0 12px 0;
        color: #646a73;
        font-size: 12px;
      }
    }
  }
  .msgPoint-box {
    width: 100%;
    height: 100%;
    padding: 0 12px 0 12px;
    box-sizing: border-box;
    .msgPoint-list {
      margin-top: 20px;
      .type-list {
        .type-title {
          cursor: pointer;
          margin-bottom: 10px;
          span {
            margin-left: 12px;
          }
        }
        ul {
          width: 100%;
          padding-left: 28px;
          li {
            display: flex;
            height: 40px;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
            p {
              margin-left: 12px;
            }
            &:hover {
              background: #f5f6f7;
            }
          }
        }
      }
    }
    .msgPoint-list-press {
      margin-top: 12px;
      li {
        display: flex;
        height: 40px;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        p {
          margin-left: 12px;
        }
        &:hover {
          background: #f5f6f7;
        }
      }
    }
  }
  .caret-icon {
    animation: nowhirling 0.2s linear forwards;
  }
  .caret-icon-active {
    animation: whirling 0.2s linear forwards;
  }
  @keyframes whirling {
    0% {
      transform: rotate(-90deg);
      -ms-transform: rotate(-90deg); /* Internet Explorer */
      -moz-transform: rotate(-90deg); /* Firefox */
      -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
      -o-transform: rotate(-90deg); /* Opera */
    }
    100% {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg); /* Internet Explorer */
      -moz-transform: rotate(0deg); /* Firefox */
      -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
      -o-transform: rotate(0deg); /* Opera */
    }
  }
  @keyframes nowhirling {
    0% {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg); /* Internet Explorer */
      -moz-transform: rotate(0deg); /* Firefox */
      -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
      -o-transform: rotate(0deg); /* Opera */
    }
    100% {
      transform: rotate(-90deg);
      -ms-transform: rotate(-90deg); /* Internet Explorer */
      -moz-transform: rotate(-90deg); /* Firefox */
      -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
      -o-transform: rotate(-90deg); /* Opera */
    }
  }
}
</style>