<!-- webview only --><!-- slot -->
<template>
  <div class="bl___cover-view"
       @click="clickEvent"
       @touchstart="touchstartEvent"
       @touchmove="touchmoveEvent"
       @touchend="touchendEvent"
       @touchcancel="touchcancelEvent"
       @framechange="framechange">
    <slot></slot>
  </div>
</template>

<script>
import shortId from 'shortid';
import {styleToObj, judgeEnv, toHump, compareVersion, naDataToObj} from '../util/logic';

// NA可识别样式
const needStyleMapping = [
  'direction',
  'flexDirection',
  'justifyContent',
  'alignContent',
  'alignItems',
  'alignSelf',
  'flexWrap',
  'display',
  'position',
  'flex',
  'flexGrow',
  'flexShrink',
  'flexBasis',
  'left',
  'top',
  'right',
  'bottom',
  'marginLeft',
  'marginTop',
  'marginRight',
  'marginBottom',
  'paddingLeft',
  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'width',
  'height',
  'minWidth',
  'minHeight',
  'maxWidth',
  'maxHeight',
  'borderWidth',
  'borderRadius',
  'borderColor',
  'borderStyle',
  'textAlign',
  'fontSize',
  'fontStyle',
  'textOverflow',
  'fontWeight',
  'color',
  'backgroundColor',
  'lineHeight',
  'textDecoration',
  'wordWrap',
  'whiteSpace',
  'opacity',
  'overflow',
  'fontFamily'
];

// 建立不需要进行劫持的数据
if (!global.__bili_coverView_cache) global.__bili_coverView_cache = {};

export default {
  name: 'Bili_CoverView',
  data() {
    return {
      observer: null,
      isRootCoverView: false,
      nodeId: '',
      classKey: '',
      isSupport: false
    };
  },
  props: {
    "animation": {
      type: String,
      default: ''
    },
    "zIndex": {
      type: Number,
      default: 0
    }
  },
  watch: {
    animation(value) {
      this.changeAttr('animation', value);
    }
  },
  methods: {
    changeAttr(key, value) {
      let _obj = {};
      _obj[key] = value;
      SmallApp.postMessage({
        "module": "dom", // cover-view 的所有通信固定使用 dom
        "method": "updateAttrs", // addElement...
        "args": {
          id: this.$el.getAttribute('nodeid'),
          attrs: _obj
        }
      });
    },
    framechange(e) {
      // 修复默认v-show为false，然后再设置为true，cover-view展示错误。
      if (getComputedStyle(this.$el).display !== 'none') {
        if (!this.isRootCoverView) {
          naDataToObj(this.$el, e.data);
        } else {
          let faStyle = this.getStyleByClassAndAttr(this.$el);
          naDataToObj(this.$el, e.data, {
            type: 'cover-view',
            setWidth: faStyle.width && faStyle.width === 'auto',
            setHeight: faStyle.height && faStyle.height === 'auto',
            callback: this.updateRootStyle
          });
        }
      }
    },
    clickEvent(e) {
      this.$emit('click', {
        detail: e.data
      });
    },
    touchstartEvent(e) {
      this.$emit('touchstart', {
        detail: e.data
      });
    },
    touchmoveEvent(e) {
      this.$emit('touchmove', {
        detail: e.data
      });
    },
    touchendEvent(e) {
      this.$emit('touchend', {
        detail: e.data
      });
    },
    touchcancelEvent(e) {
      this.$emit('touchcancel', {
        detail: e.data
      });
    },
    // handleMessage，作为事件的触发，该方法NA会直接调用。
    handleMessage(message) {
      if (message.type === 'native-component') {
        this.$emit(message.event.type, message.event);
      }
    },
    // 检查标记，是否是根节点
    searchIsRoot(parent) {
      if (parent) {
        if (parent.$options._componentTag === 'cover-view') {
          this.isRootCoverView = false;
        } else {
          this.searchIsRoot(parent.$parent);
        }
      } else {
        this.isRootCoverView = true;
      }
    },
    // 节点打标处理
    generateSign(vnode, fa, isUpdate) {
      let that = this;
      let temp = {
        children: [],
        id: '',
        sel: '',
        attrs: {},
        style: {},
        events: []
      };

      if (isUpdate) {
        temp = {
          children: [],
          id: '',
          style: {}
        };
      }

      let isContinue = true;

      // 是否是纯text节点
      if (vnode.tag) {
        // 1. id处理
        if (!vnode.elm._nodeId) {
          vnode.elm._nodeId = shortId.generate();
          vnode.elm.setAttribute('nodeId', vnode.elm._nodeId);
          // 缓存虚拟vnode
          global.__bili_coverView_cache[this._uid][vnode.elm._nodeId] = {
            vnode: vnode
          };
        }

        temp.id = vnode.elm._nodeId;

        // if (that.isRootCoverView) {
        //     that.nodeId = vnode.elm._nodeId;
        // }

        if (!isUpdate) {
          // 2. 处理事件
          if (!vnode.elm._event) {
            let _event = (vnode.data ? vnode.data.on : null) || (vnode.componentOptions ? vnode.componentOptions.listeners : null);
            if (_event) {
              let _events = Object.keys(_event);
              _events.push('framechange');
              vnode.elm._event = _events;
              // vnode.elm.setAttribute('event', Object.keys(_event));
            }
          }

          temp.events = vnode.elm._event || ['framechange'];

          // 3. 处理sel标签
          if (!vnode.elm._sel) {
            let _sel = vnode.componentOptions ? vnode.componentOptions.tag : vnode.tag;
            // console.log('_sel', _sel);
            vnode.elm._sel = _sel;
            vnode.elm.setAttribute('coverType', _sel);
            // vnode.elm.setAttribute('sel', _sel);
          }

          temp.sel = vnode.elm._sel || '';


          // 4. 处理attrs
          if (!vnode.elm._attrs) {
            let _attrs = {};
            if (vnode.data && vnode.data.attrs) {
              _attrs = this.objectToHump(vnode.data.attrs);
            }

            if (vnode.componentOptions && vnode.componentOptions.propsData) {
              Object.assign(_attrs, vnode.componentOptions.propsData);
            }

            vnode.elm._attrs = _attrs;

            // 针对页数组件属性处理，暂时还没有思路放到组件里
            if (temp.sel === 'cover-textarea' || temp.sel === 'cover-input') {
              if (vnode.elm._attrs.placeholderClass) {
                let _getStyleByClass = window.__smallAppFE.COVERVIEWDATA[this.classKey][vnode.elm._attrs.placeholderClass];
                if (_getStyleByClass) {
                  // 特殊处理placeholder-class的样式
                  if (vnode.elm._attrs.placeholderStyle) {
                    Object.assign(_getStyleByClass, vnode.elm._attrs.placeholderStyle);
                  }
                  vnode.elm._attrs.placeholderStyle = _getStyleByClass;
                }
              }
            }
          }

          temp.attrs = vnode.elm._attrs || {};
        }


        // 5. 处理样式
        // const allStyle = window.getComputedStyle(vnode.elm);
        // const styleKeys = Object.keys(allStyle);
        // let regStr = '';
        //
        // needStyleMapping.forEach((x, i) => {
        //     if (i !== needStyleMapping.length - 1) {
        //         regStr += `^${x}$|`;
        //     } else {
        //         regStr += `^${x}$`;
        //     }
        // });
        // const reg = new RegExp(regStr);
        // styleKeys.forEach(x => {
        //     if (reg.test(x)) {
        //         if (x === 'textDecoration') {
        //             // 特殊处理X5内核传递参数不一致
        //             if (allStyle[x] !== '' && / /.test(allStyle[x])) {
        //                 temp.style[x] = /^(.*?) /.exec(allStyle[x])[1]
        //             }
        //         } else {
        //             temp.style[x] = allStyle[x];
        //         }
        //     }
        // });

        // 6. 处理样式, 处理成最外层节点样式，重新计算最外层的x和y坐标
        if (!fa) {
          const allStyle = window.getComputedStyle(vnode.elm);

          // 判断cover-view根节点
          that.nodeId = vnode.elm._nodeId;

          // 全局挂载映射节点
          if (!window.__smallAppFE) window.__smallAppFE = {};
          if (!window.__smallAppFE.coverMapping) window.__smallAppFE.coverMapping = {};
          window.__smallAppFE.coverMapping[that.nodeId] = true;

          // 计算 x和y
          let positionInfo = vnode.elm.getBoundingClientRect();
          let isFixed = allStyle.getPropertyValue('position') === 'fixed';
          // let marginTop = allStyle.getPropertyValue('margin-top').replace('px', '');
          // let marginLeft = allStyle.getPropertyValue('margin-left').replace('px', '');

          let top = null, left = null;

          if (isUpdate) {
            if (isFixed) {
              top = positionInfo.top + 'px';
              left = positionInfo.left + 'px';
            } else {
              top = (positionInfo.top + SmallApp.getScrollData('top')) + 'px';
              left = (positionInfo.left + SmallApp.getScrollData('left')) + 'px';
            }

            // console.log('top + left', top, left);

            let _diffRes = {};
            let tempValue = global.__bili_coverView_cache[this._uid][vnode.elm._nodeId].style;
            let isSame = true;

            // 动态add
            if (tempValue) {
              this.deleteWidthAndHeight(vnode.elm, tempValue);
              needStyleMapping.forEach(_x => {
                let _isSame = true;
                if (_x === 'left' || _x === 'top') {
                  if (_x === 'left') {
                    _isSame = tempValue[_x] === left;
                    if (!_isSame) _diffRes[_x] = left;
                  } else {
                    _isSame = tempValue[_x] === top;
                    if (!_isSame) _diffRes[_x] = top;
                  }
                } else {
                  if (!(_x === 'marginTop' || _x === 'marginLeft' || _x === 'marginRight' || _x === 'marginBottom' || _x === 'bottom')) {
                    _isSame = tempValue[_x] === allStyle[_x];
                    if (!_isSame) _diffRes[_x] = allStyle[_x];
                  }
                }
                isSame = isSame && _isSame;
              });
              this.deleteWidthAndHeight(vnode.elm, _diffRes);
            } else {
              isSame = false;
            }

            // 如果样式相同无变化，则直接return
            if (isSame) {
              return false;
            } else {
              if (tempValue) {
                // 变更样式合并上去
                Object.assign(tempValue, _diffRes);
              } else {
                tempValue = this.getStyleByClassAndAttr(vnode.elm);
              }

              temp.style = tempValue;
            }

            // 外层样式更新，不继续递归解析
            isContinue = false;

          } else {
            needStyleMapping.map(x => {
              temp.style[x] = allStyle[x];
            });

            // 端上需要最外层删除的
            delete temp.style.marginTop;
            delete temp.style.marginLeft;
            delete temp.style.marginRight;
            delete temp.style.marginBottom;
            delete temp.style.bottom;

            if (isFixed) {
              temp.style.top = positionInfo.top + 'px';
              temp.style.left = positionInfo.left + 'px';
            } else {
              temp.style.top = (positionInfo.top + SmallApp.getScrollData('top')) + 'px';
              temp.style.left = (positionInfo.left + SmallApp.getScrollData('left')) + 'px';
            }

            // // 特殊处理根节点width和height
            // let faStyle = this.getStyleByClassAndAttr(vnode.elm);
            // coverArr.push(faStyle);
            // if (!faStyle.width) {
            //     delete temp.style.width;
            // }
            //
            // if (!faStyle.height) {
            //     delete temp.style.height;
            // }
            this.deleteWidthAndHeight(vnode.elm, temp.style);

            global.__bili_coverView_cache[this._uid][vnode.elm._nodeId].style = temp.style;
          }
        } else {
          // 6. 处理样式，内部样式节点
          temp.style = this.getStyleByClassAndAttr(vnode.elm);
        }

      } else {
        // 是text节点，需要处理
        // 1. 将text注册到上个节点的attrs里
        // 2. 删除纯text节点
        if (!fa.attrs) fa.attrs = {};
        fa.attrs.text = vnode.text;

        return null;
      }

      if (isContinue) {
        let children = vnode.children || (vnode.componentOptions ? vnode.componentOptions.children : null);
        if (children && children.length > 0) {
          let _children = children.map(childVnode => {
            return this.generateSign(childVnode, temp, isUpdate);
          });

          temp.children = _children.filter(x => x);
        }
      } else {
        temp.children = [];
      }

      return temp;
    },
    deleteWidthAndHeight(elm, style) {
      // 特殊处理根节点width和height
      let faStyle = this.getStyleByClassAndAttr(elm);

      if (faStyle.width === 'auto') {
        delete style.width;
      }

      if (!faStyle.height || faStyle.height === 'auto') {
        delete style.height;
      }
      // console.log('--- faStyle ---', faStyle, style)
    },
    getStyleByClassAndAttr(el) {
      let _classKey = el.getAttribute('classkey');
      // 对于cover-view中存在非 cover-xx 相关节点，忽略样式。
      if (!_classKey) return {};
      let _tempInnerStyle = window.__smallAppFE.COVERVIEWDATA[_classKey];
      let _classList = Array.from(el.classList);
      let _outputStyle = {};
      _classList.forEach(x => {
        // console.log('调试：class，', x, _tempInnerStyle[x]);
        if (_tempInnerStyle[x]) {
          Object.assign(_outputStyle, _tempInnerStyle[x]);
        }
      });

      // console.log('class样式：', JSON.stringify(_outputStyle));

      // b. 处理style样式
      let _elStyle = el.getAttribute('style');
      if (_elStyle) Object.assign(_outputStyle, styleToObj(_elStyle));

      // console.log('当前节点合并样式：', JSON.stringify(_outputStyle))
      return _outputStyle;
    },
    updateRootStyle() {
      SmallApp.waitStyleOver().then(() => {
        let _dataRes = this.generateSign(this.$vnode, undefined, true);
        // console.log('根节点是否变化：updateStyleObserver:', _dataRes, this.nodeId);
        // 有数据变化，需要将获取数据发送给NA
        if (_dataRes) {
          // console.log('SmallApp.postMessage......');
          // 属性变化
          SmallApp.postMessage({
            "module": "dom", // cover-view 的所有通信固定使用 dom
            "method": "updateStyle", // addElement...
            "args": _dataRes
          });
        }
      });
    },
    updateStyleObserver(domList) {
      const that = this;
      let temp = domList.filter(x => {
        return (x.target && x.target.getAttribute && x.target.getAttribute('nodeid')) || (x.target.parentElement && x.target.parentElement.getAttribute && x.target.parentElement.getAttribute('nodeid'));
      });
      // console.log('触发：updateStyleObserver', temp.length);
      if (temp.length === 0) {
        // console.log('更新根节点');
        /**
         * 获取解析cover-view存在数据
         *   如果最外层样式都一样则直接返回false，不需要向NA发消息
         *   如果返回对象，则需要将最外层x和y赋值给最外层style - left、top 进行外层样式覆盖，然后发给NA
         * */
        that.updateRootStyle();
      } else {
        // console.log('触发：属性更新，有nodeid', temp);
        temp.forEach(x => {
          let _attrNodeId = '';
          if (x.target.nodeName === '#text') {
            _attrNodeId = x.target.parentElement.getAttribute('nodeid');
          } else {
            _attrNodeId = x.target.getAttribute('nodeid');
          }
          if (that.nodeId === _attrNodeId || that.$el.querySelector(`[nodeid="${_attrNodeId}"]`)) {
            // 属性变化
            if (x.type === "attributes") {
              // nodeid属性更新不触发，抛弃掉
              if (x.attributeName === 'nodeid' || x.attributeName === "covertype") return;
              if (x.attributeName === 'style' || x.attributeName === 'class') {
                // console.log('更新style.....', _attrNodeId, window.__smallAppFE.coverMapping[_attrNodeId]);
                // 独立判断更新根节点样式
                if (window.__smallAppFE.coverMapping[_attrNodeId]) {
                  that.updateRootStyle();
                } else {
                  // 属性变化
                  SmallApp.postMessage({
                    "module": "dom", // cover-view 的所有通信固定使用 dom
                    "method": "updateStyle", // addElement...
                    "args": {
                      id: _attrNodeId,
                      style: that.getStyleByClassAndAttr(x.target)
                    }
                  });
                  // console.log('触发：postMessage:', {
                  //   "module": "dom", // cover-view 的所有通信固定使用 dom
                  //   "method": "updateStyle", // addElement...
                  //   "args": {
                  //     id: _attrNodeId,
                  //     style: that.getStyleByClassAndAttr(x.target)
                  //   }
                  // });
                }
              } else {
                // 如果是cover-view变化，注释：交由组件内部处理
                // if (x.target.getAttribute('covertype') === 'cover-view') {
                //     let _attr = {};
                //     _attr[toHump(x.attributeName)] = x.target.getAttribute(x.attributeName);
                //     console.log('触发：属性更新：', x.attributeName, x.target.getAttribute(x.attributeName));
                //     // 属性变化
                //     SmallApp.postMessage({
                //         "module": "dom", // cover-view 的所有通信固定使用 dom
                //         "method": "updateAttrs", // addElement...
                //         "args": {
                //             id: _attrNodeId,
                //             attrs: _attr
                //         }
                //     });
                //     console.log('触发：postMessage:', {
                //         "module": "dom", // cover-view 的所有通信固定使用 dom
                //         "method": "updateAttrs", // addElement...
                //         "args": {
                //             id: _attrNodeId,
                //             attrs: _attr
                //         }
                //     });
                // }
              }
            } else if (x.type === "childList") {
              // 增加 删除
              if (x.removedNodes.length > 0 && x.addedNodes.length > 0) {
                // console.log('触发：同时有节点既删除又增加...');
                // text节点变化
                for (let i = 0; i < x.addedNodes.length; i++) {
                  let y = x.addedNodes[0];
                  if (y.nodeName === '#text') {
                    // console.log('触发：text节点值变化');
                    let _parentNodeId = y.parentElement.getAttribute('nodeid');
                    // 属性变化
                    SmallApp.postMessage({
                      "module": "dom", // cover-view 的所有通信固定使用 dom
                      "method": "updateAttrs", // addElement...
                      "args": {
                        id: _parentNodeId,
                        attrs: {
                          text: y.data
                        }
                      }
                    });
                    // console.log('触发：postMessage，', {
                    //     "module": "dom", // cover-view 的所有通信固定使用 dom
                    //     "method": "updateAttrs", // addElement...
                    //     "args": {
                    //         id: _parentNodeId,
                    //         attrs: {
                    //             text: y.data
                    //         }
                    //     }
                    // });
                  }
                }
              } else {
                if (x.removedNodes.length > 0) {
                  for (let i = 0; i < x.removedNodes.length; i++) {
                    let y = x.removedNodes[i];
                    if (y.nodeName === '#comment') return;
                    // console.log('触发：删除节点，', x);
                    if (y.nodeName === '#text') {
                      // console.log('触发：删除文本', x);
                      // 属性变化
                      SmallApp.postMessage({
                        "module": "dom", // cover-view 的所有通信固定使用 dom
                        "method": "updateAttrs", // addElement...
                        "args": {
                          id: x.target.getAttribute('nodeid'),
                          attrs: {
                            text: ''
                          }
                        }
                      });

                      // console.log('触发：postMessage，', {
                      //     "module": "dom", // cover-view 的所有通信固定使用 dom
                      //     "method": "updateAttrs", // addElement...
                      //     "args": {
                      //         id: x.target.getAttribute('nodeid'),
                      //         attrs: {
                      //             text: y.data
                      //         }
                      //     }
                      // });
                    } else {
                      SmallApp.postMessage({
                        "module": "dom", // cover-view 的所有通信固定使用 dom
                        "method": "removeElement", // addElement...
                        "args": {id: y.getAttribute('nodeid')}
                      });

                      // console.log('触发：postMessage：', {
                      //     "module": "dom", // cover-view 的所有通信固定使用 dom
                      //     "method": "removeElement", // addElement...
                      //     "args": {id: y.getAttribute('nodeid')}
                      // });

                      // 删除缓存节点信息
                      delete global.__bili_coverView_cache[this._uid][y.getAttribute('nodeid')];
                    }
                  }
                }

                if (x.addedNodes.length > 0) {
                  for (let i = 0; i < x.addedNodes.length; i++) {
                    let z = x.addedNodes[i];
                    if (z.nodeName === '#comment') return;
                    // console.log('触发：增加节点...');
                    if (z.nodeName === '#text') {
                      // console.log('触发：新增文本');
                      // 属性变化
                      SmallApp.postMessage({
                        "module": "dom", // cover-view 的所有通信固定使用 dom
                        "method": "updateAttrs", // addElement...
                        "args": {
                          id: x.target.getAttribute('nodeid'),
                          attrs: {
                            text: z.data
                          }
                        }
                      });

                      // console.log('触发：postMessage，', {
                      //     "module": "dom", // cover-view 的所有通信固定使用 dom
                      //     "method": "updateAttrs", // addElement...
                      //     "args": {
                      //         id: x.target.getAttribute('nodeid'),
                      //         attrs: {
                      //             text: z.data
                      //         }
                      //     }
                      // });
                    } else {
                      let _parentVnode = x.target.__vue__.$vnode;
                      let _nodeIndex = -1;
                      let _children = _parentVnode.children || (_parentVnode.componentOptions ? _parentVnode.componentOptions.children : null);
                      let _addVnode = null;
                      let _isContinue = true, _continueIndex = 0;
                      while (_isContinue) {
                        if (_children[_continueIndex].tag) {
                          _nodeIndex += 1;
                          if (!_children[_continueIndex].elm._nodeId) {
                            _addVnode = _children[_continueIndex];
                            _isContinue = false;
                          }
                        }
                        _continueIndex++;
                      }
                      // console.log('触发：计算当前新增在父节点位置', _nodeIndex);
                      let _addData = this.generateSign(_addVnode, true);
                      _addData.parentId = _attrNodeId;
                      _addData.index = _nodeIndex;

                      SmallApp.postMessage({
                        "module": "dom", // cover-view 的所有通信固定使用 dom
                        "method": "addElement", // addElement...
                        "args": _addData
                      });
                      // console.log('触发：postMessage,', {
                      //     "module": "dom", // cover-view 的所有通信固定使用 dom
                      //     "method": "addElement", // addElement...
                      //     "args": _addData
                      // });

                      // 更新父节点虚拟id
                      global.__bili_coverView_cache[this._uid][_attrNodeId] = _parentVnode;
                    }
                  }
                }
              }
            } else if (x.type === 'characterData') {
              // console.log('触发：数据更新.....');
              SmallApp.postMessage({
                "module": "dom", // cover-view 的所有通信固定使用 dom
                "method": "updateAttrs", // addElement...
                "args": {
                  id: _attrNodeId,
                  attrs: {
                    text: x.target.data
                  }
                }
              });
              // console.log('触发：postMessage', {
              //     "module": "dom", // cover-view 的所有通信固定使用 dom
              //     "method": "updateAttrs", // addElement...
              //     "args": {
              //         id: _attrNodeId,
              //         attrs: {
              //             text: x.target.data
              //         }
              //     }
              // });
            }
          } else {
            that.updateRootStyle();
          }
        });
      }
    },
    objectToHump(obj) {
      if (obj) {
        let tempKeys = Object.keys(obj);
        let _output = {};
        tempKeys.forEach(x => {
          if (obj[x] !== '') {
            _output[toHump(x)] = obj[x];
          }
        });
        return _output;
      } else {
        return {};
      }
    }
  },
  created() {

  },
  mounted() {
    const that = this;
    let _runEnv = judgeEnv();
    this.searchIsRoot(this.$parent);

    // 根节点处理数据
    if (this.isRootCoverView) {
      if (_runEnv.env === 'Render') {
        let _systemInfo = bl.getSystemInfoSync();
        // 增加版本限制，只有大于等于6.21.0才能使用
        if (compareVersion(_systemInfo.version, '6.21.0') > -1) {
          this.isSupport = true;
          this.classKey = this.$el.getAttribute('classkey');
          let temp = this.$el.getAttribute('class');
          // 定义zIndexByJs class  层级计算使用
          this.$el.setAttribute('class', `${temp} zIndexByJs`);
          // 用户自定义层级
          this.$el.setAttribute('data-zIndex', this.zIndex);
          // 引入层级算法，自动保持层级
          SmallApp.computeIndex();
          // 数据缓存，做diff用
          global.__bili_coverView_cache[this._uid] = {};
          SmallApp.waitStyleOver().then(() => {
            let data = that.generateSign(that.$vnode);
            SmallApp.postMessage({
              "module": "dom", // cover-view 的所有通信固定使用 dom
              "method": "createRootElement", // addElement...
              "zIndex": Number(this.$el.getAttribute('B-zIndex')),
              "args": data
            });

            // 监控dom，只有cover-view创建完成才允许开启监控。
            that.observer = new MutationObserver((x) => {
              // console.log('触发：MutationObserver', x);
              that.updateStyleObserver(x);
            });

            that.observer.observe(document.body, {
              attributes: true,
              childList: true,
              characterData: true,
              subtree: true
            });
          });
        }
      }
    }
  },
  beforeDestroy() {
    let _runEnv = judgeEnv();

    if (_runEnv.env === 'Render' && this.isSupport) {
      // 销毁根节点的cover-view
      if (this.isRootCoverView) {
        delete global.__bili_coverView_cache[this.uid];
        delete window.__smallAppFE.coverMapping[this.nodeId];
        // 销毁监听
        this.observer.disconnect();
        SmallApp.postMessage({
          "module": "dom",
          "method": "removeElement",
          "args": {
            id: this.$vnode.elm._nodeId
          }
        });
      }
    }
  }
};
</script>

<style lang="less">
.bl___cover-view {
  display: flex;
  box-sizing: border-box;
  line-height: 1.2;
  width: var(--width);
  height: var(--height);
  --width: '100%';
  --height: 'auto';
  visibility: hidden !important;
  overflow: hidden;

  * {
    box-sizing: border-box;
  }
}
</style>

