<template>
  <div class="chartsCont">
    <Echarts
      v-if="indStatic!==0"
      :echartsDatarts="echartsDatarts"
      @rowColInd="rowColInd"
      :echartsDatartsPie="echartsDatartsPie"
    ></Echarts>
    <el-table :data="tableData" style="width: 100%" height="360" ref="table">
      <!-- <el-table-column fixed prop="date" label="日期" width="150" sortable></el-table-column>
      <el-table-column prop="name" label="姓名" width="120" sortable></el-table-column>
      <el-table-column prop="province" label="省份" width="120" sortable></el-table-column>
      <el-table-column prop="city" label="市区" width="120" sortable></el-table-column>
      <el-table-column prop="address" label="地址" width="300" sortable></el-table-column>-->
      <el-table-column
        :prop="item.labelId"
        :label="item.label"
        :fixed="index===0?true:false"
        width="180"
        sortable
        v-for="(item,index) in tableLine"
        :key="index"
      >
        <template slot-scope="scope" slot="header">
          <img
            :src="indexToExplain"
            alt
            v-if="index!==0&&!transState&&areaDataState!=='area'&&!computedLineSty(index)"
            class="slotExplain"
            :style="{'margin':indStatic===0?'0':''}"
            @click="indexExplain(scope.column.label)"
          />
          <input
            v-if="index!==0&&indStatic!==0"
            type="checkbox"
            style="cursor: pointer;"
            @click.stop="listInput(index)"
            :style="{'margin':'0 0.45rem'}"
            :checked="listInputVal.indexOf(index)!==-1"
            ref="listInputSelect"
          />
          <span :style="{'color':computedLineSty(index)?'red':''}">{{scope.column.label}}</span>
        </template>
        <template slot-scope="scope">
          <input
            v-if="index===0&&indStatic!==0"
            type="checkbox"
            style="cursor: pointer;"
            @click.stop="lineInput(scope.$index)"
            :checked="lineInputVal.indexOf(scope.$index)!==-1"
            ref="lineInputSelect"
          />
          <img
            :src="indexToExplain"
            alt
            v-if="index===0&&transState&&areaDataState!=='area'&&!computedListSty(scope.$index)"
            class="slotExplain"
            :style="{'margin':indStatic===0?'0':''}"
            @click="indexExplain(scope.row['table_line0'])"
          />
          <span
            :style="{'color':(computedListSty(scope.$index)||computedLineSty(index))?'red':''}"
          >{{scope.row['table_line'+index]}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表 表说明-->
    <div class="tableExplain">{{transBefore.tableExplain}}</div>
    <!-- 指标弹窗 -->
  </div>
</template>

<script>
// 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata'
// 引入echarts 组件
import Echarts from '../echarts/echarts'
export default {
  name: 'chartsCont',
  components: {
    Echarts: Echarts
  },
  props: {
    indStatic: {
      type: Number,
      required: true
    },
    // 图表状态管理器
    chartsStatusMegger: {
      type: Object,
      required: true
    },
    // 渲染图表所需数据
    defaultDataRight: {
      type: Object,
      required: false
    }
  },
  data () {
    return {
      // 指标解释
      indexToExplain: require('../../../static/chatCont/zhibiaojieshi.png'),
      tableData: [
        {
          table_line1: '(1,1)5456456456456456456454564564',
          table_line2: '(1,2)',
          table_line3: '(1,3)',
          table_line4: '(1,4)',
          table_line5: '(1,5)',
          table_line6: '(1,6)',
          table_line7: '(1,7)',
          table_line8: '(1,8)',
          table_line9: '(1,9)',
          table_line10: '(1,10)',
          table_line11: '(1,11)',
          table_line12: '(1,12)',
          table_line13: '(1,13)',
          table_line14: '(1,14)',
          table_line15: '(1,15)',
          table_line16: '(1,16)'
        },
        {
          table_line1: '(1,1)546454',
          table_line2: '(1,2)',
          table_line3: '(1,3)',
          table_line4: '(1,4)',
          table_line5: '(1,5)',
          table_line6: '(1,6)',
          table_line7: '(1,7)',
          table_line8: '(1,8)',
          table_line9: '(1,9)',
          table_line10: '(1,10)',
          table_line11: '(1,11)',
          table_line12: '(1,12)',
          table_line13: '(1,13)',
          table_line14: '(1,14)',
          table_line15: '(1,15)',
          table_line16: '(1,16)'
        }
      ],
      tableDataS: [
        {
          date: '2016-05-03',
          name: '王小名',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      // 列数据（label，labelId）
      tableLine: [
        {
          labelId: 'table_line1',
          label: '指标'
        },
        {
          labelId: 'table_line2',
          label: '2019年10月1日'
        },
        {
          labelId: 'table_line3',
          label: '2019年10月2日'
        },
        {
          labelId: 'table_line4',
          label: '2019年10月3日'
        },
        {
          labelId: 'table_line5',
          label: '2019年10月5日'
        },
        {
          labelId: 'table_line6',
          label: '2019年10月5日'
        },
        {
          labelId: 'table_line7',
          label: '2019年10月6日'
        },
        {
          labelId: 'table_line8',
          label: '2019年10月7日'
        },
        {
          labelId: 'table_line9',
          label: '2019年10月8日'
        },
        {
          labelId: 'table_line10',
          label: '2019年10月9日'
        },
        {
          labelId: 'table_line11',
          label: '2019年10月10日'
        },
        {
          labelId: 'table_line12',
          label: '2019年10月11日'
        },
        {
          labelId: 'table_line13',
          label: '2019年10月12日'
        },
        {
          labelId: 'table_line14',
          label: '2019年10月13日'
        },
        {
          labelId: 'table_line15',
          label: '2019年10月14日'
        },
        {
          labelId: 'table_line16',
          label: '2019年10月15日'
        }
      ],
      // 转置状态(true：时间在表头上，false：指标名称或者地区名称在表头上)
      transState: false,
      // 当前数据状态（monthly：月度数据，quarter：季度数据，year：年度数据，area：地区数据）
      areaDataState: this.$route.query.type,
      // 当前数据，统计数据中的哪一种text:('无','SUM求和','x平均数','MAX最大值','MIN最小值','MD中位数','MO众数','S²方差','S标准差'),stateType:('line','list')
      nowDataTJ: { text: '无', stateType: 'line' },
      // 转置前总数据
      transBefore: {
        // 数据表说明
        tableExplain: '注：    按照统计制度要求，我国CPI每五年进行一次基期轮换，2016年1月开始使用2015年作为新一轮的对比基期，前三轮基期分别为2000年、2005年和2010年。CPI基期轮换是一项国际惯例，目的是使CPI调查所涉及到的商品和服务更具有代表性，更及时准确反映居民消费结构的新变化和物价的实际变动。 参考联合国制定的《按目的划分的个人消费分类》（COICOP）和国家统计局发布的《居民消费支出分类（2013）》，我们对CPI调查目录进行了调整，新基期调查目录和规格品与国际标准更为接近，一些新产品新服务纳入其中，能进一步反映居民消费和经济结构的变化。与上一轮基期相比，本轮基期的CPI调查目录有几个主要变化。一是按照《居民消费支出分类（2013）》，原来的“食品”、“烟酒”合并为现在的“食品烟酒”；原来的“医疗保健和个人用品”被拆分到现在的“生活用品及服务”、“医疗保健”和“其他用品和服务”中；原来的“娱乐教育文化用品及服务”被拆分到现在的“教育文化和娱乐”和“其他用品和服务”中；原来的“家庭设备用品及维修服务”被拆分到现在的“生活用品及服务”和“其他用品及服务”中。二是食品的指标内涵发生了变化，旧分类中的“食品”为大类，包括粮食、肉禽、鲜菜、鲜果、水产品、茶及饮料、在外餐饮等分类；新“食品”为“食品烟酒”大类下的中类，仅包括粮食、畜肉、禽肉、鲜菜、鲜果、水产品等，不再包括“茶及饮料”和“在外餐饮”两项。三是新增了“园艺花卉及用品”、“宠物及用品”、“养老服务”和“金融服务”等居民支出增加较快的分类，能够更加及时准确反映居民消费结构的新变化。',
        // 时间（2019年10月30日）
        timeArr: ['2019年10月23日', '2019年10月24日', '2019年10月25日', '2019年10月26日', '2019年10月27日', '2019年10月28日', '2019年10月29日', '2019年10月30日'],
        // 指标名称
        termsName: ['价格指数', '工业', '能源', '固定资产投资', '服务业生产指数', '城镇调查失业率', '房地产', '国内贸易'],
        // 指标解释
        termsExplain: ['价格指数指标解释', '工业指标解释', '能源指标解释', '固定资产投资指标解释', '服务业生产指数指标解释', '城镇调查失业率指标解释', '房地产指标解释', '国内贸易指标解释'],
        // 地区名
        areaName: ['北京市', '临沂市', '上海市', '河北省', '兰陵县', '天津市', '兰山区', '荣盛锦绣外滩'],
        // (行：指标名称，列：指标、时间)===>第一列为指标 { 指标名称数据 }
        transBeforeTermsData: [
          ['10210.23', '10152.23', '12556.23', '23689.23', '25698.01', '54565.26', '48915.32', '15862.32'],
          ['10520.23', '10212.23', '12526.23', '23689.23', '25658.01', '54665.26', '57915.32', '71762.32'],
          ['10530.23', '10242.23', '12565.23', '23389.23', '25698.01', '46365.26', '59145.32', '16233.32'],
          ['10320.23', '10252.23', '15650.23', '23089.23', '25498.01', '53065.26', '55845.32', '45633.32'],
          ['13230.23', '10622.23', '89785.23', '23889.23', '25498.01', '78965.26', '46845.32', '36733.32'],
          ['14520.23', '45622.23', '89455.23', '45739.23', '49898.01', '53965.26', '49845.32', '16733.32'],
          ['14540.23', '44562.23', '89945.23', '45576.23', '56898.01', '46965.26', '59845.32', '54563.32'],
          ['14210.23', '44562.23', '48994.23', '43476.23', '25698.01', '79696.26', '44565.32', '65563.32']
        ],
        // (行：地区名，列：地区、时间)===>第一列为地区{ 地区名称数据 }
        transBeforeAreaData: [
          ['23210.23', '10562.23', '12456.23', '23696.23', '69598.01', '54543.26', '57157.32', '15352.32'],
          ['10350.23', '10612.23', '12786.23', '26589.23', '56698.01', '56934.26', '56915.32', '45962.32'],
          ['10450.23', '10542.23', '12665.23', '29639.23', '21259.01', '54495.26', '25945.32', '55483.32'],
          ['13692.23', '10262.23', '12625.23', '22628.23', '25298.01', '52625.26', '52245.32', '26233.32'],
          ['13690.23', '26222.23', '89762.23', '23889.23', '25428.01', '56265.26', '57445.32', '56233.32'],
          ['13690.23', '45622.23', '89225.23', '45629.23', '25298.01', '32965.26', '57845.32', '14533.32'],
          ['13650.23', '46222.23', '32445.23', '45576.23', '21528.01', '45265.26', '56245.32', '14263.32'],
          ['14230.23', '42622.23', '48262.23', '43426.23', '21268.01', '78626.26', '56265.32', '16263.32']
        ]
      },
      // 调用存储的对象
      objCompBefore: null,
      // echarts渲染的数据======>非饼图
      echartsDatarts: {},
      // 饼图数据
      echartsDatartsPie: {},
      // 行列转换索引状态0行1列
      rowColIndex: 0,
      // 存input列选中的值
      listInputVal: [1, 2, 3], // 初始化选中3个
      // 存input行选中的值
      lineInputVal: [0, 1, 2, 3], // 初始化选中4个
      lineStatic: true,
      // 上一次图形是否为执行状态，
      pieStatic: false,
      // 获取数据所用参数
      // 晒选状态   1筛选指标 2筛选地区
      selectState: 1
    }
  },
  watch: {
    // 监听对象
    // chartsStatusMegger: {
    //   handler (newval, oldVal) {
    //     this.transState = this.chartsStatusMegger.transState
    //     this.nowDataTJ = this.chartsStatusMegger.computedStatic
    //     this.showTable()
    //   },
    //   immediate: true,
    //   deep: true
    // }
    indStatic (newValue, oldValue) {
      console.log(newValue, 'newValue1212')
      this.chartsShow()
    },
    'chartsStatusMegger.transState': {
      handler () {
        this.transState = this.chartsStatusMegger.transState
        this.showTable()
      },
      immediate: true,
      deep: true
    },
    'chartsStatusMegger.computedStatic': {
      handler () {
        console.log(this.chartsStatusMegger, 1255555)
        this.nowDataTJ = this.chartsStatusMegger.computedStatic
        this.dataTJComput()
        // 重新渲染表
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      immediate: true,
      deep: true
    },
    // 监听行列图表转换
    rowColIndex (newVal, oldVal) {
      this.chartsShow()
    },
    // 监听左侧菜单的数据变化
    defaultDataRight: {
      handler () {
        this.getDatas()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 非地区数据转置
    wrongAreaTrans () {
      if (this.transState) { // 当时间在表头上的时候
        this.objCompBefore = new ComputedData(this.transBefore)
        var objDatasBefore = this.objCompBefore.comTransBefore()
        this.tableLine = objDatasBefore.tableLine
        this.tableData = objDatasBefore.countData
        console.log(objDatasBefore, 'objDatasBefore')
      } else { // 当指标名称在表头上
        let objCompAfter = new ComputedData(this.transBefore)
        var objDatasAfter = objCompAfter.comTransAfter()
        this.tableLine = objDatasAfter.tableLine
        this.tableData = objDatasAfter.countData
        console.log(objDatasAfter, 'objDatasAfter')
      }
    },
    // 地区数据转置
    areaTrans () {
      if (this.transState) { // 当时间在表头上的时候
        this.objCompBefore = new ComputedData(this.transBefore)
        var objDatasBefore = this.objCompBefore.comTransAreabefore()
        this.tableLine = objDatasBefore.tableLine
        this.tableData = objDatasBefore.countData
        console.log(objDatasBefore, 'objDatasAfter')
      } else { // 当指标名称在表头上
        let objCompAfter = new ComputedData(this.transBefore)
        var objDatasAfter = objCompAfter.comTransAreaAfter()
        this.tableLine = objDatasAfter.tableLine
        this.tableData = objDatasAfter.countData
        console.log(objDatasAfter, 'objDatasAfter')
      }
    },
    // 渲染列表数据
    showTable () {
      // 改变转置状态
      // this.transState = !this.transState
      if (this.areaDataState !== 'area') { // 非地区数据转置
        this.wrongAreaTrans()
      } else { // 地区数据转置
        this.areaTrans()
      }
    },
    // 指标解释
    indexExplain (labIndexName) {
      if (this.transBefore.termsName.indexOf(labIndexName) !== -1) {
        console.log('指标解释：', this.transBefore.termsExplain[this.transBefore.termsName.indexOf(labIndexName)])
      }
    },
    // 统计数据对行，对列处理
    dataTJComput () {
      if (this.nowDataTJ.stateType === 'line') {
        switch (this.nowDataTJ.text) {
          case '无':
            break
          case 'SUM求和':
            let datartSUM = this.objCompBefore.dataSumLine()
            this.tableLine = datartSUM.tableLine
            this.tableData = datartSUM.countData
            console.log(datartSUM, 'sum')
            break
          case 'x平均数':
            let datartAVG = this.objCompBefore.dataAVGLine()
            this.tableLine = datartAVG.tableLine
            this.tableData = datartAVG.countData
            console.log(datartAVG, 'AVG')
            break
          case 'MAX最大值':
            let datartMAX = this.objCompBefore.dataMAXLine()
            this.tableLine = datartMAX.tableLine
            this.tableData = datartMAX.countData
            console.log(datartMAX, 'MAX')
            break
          case 'MIN最小值':
            let datartMIN = this.objCompBefore.dataMINLine()
            this.tableLine = datartMIN.tableLine
            this.tableData = datartMIN.countData
            console.log(datartMIN, 'MIN')
            break
          case 'MD中位数':
            let datartMD = this.objCompBefore.dataMDLine()
            this.tableLine = datartMD.tableLine
            this.tableData = datartMD.countData
            console.log(datartMD, 'MD')
            break
          case 'MO众数':
            let datartMO = this.objCompBefore.dataMOLine()
            this.tableLine = datartMO.tableLine
            this.tableData = datartMO.countData
            console.log(datartMO, 'MO')
            break
          case 'S²方差':
            let datartSS = this.objCompBefore.dataSSLine()
            this.tableLine = datartSS.tableLine
            this.tableData = datartSS.countData
            console.log(datartSS, 'SS')
            break
          case 'S标准差':
            let datartS = this.objCompBefore.dataSLine()
            this.tableLine = datartS.tableLine
            this.tableData = datartS.countData
            console.log(datartS, 'S')
            break
        }
      } else {
        switch (this.nowDataTJ.text) {
          case '无':
            break
          case 'SUM求和':
            let datartSUM = this.objCompBefore.dataSumList()
            this.tableLine = datartSUM.tableLine
            this.tableData = datartSUM.countData
            console.log(datartSUM, 'sum')
            break
          case 'x平均数':
            let datartAVG = this.objCompBefore.dataAVGList()
            this.tableLine = datartAVG.tableLine
            this.tableData = datartAVG.countData
            console.log(datartAVG, 'AVG')
            break
          case 'MAX最大值':
            let datartMAX = this.objCompBefore.dataMAXList()
            this.tableLine = datartMAX.tableLine
            this.tableData = datartMAX.countData
            console.log(datartMAX, 'MAX')
            break
          case 'MIN最小值':
            let datartMIN = this.objCompBefore.dataMINList()
            this.tableLine = datartMIN.tableLine
            this.tableData = datartMIN.countData
            console.log(datartMIN, 'MIN')
            break
          case 'MD中位数':
            let datartMD = this.objCompBefore.dataMDList()
            this.tableLine = datartMD.tableLine
            this.tableData = datartMD.countData
            console.log(datartMD, 'MD')
            break
          case 'MO众数':
            let datartMO = this.objCompBefore.dataMOList()
            this.tableLine = datartMO.tableLine
            this.tableData = datartMO.countData
            console.log(datartMO, 'MO')
            break
          case 'S²方差':
            let datartSS = this.objCompBefore.dataSSList()
            this.tableLine = datartSS.tableLine
            this.tableData = datartSS.countData
            console.log(datartSS, 'SS')
            break
          case 'S标准差':
            let datartS = this.objCompBefore.dataSList()
            this.tableLine = datartS.tableLine
            this.tableData = datartS.countData
            console.log(datartS, 'S')
            break
        }
      }
      this.chartsShow()
    },
    // 图表渲染
    chartsShow () {
      // 改变值行值

      switch (this.indStatic) {
        case 1:
          if (this.pieStatic) {
            // 存input列选中的值
            this.listInputVal = [1, 2, 3] // 初始化选中3个
            // 存input行选中的值
            this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
          }
          this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
          this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataVerticalMapRow()) : (this.echartsDatarts = this.objCompBefore.dataVerticalMapCol())
          this.pieStatic = false
          break
        case 2:
          if (this.pieStatic) {
            // 存input列选中的值
            this.listInputVal = [1, 2, 3] // 初始化选中3个
            // 存input行选中的值
            this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
            console.log(2121)
          }
          this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
          this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataAcrossMapRow()) : (this.echartsDatarts = this.objCompBefore.dataAcrossMapCol())
          this.pieStatic = false
          break
        case 3:
          console.log(this.lineStatic, this.rowColIndex, '555025')
          if (this.lineStatic && this.rowColIndex === 0) {
            this.lineInputVal = [0]
            this.listInputVal = [1, 2, 3]
            this.lineStatic = true
          } else if (!this.lineStatic && this.rowColIndex === 1) {
            this.lineInputVal = [0, 1, 2, 3]
            this.listInputVal = [1]
            this.lineStatic = true
          }
          console.log(this.listInputVal, this.lineInputVal)
          this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
          this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataPieMapRow()) : (this.echartsDatarts = this.objCompBefore.dataPieMapCol())
          this.pieStatic = true
          break
        case 4:
          if (this.pieStatic) {
            // 存input列选中的值
            this.listInputVal = [1, 2, 3] // 初始化选中3个
            // 存input行选中的值
            this.lineInputVal = [0, 1, 2, 3]// 初始化选中4个
          }
          this.objCompBefore.inputSelectData(this.listInputVal, this.lineInputVal)
          this.rowColIndex === 0 ? (this.echartsDatarts = this.objCompBefore.dataBrokenLineMapRow()) : (this.echartsDatarts = this.objCompBefore.dataBrokenLineMapCol())
          this.pieStatic = false
          break
      }
    },
    // 图表行列转换
    rowColInd (ind) {
      // 0行1列
      this.rowColIndex = ind
    },
    // 每列input选中
    listInput (ind) {
      console.log(ind, '列')
      if (this.indStatic === 3 && this.rowColIndex === 1) {
        this.listInputVal = [ind]
        this.$refs.listInputSelect[ind].checked = true
      } else {
        this.listInputVal.indexOf(ind) === -1 ? (this.listInputVal.push(ind)) : (this.listInputVal.splice(this.listInputVal.indexOf(ind), 1))
      }
      this.chartsShow()
    },
    // 每行input选中
    lineInput (ind) {
      console.log(ind, '行')
      if (this.indStatic === 3 && this.rowColIndex === 0) {
        this.lineInputVal = [ind]
        this.$refs.lineInputSelect[ind].checked = true
      } else {
        this.lineInputVal.indexOf(ind) === -1 ? (this.lineInputVal.push(ind)) : (this.lineInputVal.splice(this.lineInputVal.indexOf(ind), 1))
      }

      this.chartsShow()
    },
    // 获取后台数据表中的数据
    getDatas () {
      console.log(this.defaultDataRight, '获取数据')
      this.$axios({
        method: 'GET',
        url: 'data/data/detail',
        params: {
          type: this.$route.query.type === 'area' ? 1 : 2, // 1非地区   2地区
          table_name: this.defaultDataRight.table_name, // 表名
          id: this.defaultDataRight.id, // 分类id
          area: '', // 选中的地区
          quota: this.defaultDataRight.name, // 选中的指标
          cate: this.selectState// 1帅选指标  2筛选地区
        }
      }).then(res => {
        console.log(res, '获取数据展示数据')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
        }
      }).catch((fail) => {
        console.log(fail, 2369)
      })
    }
  },
  computed: {
    // 行计算样式
    computedLineSty () {
      return (ind) => {
        let styStatic = false
        if (this.transState) {
          if (ind > (this.transBefore.transBeforeTermsData.length)) {
            styStatic = true
          }
        } else {
          if (ind > (this.transBefore.transBeforeTermsData[0].length)) {
            styStatic = true
          }
        }
        return styStatic
      }
    },
    // 列计算样式
    computedListSty () {
      return (ind) => {
        let styStatic = false
        if (this.transState) {
          if (ind > (this.transBefore.transBeforeTermsData.length - 1)) {
            styStatic = true
          }
        } else {
          if (ind > (this.transBefore.transBeforeTermsData[0].length - 1)) {
            styStatic = true
          }
        }
        return styStatic
      }
    }
  },
  mounted () {
    // console.log(new ComputedData())
    this.showTable()
    // 转置状态
    this.transState = this.chartsStatusMegger.transState
    this.getDatas()
  }
}
</script>
<style lang="scss" scoped>
.chartsCont {
  margin: 1.5rem 0;
  border: 0.0625rem solid red;
  padding: 0 1.5rem;
  & > .tableExplain {
    padding: 0.75rem;
    margin: 1.75rem auto;
    // width: 53.375rem;
    height: 18rem;
    border: 0.0625rem solid rgba(172, 172, 172, 0.38);
    border-radius: 0.5rem;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
    // line-height: 1.8rem;
    overflow-y: scroll;
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.5rem;
    letter-spacing: 0.125rem;
    color: #333333;
  }
  & > .tableExplain::-webkit-scrollbar {
    display: none;
  }
}
// 指标解释
.slotExplain {
  margin: 0 0.2rem 0 0.6rem;
  width: 1.5rem;
  height: 1.5rem;
}
.slotExplain:hover {
  cursor: pointer;
}
/deep/ .el-table .cell {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
</style>
