<template>
  <div class="widget-groupPage">
    <!--地图模块-->
    <BaseMap />
    <!--头部菜单模块-->
    <Header />
    <!--集团、分公司级页面模块-->
    <GroupPageModules />
    <!--项目级页面模块-->
    <DistrictPageModules />
  </div>
</template>

<script>
import Flexible from './flexible'
import Header from './header/header.vue'
//地图模块
import BaseMap from './baseMap/baseMap.vue'
//集团、分公司级页面模块
import GroupPageModules from './groupPageModules/index.vue'
//项目级页面模块
import DistrictPageModules from './districtPageModules/index.vue'
//
import { getUserList, getBlockPage, getEpcProjectList } from '@/views/groupPage/apis'

export default {
  name: 'groupPage', //决策分析平台
  components: {
    Header,
    BaseMap,
    GroupPageModules,
    DistrictPageModules
  },
  data() {
    return {
      flexibleObject: null,
      //角色
      roc: Symbol('公司级用户'),
      robc: Symbol('分公司级用户')
    }
  },
  created() {
    this.flexibleObject = new Flexible()
    this.getUserRole()
    // getBlockPage({ size: 999 }).then((res) => {
    // console.log('code列表', res)
    // })
  },
  methods: {
    async getUserRole() {
      const username = sessionStorage.getItem('username') || this.$store.state.user.username
      // const { result } = await getUserList({ username: username })
      // let prjInfo = result.map((item) => {
      //   return {
      //     name: item.orgName,
      //     value: 'B06',
      //     pid: 1,
      //     children: item.prjList.map((i) => {
      //       return { ...i, value: 'HB06', pid: 2, children: [] }
      //     })
      //   }
      // })
      // prjInfo = { name: '三峡发展', value: null, pid: 0, children: prjInfo }
      getUserList({ username: username }).then(async (res) => {
        try {
          // console.log(res.result.records[0].roleName)
          // let roleArr = res.result.records[0].roleName.split(',')
          let prjIdList = res.result.records[0].prjIdList,
            roleArr = []
          let prjInfo = await this.getEpcProject(prjIdList)
          prjInfo = { name: '三峡发展', value: null, pid: 0, children: prjInfo }
          res.result.records.map((item) => {
            roleArr = [...roleArr, ...item.roleName.split(',')]
          })
          if (!roleArr.includes(this.roc.description) && !roleArr.includes(this.robc.description)) {
            this.$store.state.bigScreen.isShowGroupPage = false
            this.$store.dispatch(
              'bigScreen/setProjectTreeData',
              this.flatten([prjInfo]).filter((e) => e.pid == 2)
            )
            //  [
            //   {
            //     name: '宜昌两网二期',
            //     value: 'HB06',
            //     pid: 2,
            //     children: []
            //   }
            // ]
          } else {
            this.$store.state.bigScreen.isShowGroupPage = true
            this.$store.dispatch('bigScreen/setProjectTreeData', [prjInfo])
            // {
            //   name: '三峡发展',
            //   value: null,
            //   pid: 0,
            //   children: [
            //     {
            //       name: '三峡分公司',
            //       value: 'B01',
            //       pid: 1,
            //       children: [
            //         {
            //           name: '宜昌两网二期',
            //           value: 'HB06',
            //           pid: 2,
            //           children: []
            //         }
            //       ]
            //     }
            //   ]
            // }
          }
          if (roleArr.includes(this.roc.description) && !roleArr.includes(this.robc.description)) {
            this.$store.state.bigScreen.isShowGroupPage = true
            this.$store.dispatch('bigScreen/setProjectTreeData', [
              { name: '三峡发展', value: null, pid: 0, children: this.flatten([prjInfo]).filter((e) => e.pid == 2) }
            ])
            // [
            //   {
            //     name: '三峡发展',
            //     value: null,
            //     pid: 0,
            //     children: [
            //       {
            //         name: '宜昌两网二期',
            //         value: 'HB06',
            //         pid: 2,
            //         children: []
            //       }
            //     ]
            //   }
            // ]
          }
          if (!roleArr.includes(this.roc.description) && roleArr.includes(this.robc.description)) {
            this.$store.state.bigScreen.isShowGroupPage = true
            this.$store.dispatch('bigScreen/setProjectTreeData', prjInfo.children)
            // [
            //   {
            //     name: '三峡分公司',
            //     value: 'B01',
            //     pid: 1,
            //     children: [
            //       {
            //         name: '宜昌两网二期',
            //         value: 'HB06',
            //         pid: 2,
            //         children: []
            //       }
            //     ]
            //   }
            // ]
          }
        } catch (err) {
          console.log(err)
        }
      })
    },
    async getEpcProject(prjIdList) {
      const res = await getEpcProjectList({ prjIdList })
      if (!res || res.code != 1) return
      let tree = []
      res.result.forEach((item) => {
        const { son_company_name, son_company_code } = item || {}
        let target = tree.find((e) => e.name == son_company_name)
        if (!target) {
          tree.push({
            name: son_company_name,
            value: son_company_code,
            pid: 1,
            children: [{ ...item, name: item.simple_name, pid: 2, value: item.project_parent_code, children: [] }]
          })
        } else {
          target.children.push({
            ...item,
            name: item.simple_name,
            pid: 2,
            value: item.project_parent_code,
            children: []
          })
        }
      })
      return tree
    },
    flatten(data) {
      return [].concat(...data.map((item) => [].concat(item, ...this.flatten(item.children))))
    }
  },
  destroyed() {
    this.flexibleObject.removeflexible()
    this.flexibleObject = null
    this.$store.dispatch('bigScreen/resetState')
  }
}
</script>

<style lang="scss" scoped>
.widget-groupPage {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 0.026042rem /* 5/192 */;
    height: 0.052083rem /* 10/192 */;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #0f669a;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  //修改子组件下所有下拉菜单背景,需设置:popper-append-to-body="false"
  /deep/ .el-select-dropdown {
    background: #023c5d;
    border-color: #023c5d;
    .popper__arrow,
    .popper__arrow::after {
      border-bottom-color: rgba(43, 167, 255, 0.2);
    }
    .el-scrollbar__wrap {
      margin: 0 !important;
      overflow: auto;
    }
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.selected {
      color: #409eff;
      font-weight: 500;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: rgba(43, 167, 255, 0.2);
    }
  }
  //修改子组件下所有多选框样式
  /deep/ .el-checkbox__inner {
    background: #0a1525;
    border-color: rgba(3, 109, 190, 1);
  }
  /deep/ .el-checkbox__inner::after {
    border: 2px solid rgba(17, 156, 255, 1);
    border-left: 0;
    border-top: 0;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #0a1525;
    border-color: rgba(3, 109, 190, 1);
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #fff;
  }
}
</style>>
