<template>
    <div style="height: 100%;overflow: auto;">
        <component :is="ContentDisplayArea" />
    </div>
</template>

<script>
    import dataPermissionImport from './dataPermissionImport.vue';
    const R3 = window.R3;
    import { getDeviceFingerprint } from '@yunque/service/modules/pingduoduo_open_sdk.js';
    const { network } = R3
    export default {
        data () {
            return {
                ContentDisplayArea: R3.components.ContentDisplayArea,
            }
        },
        components: {
            dataPermissionImport
        },
        async mounted() {
          this.getSystemParams();
          if(window.location.pathname.indexOf('DATAPERMISSION')>-1){
            this.$nextTick(() => {
              setTimeout(()=>{
                const parentElem = document.getElementsByClassName('buttonGroup')[0];
                var Profile = Vue.extend(dataPermissionImport);
                var Profile =new Profile().$mount()
                if(!document.getElementById('dataPermissionImport')){
                  parentElem.appendChild(Profile.$el);
                }
                // 是否已经有帮助ICON了
                const hasHelp = parentElem.querySelector(".iconios-help-circle-outline");
                if (!hasHelp) {
                  const dom = document.createElement('button');
                  dom.className = 'lark-doc ark-btn ark-btn-fcdefault';
                  dom.id = 'iconios-help-circle-outline';
                  dom.style.border = 'none';
                  dom.style.padding = '0';
                  dom.title = '帮助中心';
                  dom.innerHTML = `
                    <span>
                        <i class='ark-icon ark-icon iconfont  iconbj_help' style="font-size: 20px;opacity: 1;"></i>
                    </span>
                    </span>
                  `;
                  dom.onclick = () => {
                    this.triggerAjax();
                    window.open('https://burgeon.yuque.com/cgmq7t/cgv53l/ofv2xf3nfe78gauv?singleDoc#');
                  };
                  document.getElementsByClassName('buttonGroup')[0].appendChild(dom);
                }
              },400)
            })
          }
           await getDeviceFingerprint()
        },
        watch: {
            $route(to,from){
              if(to.path.indexOf('DATAPERMISSION') > -1) {
                setTimeout(()=>{
                  const parentElem = document.getElementsByClassName('buttonGroup')[0];
                  var Profile = Vue.extend(dataPermissionImport);
                  var Profile =new Profile().$mount()
                  if(!document.getElementById('dataPermissionImport')){
                    parentElem.appendChild(Profile.$el)
                  }
                  // 是否已经有帮助ICON了
                  const hasHelp = parentElem.querySelector(".iconios-help-circle-outline");
                  if (!hasHelp) {
                    const dom = document.createElement('button');
                    dom.className = 'lark-doc ark-btn ark-btn-fcdefault';
                    dom.id = 'iconios-help-circle-outline';
                    dom.style.border = 'none';
                    dom.style.padding = '0';
                    dom.title = '帮助中心';
                    dom.innerHTML = `
                      <span>
                      <span>
                        <i class='ark-icon ark-icon iconfont iconios-help-circle-outline' style="font-size: 26px;opacity: 0.7;"></i>
                      </span>
                      </span>
                    `;
                    dom.onclick = () => {
                      this.triggerAjax();
                      window.open('https://burgeon.yuque.com/cgmq7t/cgv53l/ofv2xf3nfe78gauv?singleDoc#');
                    };
                    parentElem.appendChild(dom);
                  }
                }, 400)
              }
            }
        },
        methods: {
            // 请求埋点
            triggerAjax() {
                const params = {
                    MENUNAME: '数据权限',
                    BUTTONNAME: '点击帮助',
                };
                network.post('/p/cs/button/clickCount', params);
            },
            getSystemParams() {
                network.post('/p/cs/getSysParams').then(res => {
                  if (res.data.code == 0) {
                    const allParams = {};
                    let allParamsList = []
                    res.data.data.forEach(item => {
                      allParamsList=[...allParamsList,...item.sysParam]
                    })
                    allParamsList.forEach(param => {
                      allParams[param.paraName] = param.paraValue || '';
                      if(param.paraName == 'ISUSERETURNBATCHMANAGEMENT'){
                        let isFold = param.paraValue === 'True' ? true : false;
                        window.localStorage.setItem('ISUSERETURNBATCHMANAGEMENTFLAG',isFold);
                      }
                      if(param.paraName == 'ISOPENLIVESERVICE'){
                        // 直播服务是否开通
                        let isFold = param.paraValue === 'True' ? true : false;
                        window.localStorage.setItem('ISOPENLIVESERVICE',isFold);
                      }
                       if(param.paraName == 'is_zhuque'){
                        let isFold = param.paraValue === 'True' ? true : false;
                        window.localStorage.setItem('yunque_is_zhuque',isFold);
                      }
                    })
                    console.log(allParams, 'allParams_01')
                    this.$store.commit('customize/setSystemParams', allParams);
                  }
                })
              },
        }
    }
</script>

<style>

</style>
