<template>
  <div>
    <!-- 首页导航 -->
    <Navs></Navs>
    <!-- content -->
    <section class="content">
      <div class="content_cont">
        <!-- 全局搜索 -->
        <search></search>
        <!-- 主内容 -->
        <div class="mainCont">
          <div class="header">
            <div class="left">{{posaite[dataPos]}}</div>
            <div class="right">
              <img :src="imgurl.pos" alt />
              <span>当前位置：</span>
              <span @click="$router.push('/')">首页</span>
              >
              <span @click="$router.go(0)">数据</span>
            </div>
          </div>
          <!-- 中间部分 -->
          <div class="data_title" v-if="cutStateSeach==='simpleness'">
            <div
              v-for="(item,index) in titleDatas"
              :key="index"
              @mouseover="mouseoverAllCate('hierarchy1',index)"
              @mouseleave="mouseleaveAllCate('hierarchy1',index)"
              @click="clickAllCate('hierarchy1',index)"
            >
              <img :src="item.iconUrl" alt />
              <span v-if="computStatic(index,titleDatas)">{{item.text}}</span>
              <div
                v-if="index===(titleDatas.length-1)||index===(titleDatas.length-2)"
                class="title_relative"
              >
                <div>{{item.text}}</div>
                <div class="title_div" v-if="item.static">
                  <div
                    v-for="(list,key) in item.secondText"
                    :key="key"
                    @mouseover="mouseoverCate('hierarchy2',key)"
                    @mouseleave="mouseleaveCate('hierarchy2',key)"
                    @click.stop="clickCate('hierarchy2',key,list.text)"
                  >
                    {{list.text}}
                    <div class="secondWindow" v-if="list.text==='统计' && list.static">
                      <div v-for="(item2,index2) in item.threeText" :key="index2">
                        <div
                          @mouseover="mouseoverThree('hierarchy3',index2)"
                          @mouseleave="mouseleaveThree('hierarchy3',index2)"
                        >
                          {{item2.text}}
                          <div class="threeWindow" v-if="item2.text==='对行运算' && item2.static">
                            <div
                              v-for="(item3,index3) in item.fourText"
                              :key="index3"
                              @click="computedLine(item3.text)"
                            >{{item3.text}}</div>
                          </div>
                          <div class="threeWindow" v-if="item2.text==='对列运算' && item2.static">
                            <div
                              v-for="(item3,index3) in item.fourText"
                              :key="index3"
                              @click="computedList(item3.text)"
                            >{{item3.text}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="data_title" v-if="cutStateSeach==='advanced'">
            <div
              v-for="(item,index) in titleDatas"
              :key="index"
              @mouseover="mouseoverAllCate('hierarchy1',index)"
              @mouseleave="mouseleaveAllCate('hierarchy1',index)"
              @click="clickAllCate('hierarchy1',index)"
            >
              <img :src="item.iconUrl" alt v-if="index<3" />
              <div v-if="index<3" class="title_relative">
                <div>{{item.text}}</div>
              </div>
            </div>
            <div class="searchData" @click="clickAllCate('hierarchy1','search')">查询数据</div>
          </div>
          <div class="data_title" v-if="cutStateSeach==='map'">
            <div
              v-for="(item,index) in titleDatas"
              :key="index"
              @mouseover="mouseoverAllCate('hierarchy1',index)"
              @mouseleave="mouseleaveAllCate('hierarchy1',index)"
              @click="clickAllCate('hierarchy1',index)"
              :style="{position:index>=4?'absolute':'','margin-left':index===3?'33rem':''}"
            >
              <img :src="item.iconUrl" alt v-if="index<4" />
              <span v-if="index<4">{{item.text}}</span>
            </div>
          </div>
          <div
            class="data_content"
            :style="{'height':indStatic===0?'59.0125rem':'91.125rem'}"
            v-if="cutStateSeach==='simpleness'"
          >
            <div
              class="data_left"
              :style="{'width':(left!=initValue?left>initValue?(25.375+computedNumberRem(left-initValue)):(25.375-computedNumberRem(initValue-left)):25.375)+'rem','height':'100%'}"
            >
              <!-- 左侧导航 -->
              <el-row class="tac" v-if="defaultSelectLies">
                <el-col :span="24">
                  <el-menu
                    :default-openeds="$store.state.advancedSearchState?[]:defaultSelectLies"
                    @open="handleOpen"
                    @close="handleClose"
                    @select="selectActive"
                    :unique-opened="true"
                  >
                    <el-submenu
                      :index="''+index1"
                      v-for="(item1,index1) in leftCateData"
                      :key="index1"
                      :style="{'background-color':$store.state.selectDataLeft.id===item1.id?'#95CEE4':''}"
                    >
                      <template slot="title">{{item1.name}}</template>
                      <el-submenu
                        :index="index1+'-'+index2"
                        v-for="(item2,index2) in item1.children"
                        :key="index2"
                        :style="{'background-color':$store.state.selectDataLeft.id===item2.id?'#95CEE4':''}"
                      >
                        <template slot="title">{{item2.name}}</template>
                        <el-submenu
                          :index="index1+'-'+index2+'-'+index3"
                          v-for="(item3,index3) in item2.children"
                          :key="index3"
                          :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                        >
                          <template slot="title">{{item3.name}}</template>
                          <el-submenu
                            :index="index1+'-'+index2+'-'+index3+'-'+index4"
                            v-for="(item4,index4) in item3.children"
                            :key="index4"
                            :style="{'background-color':$store.state.selectDataLeft.id===item4.id?'#95CEE4':''}"
                          >
                            <template slot="title">{{item4.name}}</template>
                            <el-submenu
                              :index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
                              v-for="(item5,index5) in item4.children"
                              :key="index5"
                              :style="{'background-color':$store.state.selectDataLeft.id===item5.id?'#95CEE4':''}"
                            >
                              <template slot="title">{{item5.name}}</template>
                            </el-submenu>
                          </el-submenu>
                        </el-submenu>
                      </el-submenu>
                    </el-submenu>
                  </el-menu>
                </el-col>
              </el-row>
            </div>
            <div class="data_center">
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
            </div>
            <div
              class="data_right"
              :style="{'width':(left!=initValue?left>initValue?(58.125-computedNumberRem(left-initValue)):(58.125+computedNumberRem(initValue-left)):58.125)+'rem','height':'100%'}"
            >
              <!-- 列表 -->
              <!-- 图标切换 -->
              <ChartsCut
                v-show="$store.state.classifyIdDataState"
                @cutStatic="cutStatic"
                :defaultDataRight="defaultDataRight"
                @stateTell="stateTell"
                @comTime="comTime"
                :stateDataGetVal="stateDataGetVal"
                @stateDFGHJ="stateDFGHJ"
                @statertfResu="statertfResu"
                :labelAreaState="labelAreaState"
                :areaDimensionStateS="areaDimensionStateS"
                @emmitStateAd="emmitStateAd"
                :labelAreaStateks="labelAreaStateks"
                :loading.sync="loading"
                ref="childChartsCut"
              ></ChartsCut>
              <!-- 列表内容 -->
              <ChartsCont
                ref="childChartCont"
                :indStatic="indStatic"
                :chartsStatusMegger="chartsStatusMegger"
                :defaultDataRight="defaultDataRight"
                :stateTells="stateTells"
                :statesDf="statesDf"
                @tellAreadly="tellAreadly"
                @prentsState="prentsState"
                :downLaSelects="downLaSelect"
                @stateDataGet="stateDataGet"
                :downLaSelectArea="downLaSelectArea"
                :showTableState="showTableState"
                @statertyui="statertyui"
                :areaDimensionStateS="areaDimensionStateS"
                :advancedStates="advancedStates"
                @tellParentsShowClos="tellParentsShowClos"
                @tellChangeFan="tellChangeFan"
                :loadings.sync="loading&&$store.state.classifyIdDataState"
              ></ChartsCont>
            </div>
            <div class="container">
              <VueDragResize
                :isActive="true"
                :isResizable="false"
                :w="10"
                :h="120"
                :z="0"
                :x="computedNumberPx(200)"
                :parentLimitation="true"
                @resizing="resizeEvents"
                @dragging="resizeEvents"
                axis="x"
                style="position:relative;border:none;display: flex;flex-direction:column;justify-content: center;align-items: center;pointer-events:auto;"
              >
                <!-- <h3>Hello World!</h3>
                <p>{{ top }} х {{ left }}</p>
                <p>{{ width }} х {{ height }}</p>-->
              </VueDragResize>
            </div>
          </div>
          <AdvancedQuery v-if="cutStateSeach==='advanced'"></AdvancedQuery>
          <MapData v-if="cutStateSeach==='map'"></MapData>
          <div
            class="advancedStyle"
            v-if="cutStateSeach==='advanced'"
            @click="clickAllCate('hierarchy1','search')"
          >
            <div>查询数据</div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
    <!-- 指标解释 -->
    <LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
    <!-- 新增指标 -->
    <InsertLabel v-if="$store.state.insertWindowState" @emitState="emitStatesd"></InsertLabel>
    <!-- 筛选 -->
    <ScreenCom v-if="$store.state.selcettWindowState" @emitState="emitStatesd"></ScreenCom>
    <!-- 编辑 -->
    <EditCom v-if="$store.state.editWindowState" @emitState="emitStatesd">></EditCom>
    <!-- 添加收藏 -->
    <AddCollect v-if="$store.state.addCollectState"></AddCollect>
    <!-- 维度转换 -->
    <!--地区-->
    <Dimension
      ref="childDimension"
      v-show="$store.state.dimensionState"
      @changeValue="changeValue"
      @areaDimensionState="areaDimensionState"
    ></Dimension>
    <!-- 维度转换 -->
    <!--非地区-->
    <NoAreaDimension v-if="$store.state.noAreadimensionState" @changeSetZZ="changeValue"></NoAreaDimension>
  </div>
</template>

<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
// 引入拖拽组件
import VueDragResize from 'vue-drag-resize'
// 引入图表切换组件
import ChartsCut from '@/components/chartsCut/ChartsCut.vue'
// 引入图表组件
import ChartsCont from '@/components/chartsCont/ChartsCont.vue'
// 引入高级查询组件
import AdvancedQuery from '@/components/advancedQuery/AdvancedQuery.vue'
// 引入数据地图组件
import MapData from '@/components/mapData/MapData.vue'
// 新增指标组件
import InsertLabel from '@/components/insertLabel/InsertLabel.vue'
// 筛选
import ScreenCom from '@/components/screenCom/ScreenCom.vue'
// 编辑
import EditCom from '@/components/editCom/EditCom.vue'
// 添加收藏
import AddCollect from '@/components/addCollect/AddCollect.vue'
// 指标解释
import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
// 维度转换  地区
import Dimension from '@/components/dimension/Dimension.vue'
// 维度转换  非地区
import NoAreaDimension from '@/components/noAreaDimension/NoAreaDimension.vue'
// 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata'
// 引入全局的createObjectUrl用于覆盖window.URL
// import '../../assets/js/createObjectUrl'

export default {
  name: 'index',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search,
    VueDragResize: VueDragResize,
    ChartsCut: ChartsCut,
    ChartsCont: ChartsCont,
    AdvancedQuery: AdvancedQuery,
    MapData: MapData,
    InsertLabel: InsertLabel,
    ScreenCom: ScreenCom,
    EditCom: EditCom,
    AddCollect: AddCollect,
    LabelExplain: LabelExplain,
    Dimension: Dimension,
    NoAreaDimension: NoAreaDimension
  },
  data () {
    return {
      loading: true,
      // 左侧当前默认
      defaultSelectLies: null,
      // 右侧默认显示数据
      defaultDataRight: null,
      // 菜单配置
      activeIndex: '1',
      activeIndex2: '1',
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        tz: require('../../../static/data/tz145.png')
      },
      // 本页所有位置
      posaite: {
        monthly: '月度数据',
        quarter: '季度数据',
        year: '年度数据',
        area: '地区数据'
      },
      // 当前位置状态
      dataPos: null,
      // data_title数据
      titleDatas: [
        { text: '简单查询', iconUrl: require('../../../static/data/jdcx.png') },
        { text: '高级查询', iconUrl: require('../../../static/data/gjcx.png') },
        { text: '数据地图', iconUrl: require('../../../static/data/sjdt.png') },
        { text: '添加收藏', iconUrl: require('../../../static/data/tjsc.png') },
        { text: '导出至Excel', iconUrl: require('../../../static/data/dcexcel.png') },
        {
          text: '数据管理',
          iconUrl: require('../../../static/data/sjgl.png'),
          secondText: [
            { text: '新增指标', static: false },
            { text: '筛选', static: false },
            { text: '统计', static: false },
            { text: '恢复', static: false },
            { text: '清除空行空列', static: false }
          ],
          threeText: [
            { text: '对行运算', static: false },
            { text: '对列运算', static: false }
          ],
          fourText: [
            { text: 'SUM求和', static: false },
            { text: 'x平均数', static: false },
            { text: 'MAX最大值', static: false },
            { text: 'MIN最小值', static: false },
            { text: 'MD中位数', static: false },
            { text: 'MO众数', static: false },
            { text: 'S²方差', static: false },
            { text: 'S标准差', static: false }
          ],
          static: false
        },
        {
          text: '报表管理',
          iconUrl: require('../../../static/data/bbgl.png'),
          secondText: [
            { text: '编辑', static: false },
            { text: '转置', static: false },
            { text: '维度转换', static: false },
            { text: '保存默认', static: false },
            { text: '恢复默认', static: false }
          ],
          static: false
        }
      ],
      // 拖拽start
      width: 10,
      height: 120,
      top: 0,
      left: 147,
      // 拖拽end
      // 初始值
      initValue: null,
      // 重置左、右侧高度
      Heights: null,
      // 切换状态 默认0
      indStatic: 0,
      // 数据管理  =================>
      dataManage: ['新增指标', '筛选', '统计', '恢复', '清除空行空列'],
      // 统计数据
      dataManageTJ: ['对行运算', '对列运算'],
      // 运算
      dataManageTJComputed: ['SUM求和', 'x平均数', 'MAX最大值', 'MIN最小值', 'MD中位数', 'MO众数', 'S²方差', 'S标准差'],
      // 报表管理  ================>
      reportManage: ['编辑', '转置', '维度转换', '保存默认', '恢复默认'],
      // 数据管理状态
      dataManageStatic: {
        mainStatic: false,
        TJStatic: false,
        hangStatic: false,
        lieStatic: false,
        compuStatic: false
      },
      // 图表状态管理器
      chartsStatusMegger: {
        // 转置
        transState: true,
        // 计算状态
        computedStatic: { text: '无', stateType: 'line' }
      },
      leftCateData: null,
      // 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）)
      cutStateSeach: 'simpleness',
      // 下拉筛选的数据时间
      downLaSelect: '',
      // 下拉筛选的数据地区
      downLaSelectArea: '',
      // 新增指标状态
      statesDf: 1,
      // 数据加载状态
      stateTells: false,
      // 维度转换时(若不是地区数据只进行转置操作)
      changeState: false,
      // 数据请求成功后的状态
      stateDataGetVal: false,
      // 扩展数据完成后
      labelAreaState: false,
      // 清除空行空列
      showTableState: false,
      // 地区数据维度转换状态
      areaDimensionStateS: false,
      // 高级查询数据渲染
      advancedStates: false,
      // 指标与地区互换状态
      labelAreaStateks: false,
      // 存储过滤出来的所有值  左侧菜单
      filterDataArr: null
    }
  },
  watch: {
    changeState (val) {
      if (val) {
        this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
        this.$store.state.transState = this.chartsStatusMegger.transState
        this.changeState = false
      }
    }
  },
  methods: {
    /*
    * @desc 触发子组件 childChartCont 的downLaSelects方法
    */
    chuFachildChartCont () {
      console.log(this.$refs, 'this.$refs')
      this.$nextTick(() => {
        this.$refs.childChartCont.downLaSelects()
      })
    },
    // 地区数据维度转换状态
    areaDimensionState (val) {
      console.log(val, 'bbbval')
      this.areaDimensionStateS = !this.areaDimensionStateS
    },
    // 维度转换非地区转置
    changeValue (val) {
      this.changeState = val
    },
    // 获取左侧菜单数据
    getCateData () {
      this.$axios({
        method: 'GET',
        url: 'data/data/list',
        params: {
          type: this.$route.query.type === 'area' ? 2 : 1,
          f: this.$route.query.type === 'area' ? '' : this.$route.query.type
        }
      }).then(res => {
        console.log(res, '左侧菜单')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.leftCateData = res.data.data.list
          this.defaultSelectLie()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 菜单选中配置
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClick (tab, event) {
      // console.log(tab, event, '选中')
    },
    // 拖拽事件
    resizeEvents (newRect) {
      console.log(newRect)
      this.width = newRect.width
      this.height = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath, '开')
      this.$store.state.openOpenLeft = keyPath
      console.log(key.split('-'))
      let datart = []
      key.split('-').forEach((item, index) => {
        if (index === 0) {
          datart = this.leftCateData[item]
        } else {
          datart = datart.children[item]
        }
      })
      console.log(datart)
      this.defaultDataRight = datart
      this.$store.state.selectDataLeft = this.defaultDataRight
      this.$store.state.selectfilter = this.defaultDataRight.f
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, '关闭打印')
    },
    selectActive (key, keyPath) {
      // console.log(key, keyPath)
      this.showColoect(key)
    },
    // 点击5按钮切换图表
    cutStatic (ind) {
      // ind  0 1 2 3 4
      this.indStatic = ind
    },
    // top上的computed
    mouseoverAllCate (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标移动到')
      switch (ind) {
        case 5:
          this.titleDatas[ind].static = true
          break
        case 6:
          this.titleDatas[ind].static = true
          break
      }
    },
    mouseleaveAllCate (hierarchy, ind) {
      switch (ind) {
        case 5:
          this.titleDatas[ind].static = false
          this.titleDatas[5].threeText[0].static = false
          this.titleDatas[5].threeText[1].static = false
          break
        case 6:
          this.titleDatas[ind].static = false
          break
      }
      // console.log('鼠标离开')
    },
    clickAllCate (hierarchy, ind) {
      let that = this
      switch (ind) {
        case 0:
          this.$store.state.advancedSearchState = false
          this.cutStateSeach = 'simpleness'
          this.$router.go(0)
          break
        case 1:
          this.$store.state.advancedSearchState = true
          this.cutStateSeach = 'advanced'
          break
        case 2:
          if (this.$route.query.type === 'area') {
            this.cutStateSeach = 'map'
          } else {
            this.$store.state.advancedSearchState = false
            // alert('地图功能对非地区数据无效！')
            this.$alert('地图功能对非地区数据无效！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case 3:// 添加收藏
          if (this.$store.state.transBefore) {
            this.$store.state.addCollectState = true
          } else {
            this.$alert('暂无数据，无法进行收藏', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case 4:// 导出至excel！！
          if (this.$store.state.transBefore) {
            let brt = new ComputedData()
            let objData = null
            if (this.indStatic === 0) {
              objData = brt.exportDataAll(JSON.parse(JSON.stringify(this.$store.state.tableData)), JSON.parse(JSON.stringify(this.$store.state.tableLine)))
            } else {
              objData = brt.insertCollectS(JSON.parse(JSON.stringify(this.$store.state.tableData)), JSON.parse(JSON.stringify(this.$store.state.tableLine)), JSON.parse(JSON.stringify(this.$store.state.listInputVal)), JSON.parse(JSON.stringify(this.$store.state.lineInputVal)))
            }
            // 调用接口导出至excel
            this.$axios({
              method: 'POST',
              url: 'data/data/download',
              data: {
                classify: this.$store.state.selectDataLeft.id,
                tableData: objData.tableData,
                header: objData.header
              },
              responseType: 'blob'// 防止接收文件流乱码  格式blob
            }).then(res => {
              console.log(res, '导出至excel！！')
              // 请求接口完成   请求成功
              if (res.status === 200) {
                const a = document.createElement('a')
                a.download = res.headers['content-disposition'].split('"')[1]
                a.style.display = 'none'
                a.href = window.URL.createObjectURL(res.data)
                a.click()
                a.remove()
                window.URL.revokeObjectURL(window.URL.createObjectURL(res.data))
              }
            }).catch((fail) => {
              console.log(fail)
            })
          } else {
            this.$alert('暂无数据，无法进行导出操作！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case 5:
          break
        case 6:
          break
        case 'search':// 调接进行高级查询
          // 调用接口查询高级查询的数据
          console.log(this.$store.state.advanceData)
          if (this.$store.state.advanceData.length < 1) {
            // alert('筛选数据数据不能少于4条！')
            this.$alert('筛选数据数据不能少于1条！', '温馨提示', {
              confirmButtonText: '确定'
            })
            return
          }
          that.cutStateSeach = 'simpleness'
          that.advancedStates = true
          // 调用子组件 的方法渲染高级查询数据
          that.$store.state.advancedSearchState = true
          console.log(this.$store.state.dataArealabelTime, 'this.$store.state.dataArealabelTime')
          console.log(this.$store.state.advanceData, 'this.$store.state.advanceData')
          this.$store.state.advancedSelectClassfiid = this.$store.state.advanceData.map((item, index) => {
            return item.classify_id
          })
          this.$nextTick(() => {
            // 左侧菜单数据
            this.getCateData()
            this.childChartContShow(this.$store.state.advancedSelectClassfiid)
            this.$store.state.labelIndexName = this.$store.state.advanceData[0].nameText
          })
          break
      }
    },
    mouseoverCate (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标移动到')
      switch (ind) {
        case 2:
          this.titleDatas[5].secondText[ind].static = true
          break
      }
    },
    mouseleaveCate (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标离开')
      switch (ind) {
        case 2:
          this.titleDatas[5].threeText[0].static = false
          this.titleDatas[5].threeText[1].static = false
          this.titleDatas[5].secondText[ind].static = false
          break
      }
    },
    clickCate (hierarchy, ind, textType) {
      switch (textType) {
        case '新增指标':
          console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
          if (this.$store.state.transBefore) {
            this.$store.state.insertWindowState = true
          } else {
            this.$alert('暂无数据，新增指标功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '筛选':
          if (this.$store.state.transBefore) {
            this.$store.state.selcettWindowState = true
          } else {
            this.$alert('暂无数据，筛选功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '恢复':// 恢复
          if (this.$store.state.transBefore) {
            this.$router.go(0)
          } else {
            this.$alert('暂无数据，恢复功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '清除空行空列':// 清除空行空列
          // this.$router.go(0)
          // console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
          if (this.$store.state.transBefore) {
            if (this.$route.query.type === 'area') {
              // 先过滤每一行
              let firstHang = []// 过滤掉的下标=====》地区
              this.$store.state.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  firstHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 在过滤每一列
              // 行列转置
              let brrCe = this.$store.state.transBefore.transBeforeAreaData
              this.$store.state.transBefore.transBeforeAreaData = brrCe[0].map(function (col, index) {
                return brrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 在过滤每一行
              let secendHang = []// 过滤掉的下标=====》时间
              this.$store.state.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  secendHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 行列转置
              let arrCe = this.$store.state.transBefore.transBeforeAreaData
              this.$store.state.transBefore.transBeforeAreaData = arrCe[0].map(function (col, index) {
                return arrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 将时间和地区名过滤掉
              this.$store.state.transBefore.areaName = this.$store.state.transBefore.areaName.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
                return secendHang.indexOf(index) === -1
              })
              console.log(this.$store.state.transBefore, 'this.$store.state.transBefore.transBeforeAreaData')
              this.showTableState = true
            } else { // 非地区数据
              // 先过滤每一行
              let firstHang = []// 过滤掉的下标=====》地区
              this.$store.state.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  firstHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 在过滤每一列
              // 行列转置
              let brrCe = this.$store.state.transBefore.transBeforeTermsData
              this.$store.state.transBefore.transBeforeTermsData = brrCe[0].map(function (col, index) {
                return brrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 在过滤每一行
              let secendHang = []// 过滤掉的下标=====》时间
              this.$store.state.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  secendHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 行列转置
              let arrCe = this.$store.state.transBefore.transBeforeTermsData
              this.$store.state.transBefore.transBeforeTermsData = arrCe[0].map(function (col, index) {
                return arrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 将时间和地区名过滤掉
              this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
                return secendHang.indexOf(index) === -1
              })
              console.log(this.$store.state.transBefore, 'this.$store.state.transBefore.transBeforeAreaData')
              this.showTableState = true
            }
          } else {
            this.$alert('暂无数据，清除空行空列功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '编辑':
          if (this.$store.state.transBefore) {
            this.$store.state.editWindowState = true
          } else {
            this.$alert('暂无数据，编辑功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '转置':
          if (this.$store.state.transBefore) {
            // 改变转置状态
            let zhuanChange = {
              row: this.$store.state.SelecttDimension.col,
              col: this.$store.state.SelecttDimension.row
            }
            this.$store.state.SelecttDimension = zhuanChange
            this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
            this.$store.state.transState = this.chartsStatusMegger.transState
          } else {
            this.$alert('暂无数据，转置功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '维度转换':
          if (this.$store.state.transBefore) {
            if (this.$route.query.type === 'area') {
              this.$store.state.dimensionState = true
            } else {
              this.$store.state.noAreadimensionState = true
            }
          } else {
            this.$alert('暂无数据，维度转换功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '保存默认':// 将分类id 和 分类数据存入本地
          // 获取本地保存数据
          if (this.$store.state.transBefore) {
            if (JSON.parse(sessionStorage.getItem('classFiyData'))) {
              let arrtsBGY = JSON.parse(sessionStorage.getItem('classFiyData'))
              console.log(this.defaultDataRight.id, 'this.defaultDataRight.id')
              if (!arrtsBGY.find(item => item.id === this.defaultDataRight.id)) {
                arrtsBGY.push({
                  id: this.defaultDataRight.id,
                  data: this.$store.state.transBefore
                })
                sessionStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
              } else {
                console.log('走这里')
                arrtsBGY.find(item => item.id === this.defaultDataRight.id).data = this.$store.state.transBefore
                sessionStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
              }
            } else {
              sessionStorage.setItem('classFiyData', JSON.stringify([{
                id: this.defaultDataRight.id,
                data: this.$store.state.transBefore
              }]))
            }
            this.$alert('默认数据已保存！', '温馨提示', {
              confirmButtonText: '确定'
            })
          } else {
            this.$alert('暂无数据，保存默认功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '恢复默认':// 将分类id 和 分类数据从本地删除
          if (this.$store.state.transBefore) {
            if (JSON.parse(sessionStorage.getItem('classFiyData'))) {
              let arrtsBGY = JSON.parse(sessionStorage.getItem('classFiyData'))
              if (!arrtsBGY.find(item => item.id === this.defaultDataRight.id)) {
                // alert('默认数据已恢复！')
                this.$alert('默认数据已恢复！', '温馨提示', {
                  confirmButtonText: '确定'
                })
              } else {
                arrtsBGY = arrtsBGY.filter((item, index) => {
                  return item.id !== this.defaultDataRight.id
                })
                sessionStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
              }
            } else {
              // alert('默认数据已恢复！')
              this.$alert('默认数据已恢复！', '温馨提示', {
                confirmButtonText: '确定'
              })
            }
            this.$router.go(0)
          } else {
            this.$alert('暂无数据，恢复默认功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
      }
    },
    mouseoverThree (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标离开')
      switch (ind) {
        case 0:
          this.titleDatas[5].threeText[ind + 1].static = false
          this.titleDatas[5].threeText[ind].static = true
          break
        case 1:
          this.titleDatas[5].threeText[ind - 1].static = false
          this.titleDatas[5].threeText[ind].static = true
          break
      }
    },
    mouseleaveThree (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标离开')
      switch (ind) {
        case 0:
          // this.titleDatas[5].threeText[ind].static = false
          break
        case 1:
          // this.titleDatas[5].threeText[ind].static = false
          break
      }
    },
    // 对行运算
    computedLine (typeText) {
      switch (typeText) {
        case 'SUM求和':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'x平均数':// 注意x小写
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MAX最大值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MIN最小值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MD中位数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MO众数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'S²方差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'S标准差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
      }
    },
    // 对列运算
    computedList (typeText) {
      switch (typeText) {
        case 'SUM求和':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'x平均数':// 注意x小写
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MAX最大值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MIN最小值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MD中位数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MO众数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'S²方差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'S标准差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
      }
    },
    // 当数据不是从导航进来时找到其选中其选中的数据作为默认的左侧选中数据
    defaultDataSelectDG () { // 此方法返回一个默认选中的代码数组
      let defaultCodeIndex = null
      let objectData = null
      // 最终默认选中
      this.leftCateData.forEach((item1, index1) => {
        if (this.$route.query.defaultLeftId.toString() === item1.id) {
          defaultCodeIndex = [index1]
          objectData = item1
          console.log(111)
        } else {
          if (item1.children !== undefined) {
            item1.children.forEach((item2, index2) => {
              if (this.$route.query.defaultLeftId.toString() === item2.id) {
                defaultCodeIndex = [index1, index2]
                objectData = item2
                console.log(222)
              } else {
                if (item2.children !== undefined) {
                  item2.children.forEach((item3, index3) => {
                    if (this.$route.query.defaultLeftId.toString() === item3.id) {
                      defaultCodeIndex = [index1, index2, index3]
                      objectData = item3
                      console.log(defaultCodeIndex, objectData, 333)
                    } else {
                      if (item3.children !== undefined) {
                        item3.children.forEach((item4, index4) => {
                          if (this.$route.query.defaultLeftId.toString() === item4.id) {
                            defaultCodeIndex = [index1, index2, index3, index4]
                            objectData = item4
                            console.log(444)
                          } else {
                            if (item4.children !== undefined) {
                              item4.children.forEach((item5, index5) => {
                                if (this.$route.query.defaultLeftId.toString() === item5.id) {
                                  defaultCodeIndex = [index1, index2, index3, index4, index5]
                                  objectData = item5
                                  console.log(555)
                                }
                              })
                            }
                          }
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
      this.filterDataArr = {
        defaultCode: defaultCodeIndex.map((item, index) => {
          return defaultCodeIndex.filter((list, key) => { return key <= index }).join('-')
        }),
        objectData: objectData
      }
    },
    // 默认选中的列
    defaultSelectLie () {
      console.log(this.leftCateData, 'this.leftCateDatathis.leftCateDatathis.leftCateData')
      console.log(this.$route.query.defaultLeftId, 'this.$router.query.defaultLeftId')
      // 非高级查询
      if (!this.$store.state.advancedSearchState) {
        if (this.$route.query.defaultLeftId === 'default') { // 从导航中点击
          let stateStatic = []
          this.leftCateData.forEach((item1, index1) => {
            if (index1 === this.leftCateData.length - 1) {
              stateStatic.push('' + index1)
              if (item1.children) {
                item1.children.forEach((item2, index2) => {
                  if (index2 === 0) {
                    stateStatic.push('' + index1 + '-' + index2)
                    if (item2.children) {
                      item2.children.forEach((item3, index3) => {
                        if (index3 === 0) {
                          stateStatic.push('' + index1 + '-' + index2 + '-' + index3)
                          if (item3.children) {
                            item3.children.forEach((item4, index4) => {
                              if (index4 === 0) {
                                stateStatic.push('' + index1 + '-' + index2 + '-' + index3 + '-' + index4)
                                if (item4.children) {
                                  item4.children.forEach((item5, index5) => {
                                    if (index5 === 0) {
                                      stateStatic.push('' + index1 + '-' + index2 + '-' + index3 + '-' + index4 + '-' + index5)
                                    }
                                  })
                                }
                              }
                            })
                          }
                        }
                      })
                    }
                  }
                })
              }
            }
          })
          this.defaultSelectLies = stateStatic
          console.log(this.defaultSelectLies, 'stateStatic')
          this.$store.state.openOpenLeft = stateStatic
          let dataDome = []
          console.log(stateStatic, '数据')
          console.log(this.leftCateData[this.leftCateData.length - 1], '数据length-1')

          // console.log(this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0].children[0], '1')
          if (this.leftCateData[this.leftCateData.length - 1].children !== undefined) {
            if (this.leftCateData[this.leftCateData.length - 1].children[0].children !== undefined) {
              if (this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children !== undefined) {
                if (this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0].children !== undefined) {
                  dataDome = this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0].children[0]
                } else {
                  dataDome = this.leftCateData[this.leftCateData.length - 1].children[0].children[0].children[0]
                }
              } else {
                dataDome = this.leftCateData[this.leftCateData.length - 1].children[0].children[0]
              }
            } else {
              dataDome = this.leftCateData[this.leftCateData.length - 1].children[0]
            }
          } else {
            dataDome = this.leftCateData[this.leftCateData.length - 1]
          }
          this.defaultDataRight = dataDome
          this.$store.state.selectDataLeft = this.defaultDataRight
          console.log(this.defaultDataRight, '1250')
          console.log(this.$store.state.selectDataLeft, '12500')
          this.$store.state.selectfilter = this.defaultDataRight.f
        } else { // 从数据更新，快速
          this.defaultDataSelectDG()
          console.log(this.filterDataArr, '非导航左侧选中')
          console.log(this.filterDataArr.defaultCode, '代码')
          this.defaultSelectLies = this.filterDataArr.defaultCode
          this.$store.state.openOpenLeft = this.filterDataArr.defaultCode
          this.$store.state.selectDataLeft = this.filterDataArr.objectData
          this.defaultDataRight = this.filterDataArr.objectData
          this.$store.state.selectfilter = this.filterDataArr.objectData.f
        }
      } else {
        // this.defaultDataRight = []
        // this.defaultSelectLies = []
      }
    },
    comTime (res) {
      console.log(res, '被选中的111')
      this.downLaSelect = res.extendData
    },
    // 接收子组件传值新增指标
    emitStatesd (val) {
      console.log(val, 'val')
      if (val) {
        console.log(val)
        this.statesDf = 2
      } else {
        this.statesDf = 1
      }
    },
    // 重置参数
    tellAreadly (val) {
      this.statesDf = val
    },
    // 接收并且改变参数
    stateTell (val) {
      this.stateTells = val
    },
    // 重置参数
    prentsState (val) {
      this.stateTells = val
      this.labelAreaState = true
    },
    // 改变状态
    stateDataGet (val) {
      this.stateDataGetVal = val
    },
    stateDFGHJ (val) {
      this.stateDataGetVal = val
      this.labelAreaState = false
      // 恢复最初的选择
    },
    // 地区数据下拉发生变化
    statertfResu (val) {
      console.log(val, '1010110')
      this.downLaSelectArea = val
      this.indStatic = 0
    },
    // 重置清除空行空列状态
    statertyui (val) {
      this.showTableState = val
    },
    // 重置维度转换状态
    emmitStateAd (val) {
      // this.areaDimensionStateS = val
    },
    // 重置高级查询状态
    tellParentsShowClos (val) {
      this.advancedStates = val
    },
    // 改变状态
    tellChangeFan (val) {
      this.labelAreaStateks = val
    },
    // 调用子组件的方法
    changeBrother () {
      this.$refs.childChartCont.brotherFuncShowData()
    },
    // 调用子组件的方法
    changeDimensionTrueChangeArea (res) {
      this.$refs.childDimension.trueChangeArea(res)
    },
    // 调用子组件的方法重置数据
    changeScreenCom () {
      this.$refs.childChartCont.initTableData()
    },
    // 调用子组件的方法重置筛选数据
    childChartsCutShow () {
      this.$refs.childChartsCut.showLabelArea()
    },
    // 调用子组件的方法重置筛选数据
    childChartContShow (res) {
      this.$refs.childChartCont.getInfor(res)
    }
  },
  computed: {
    // 计算字符串
    computedStr () {
      return (str) => {
        let Strs = ''
        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
        return Strs
      }
    },
    // 根据传入的数值计算出实际px值
    computedNumberPx () {
      return (pszhi) => {
        let sizes = 160 / ((1920 - 17) / document.body.clientWidth) / 10 / 16 * pszhi
        return sizes
      }
    },
    // 根据传入的值计算出实际的rem值
    computedNumberRem () {
      return (pszhi) => {
        let sizes = pszhi / (160 / ((1920 - 17) / document.body.clientWidth) / 10 / 16) / 16
        return sizes
      }
    },
    // 计算文字显示状态
    computStatic () {
      return (index, arr) => {
        let staticd = false
        if (((arr.length - 1) === index) || (arr.length - 2) === index) {
          staticd = false
        } else {
          staticd = true
        }
        return staticd
      }
    }
  },
  mounted () {
    this.dataPos = this.$route.query.type
    // console.log(this.$route.query.type)
    this.initValue = this.computedNumberPx(200)
    // console.log(this.computedNumberPx(200))
    // 获取菜单信息
    this.getCateData()
    if (this.$route.query.type !== 'area') {
      this.$store.state.SelecttDimension = {
        row: 'sj',
        col: 'zb'
      }
    } else {
      this.$store.state.SelecttDimension = {
        row: 'sj',
        col: 'dq'
      }
    }
  },
  updated () {
    // console.log(this.defaultDataRight, 'this.defaultSelectLies')
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-col-24 {
  min-width: 100%;
  width: auto;
}
/deep/ .el-menu {
  border: none;
}
/deep/ .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  color: #8fa3ae;
}
// .el-menu--horizontal .el-menu .el-menu-item,
// .el-menu--horizontal .el-menu .el-submenu__title:hover {
//   color: #52b6e3;
// }
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: #8fa3ae;
}
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  color: #52b6e3;
}
/deep/ .el-menu.el-menu--horizontal {
  border: none;
}
/deep/ .el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row-reverse;
  // border: 1px solid red;
  padding: 0;
}
/deep/ .el-submenu__icon-arrow {
  position: static;
  margin-top: 0.25rem;
  margin-right: 0.42rem;
  // left: 0;
  // right: auto;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .swipersty {
    width: 100%;
    height: 33.25rem;
  }
  & > .content_cont {
    width: 84.25rem;
    // border: 1px solid red;
    & > .mainCont {
      // margin-top: 3.125rem;
      margin-bottom: 3.125rem;
      width: 100%;
      // border: 0.0625rem solid red;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      & > .header {
        width: 84.25rem;
        height: 4.25rem;
        // border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        & > .left {
          // margin-left: 1.5rem;
          font-size: 1.5rem;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0.125rem;
          color: #000000;
        }
        & > .right {
          // margin-right: 1.5rem;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #8fa3ae;
          & > img {
            width: 1rem;
            height: 1.25rem;
            margin-right: 0.45rem;
          }
          & > span:nth-child(n + 3):hover {
            cursor: pointer;
            color: #52b6e3;
          }
        }
      }
      & > .data_title {
        width: 100%;
        height: 5.875rem;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        & > .searchData {
          margin-left: 17.5625rem;
          width: 7.875rem;
          height: 3.125rem;
          background-color: #52b6e3;
          border-radius: 0.1875rem;
          color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 1.25rem;
        }
        & > .searchData:hover {
          cursor: pointer;
        }
        .title_relative {
          position: relative;
          & > .title_div {
            padding: 0.3625rem 0;
            position: absolute;
            top: 2.8rem;
            left: -3.2rem;
            z-index: 10;
            border: 1px solid #bdbdbd;
            width: 10rem;
            background-color: #fff;
            border-radius: 0.625rem;
            & > div {
              position: relative;
              padding: 0.255rem 1.125rem;
              & > .secondWindow {
                padding: 0.3625rem 0;
                position: absolute;
                top: 0rem;
                left: 10rem;
                z-index: 10;
                border: 1px solid #bdbdbd;
                width: 10rem;
                background-color: #fff;
                border-radius: 0.625rem;
                & > div {
                  padding: 0.255rem 1.125rem;
                  color: #8fa3ae;
                  & > div {
                    position: relative;
                    & > .threeWindow {
                      padding: 0.3625rem 0;
                      position: absolute;
                      top: -1rem;
                      left: -11.275rem;
                      z-index: 10;
                      border: 1px solid #bdbdbd;
                      width: 10rem;
                      background-color: #fff;
                      border-radius: 0.625rem;
                      & > div {
                        padding: 0.255rem 1.125rem;
                        color: #8fa3ae;
                      }
                      & > div:hover {
                        background-color: #52b6e3;
                        color: #fff;
                      }
                    }
                  }
                }
                & > div:hover {
                  background-color: #52b6e3;
                  color: #fff;
                }
              }
            }
            & > div:hover {
              background-color: #52b6e3;
              color: #fff;
            }
          }
        }
        & > div {
          height: 5.875rem;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #8fa3ae;
          & > img {
            margin-right: 0.625rem;
            width: 1.375rem;
            height: 1.375rem;
          }
        }
        & > div:nth-child(3) {
          margin-right: 10.125rem;
        }
        & > div:hover {
          cursor: pointer;
        }
      }
      & > .data_content {
        position: relative;
        margin-top: 1.25rem;
        width: 100%;
        height: 50rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        // border: 1px solid red;
        & > .data_left {
          overflow: auto;
          // width: 25.375rem;
          // height: 50.25rem;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
        }
        .data_center {
          width: 0.75rem;
          // height: 9.86rem;
          background-color: #8fa3ae;
          font-size: 0.75rem;
          color: #fff;
          letter-spacing: 0.1865rem;
        }

        & > .data_center:hover {
          cursor: w-resize;
          cursor: e-resize;
          user-select: none;
        }
        & > .data_right {
          // width: 58.125rem;
          // height: 50.25rem;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        }
        // 拖动
        & > .container {
          width: 25rem;
          height: 9.86rem;
          position: absolute;
          left: 12.6875rem;
          // border: 1px solid black;
          pointer-events: none;
          /deep/.vdr.active:before {
            outline: none;
          }
        }
        & > .container:hover {
          cursor: w-resize;
        }
      }
      & > .advancedStyle {
        margin-top: 0.75rem;
        width: 100%;
        height: 5.875rem;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        & > div {
          margin-right: 1.5625rem;
          width: 7.875rem;
          height: 3.125rem;
          background-color: #52b6e3;
          border-radius: 0.1875rem;
          color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 1.25rem;
        }
        & > div:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
