<template>
  <div class="container">
    <!-- 工具条 -->
    <div class="btn-toolbar">
      <!-- 后退 -->
      <el-dropdown split-button :size="size" :disabled="backDisabled" @command="backCommand" @click="backClick">
        <i class="el-icon-back"></i>后退
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 前进 -->
      <el-dropdown split-button :size="size" :disabled="goDisabled" @command="goCommand" @click="goClick">
        <i class="el-icon-right"></i>前进
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 排序 -->
      <el-dropdown split-button :size="size" class="sort" @command="sortClick">
        <i class="el-icon-sort"></i>排序
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="-1">不排序</el-dropdown-item>
          <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }}
            <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType =='desc' }"  @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType =='asc' }"  @click="sortUp"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 分析列设置 -->
      <el-button icon="el-icon-setting" :size="size" @click="analysisClick">分析列设置</el-button>
      <el-dropdown :size="size" @command="chartTypeChange">
        <el-button :size="size">
          <i class="el-icon-s-data"></i>
          图表<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="table">表格</el-dropdown-item>
          <el-dropdown-item command="pie">饼图</el-dropdown-item>
          <el-dropdown-item command="bar">柱图</el-dropdown-item>
          <el-dropdown-item command="line">线图</el-dropdown-item>
          <el-dropdown-item command="area">区域图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 刷新 -->
      <el-button icon="el-icon-refresh" :size="size" @click="refresh">刷新</el-button>
      <!-- 分析记录 -->
      <el-button icon="el-icon-edit-outline" :size="size" >分析记录</el-button>
      <!-- 叠加 -->
      <el-checkbox
        v-model="superposition"
        label="叠加"
        border
        :size="size" 
      ></el-checkbox>
      <!-- 透视 -->
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        :size="size" 
      ></el-checkbox>
      <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button>
    </div>
    <hi-layout :is-fit="true" style="heiht: 100%;">
      <!-- 右侧查询面板 -->
      <hi-layout-right size="300" title="过滤条件">
        <birt-work-book
          style="height: calc( 100% - 142px );border-bottom: 1px dashed #3179de;overflow: auto;"
          :conf="birtModelRight"
          :ref="birtModelRight.controlId"
        ></birt-work-book>
        <el-form
          @submit.native.prevent
          ref="groupForm"
          style="padding: 10px 10px 0 0;"
          :model="groupForm"
          label-width="80px"
        >
          <el-form-item label="分组条件" prop="prop">
            <el-select v-model="groupForm.prop" placeholder="请选择分组条件">
              <el-option
                v-for="item in groupFields"
                :label="item.label"
                :value="item.prop"
                :key="item.prop"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="loading"
              @click="doCount"
              >执行查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </hi-layout-right>
      <!-- 图表展示区 -->
      <hi-layout-center style="heiht: 100%;">
        <div class="depth-analysis">
          <span>深度分析:</span>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 0 0 0 10px;"
          >
            <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop"><span @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;">{{ item.label }}<span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span></span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            :show-summary="showSummary"
            style="width: 100%"
          >
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            :show-summary="showSummary"
            style="width: 100%"
          >
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Pie-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'pie'"
          ref="chartConf"
          :conf="chartConf"
        ></Pie-chart>
        <Bar-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'bar'"
          ref="chartConf"
          :conf="chartConf"
        ></Bar-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'line'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'area'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
      </hi-layout-center>
    </hi-layout>
    <!-- 分析列 -->
    <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column
          prop="countField"
          label="统计字段">
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格合计列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="图表列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" label="图表列汇总" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 分析字段 -->
    <el-dialog  :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
       <Pie-chart
          style="height: 400px;"
          ref="analysisChart"
          :conf="analysisChartConf"
        ></Pie-chart>
    </el-dialog>
  </div> 
</template>

<script>
import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory";
import _ from 'lodash'
export default {
  name: "AnalysisSam",
  props:{
    conf:{
      type: Object,
    }
  },
  computed: {
    // 后退
    backDisabled(){
      return this.curIndex === 0 
    },
    // 前进
    goDisabled(){
      return this.curIndex == this.deepArr.length - 1 || this.curIndex === 0
    },
    // 表格列
    tableColumns() {
      if(this.showDetail){
        return this.dataFields
      }else{
        // 获取当前分组列
        let curGroupArr = this.groupFields.filter(item =>{
          return item.prop == this.curGroupField
        })
        // 当前分组列+分系列
        let arr = curGroupArr.concat(this.analyseFields)
        if(arr && arr.length){
          this.sortArr = arr
        }
        return arr
      }
    },
    // 网格是否显示合计行
    showSummary(){
      let flag = false
      this.analysisData.some(item =>{
        flag = item.tableColumnCount
        return flag
      })
      return flag
    },
    //  数据列
    dataFields(){
      return this.conf && this.conf.dataFields || []
    },
    // 图表配置
    chartConf() {
      let groupBy = this.curGroupField;
      let calcFields = []
      calcFields = this.analyseFields.map(item =>{
        let obj = {
          name: item.prop,
          title: item.label
        }
        return obj
      })
      let controlName = ''
      let datas = this.data
      controlName = this.chartType == "pie" ? "PieChart"
                  : this.chartType == "bar" ? "BarChart"
                  : this.chartType == "line" ? "LineChart"
                  : this.chartType == "area" ? "LineChart" : 'PieChart'
      let pieSeries = [
        {
          smooth: true,
          areaStyle: {
            normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: {
            show: false,
            position: "outside",
          },
        },
        {
          smooth: true,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: {
            show: false,
            position: "outside",
          },
        },
      ];
      let series = []
      const conf = {
          controlName: controlName,
          controlId: "chart_controlid",
          height: "100%",
          isGroupData: true,
          groupBy: groupBy,
          datas: datas,
          calcFields: calcFields,
          option: {
            legend: {
              show: true
            },
            series: this.chartType == "area" ? pieSeries : series
          },
          events:{
            click(row){
              debugger
              let _this = this.$parent.$parent.$parent;
              _this.currentObj = row.data
              _this.currentObj.prop = _this.curGroupField;
              _this.analysisChartConf.datas = _this.deepAnalysisFields
              _this.analysisFieldsVisible = true
            }
          }
      };
      return conf 
    },
    //  深度分析字段列表
    deepAnalysisFields(){
      debugger
      let fields = this.groupFields
      if(fields && fields.length == 0){
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });
      
      // 排除已经统计的分析列
      if(this.deepArr && this.deepArr.length > 0){
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        analysisFields = analysisFields.filter(item =>{
          return arrnew.indexOf(item.prop) < 0
        })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: "详情",
          value: 1
        }
      )
      return analysisFields
    },
    // 查询字段
    queryFields(){
      let queryFields = []
      let fields = this.conf && this.conf.queryFields
      if(!fields || fields.length == 0){
        queryFields = []
      }else{
        queryFields = fields.map(item =>{
          let obj = {}
          obj.prop = item.prop
          if(item.element){
            let dbtype = '';
            let lookup = false
            switch(item.element){
              case "el-date-picker": 
                  dbtype = 'dbDatetime';
                  item.children = [{
                    controlName: 'Hc'
                  }]
              case "DtInput": dbtype = 'dbString';
              case "DtNumerical": dbtype = 'dbInt';
              case "DtNumericalRange": dbtype = 'dbInt';
              case "DtDateTime": dbtype = 'dbDatetime';
              case "DtSwitch": dbtype = 'dbInt';
              case "DtLookup": 
                dbtype = 'dbString';
                lookup = ''
            }
            obj.dbtype = dbtype
          }else{
            obj.dbtype = 'dbString'
          }
          return obj
        })
      }
      return queryFields
    },
    // 数据集
    dataset(){
      var dataset = {}
      if(this.conf && this.conf.dataset){
        let ds = this.conf.dataset
        dataset = {
          controlName: ds.controlName,
          controlId: ds.controlId,
          name: ds.name,
          modelFilePath: ds.modelFilePath,
          fields: ds.config.fields,
           _infcLoad: {
              autoActive: false
            },
            _infcPagging: {
              returnCount: true,
              pageSize: 100,
              pageNum: 1
            },
            data: [],
        }
      }
      return dataset
    },
    // 查询面板
    birtModelRight(){
      let rows = this.queryFields.map(item =>{
        return {children:[item],colspan: 6}
      })
      let cols = this.queryFields.map(item =>{
        return { colWidth: 60 }
      })
      const queryPanel = {
        rows: rows,
        cols: cols
      };
      let hcQueryPanel = {
        controlName: "HcQueryPanel",
        controlId: "HcQueryPanel_sam",
        inline: false,
        dataset: this.dataset && this.dataset.controlId || "dsSam",
        size: "small",
        hideBtn: true,
        style: "width: 100%;",
        children: []
      };
      Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
      let birtModelRight = {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_right",
        style: "border-bottom: 1px solid #eee;",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_right",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [].concat(this.dataset ? this.dataset : []),
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: [hcQueryPanel]
              }
            ]
          }
        ],
      };
      return birtModelRight
    },
    // 分组条件(统计字段)
    groupFields(){
      return this.conf && this.conf.groupFields || []
    },
    // 分析字段
    analyseFields(){
      return this.conf && this.conf.analyseFields || []
    },
    // 显示详情
    showDetail(){
      return this.currentObj.prop == 'detail'
    },
  },
  watch:{
    conf:{
      deep: true,
      handler: function(val){
        debugger
        if(val && val.groupFields && !this.groupForm.prop){
          this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop
          this.curGroupField = this.groupForm.prop
        }
        if(val && val.analyseFields && val.analyseFields.length){
          this.analysisData=val.analyseFields.map(item =>{
            let obj = {
              prop: item.prop,
              countField: item.label,
              tableColumn: true,
              tableColumnCount: true,
              chartColumn: true,
              chartColumnCount: true,
            }
            return obj
          })
        }
      }
    }
  },
  data() {
    return {
      size: 'small',
      superposition: false,
      perspective: false,
      chartType: "table",
      groupForm: {
        prop: ""
      },
      loading: false,
      currentPage: 1,
      pageSize: 100,
      total: 0,
      data: [],
      // 排序
      sortArr:[],
      sortIndex:-1,
      sortType: '',
      // 分析列
      analysisVisible: false,
      analysisData:[],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr:[],
      analysisChartConf:{
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events:{
          click(row){
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length -1]
            obj.selectVal = _this.currentObj.name
            _this.$set(_this.deepArr,_this.curIndex,obj)
            _this.$set(_this.deepArr,_this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.doQuery();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr:[],
      conf:{},
      // 图表当前选中对象
      currentObj:{},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
      exportLoading: false
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    //  排序
    sortClick(val) {
      this.sortIndex = val
    },
    sortDown(){
      this.sortType = 'desc'
    },
    sortUp(){
      this.sortType = 'asc'
    },
    // 前进
    goCommand(val){
      let index = this.curIndex + val;
      this.curIndex = index;
      this.currentObj = this.deepArr[index];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    goClick:_.debounce(function(){
      if(this.curIndex < this.deepArr.length - 1){
        this.curIndex = this.curIndex + 1;
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 后退
    backCommand(val){
      this.curIndex = val
      this.currentObj = this.deepArr[val];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    backClick:_.debounce(function(){
      if(this.curIndex > 0){
        this.curIndex = this.curIndex - 1
        this.currentObj = this.deepArr[val];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    },500),
    // 深度分析
    breadcrumbClick(val) {
      debugger
      this.curGroupField = val
      let arrnew = this.deepArr.map(item =>{
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
      // 数据替换成缓存的数据
      this.data = this.currentObj.data
    },
    // 点击查询
    doCount() {
      debugger;
      this.loading = true;
      this.doQuery();
      let prop = this.groupForm.prop;
      let fields = this.groupFields.map(item =>{
        return item.prop
      })
      this.curGroupField = prop;
      let index = fields.indexOf(prop)
      if(this.deepArr.length){
        // 如果切换了分组条件，清空深度分析
        if(this.deepArr[0] && this.deepArr[0].prop !== prop){
          this.deepArr = []
          this.currentObj = this.groupFields[index]
        }else{
          this.currentObj = this.deepArr[0]
        }
      }
      // 当前分组加入深度分析
      if(index < 0){
        this.$message.error('当前分组条件不在分组字段中，请重新配置')
      }else{
        this.$set(this.deepArr,0,this.groupFields[index])
        this.curIndex = 0
      }
      // 监听数据集
      if(this.dataset){
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        this.$nextTick(() =>{
          ds && ds.on("afterLoadData", afterLoadData);
          ds.vm = this
          function afterLoadData(datas){
              this.vm.data = datas
              // 缓存数据
              this.vm.deepArr[this.vm.curIndex].data = datas
          }
        })
      }
    },
    // 查询方法
    doQuery(){
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if(this.showDetail){
        ds._infcPagging = {
          pageSize: this.pageSize,
          pageNum: this.currentPage
        };
        ds._infcStat = {}
         ds._infcSort = {}
      }else{
        ds._infcPagging = {
          pageSize: this.pageSize,
          pageNum: this.currentPage
        };
        ds._infcStat = {
          isGroupData: true,
          groupBy: this.curGroupField,
        }
        if(this.sortIndex > -1){
          let obj = this.sortArr[this.sortIndex]
          ds._infcSort.orderBy =[{
            name: obj.prop, 
            desc: obj.label, 
            type: this.sortType || 'desc'
          }]
        }else{
          ds._infcSort.orderBy = []
        }
      }
      ds.query();
      this.loading = false;
    },
    //  重置
    reset() {
      this.$refs.groupForm.resetFields();
      this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop;
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 切换图表
    chartTypeChange(command) {
      this.chartType = command;
    },
    // 打开分析列
    analysisClick(){
      this.analysisVisible = true
    },
    // 分系列全选
    handelCheckAll(val){
      debugger
      let _this = this
      this.analysisData = this.analysisData.map(item => {
        if(val == 'tableColumn') {
          item.tableColumn = _this.tableColumnCheck
        }
        if(val == 'tableColumnCount') {
          item.tableColumnCount = _this.tableColumnCountCheck
        }
        if(val == 'chartColumn') {
          item.chartColumn = _this.chartColumnCheck
        }
        if(val == 'chartColumnCount') {
          item.chartColumnCount = _this.chartColumnCountCheck
        }
        return item
      })
    },
    // 刷新
    refresh(){
      this.doQuery();
      this.$refs.chartConf && this.$refs.chartConf.refreshChart();
    },
    // 导出
    exportExcel() {
        debugger
        let param = {
            pageNum: -1,
            pageSize: -1,
            __slaveExport: false,
        };
        let __body = {};
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        var cdion = ds.lastLoadCdion
        console.log('cdion', cdion)
        if (cdion) {
            __body['queryCdions'] = JSON.parse(cdion);
        }
        param['modelFilePath'] = ds['modelFilePath'];
        param['__funcpath'] = ds['__funcpath'];
        param.__body = __body
        let sheetStyle = {}
        let cells = []
        let columns = []
        this.tableColumns.forEach(item => {
          cells.push({
            title: item.label,
            colspan: 1,
            rowspan: 1
          })
          columns.push({
            fields: item.prop,
            width: 70
          })
        });
        sheetStyle = {
        name: '统计分析',
        titleRows: [
          {
            cells: cells
          }
        ],
        columns: columns
      }
        param.__sheetStyle = sheetStyle
        var data = {
            __sheetDatas: JSON.stringify([param])
        }
        var url = this.$HI.exportUrl
        this.exportLoading = true
        this.$HI.request.post(url,data).then((res) =>{
            console.log('res', res)
            this.exportLoading = false
            if(res.status == 200){
                let token = getToken();
                var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}`
                url = url.replace(/\\/g,"/")
                const a = document.createElement('a') //创建a标签
                a.style.display = 'none'
                a.href = url // 指定下载链接
                // a.download = '用户信息.xlsx' //指定下载文件名
                a.click() //触发下载
            }
        }).catch((e) =>{
            this.exportLoading = false
        })
    },
  },
  mounted() { 
    
  }
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}
.btn-toolbar {
  * + * {
    margin-left: 10px;
    margin-right: 0;
  }
}
.el-dropdown-menu__item {
  min-width: 90px;
}
.center-content {
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.depth-analysis {
  display: flex;
  align-items: center;
  padding: 10px;
}
.el-breadcrumb__item a {
  cursor: pointer !important;
}
.deepActive{
  color: #06c;
  font-weight: 600;
}
.sortActive{
  color: rgb(33, 235, 141);
  font-weight: 600;
}
>>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
  background: initial;
  color: initial;
}
.el-dropdown-menu__item i{
  font-weight: 600;
  margin: 0 0 0 5px;
}
.el-dropdown-menu__item i:hover {
  color: rgb(33, 235, 141);
}
</style>