<template>
  <div
    @click="itemClick($event,item)"
    ref="biReportLayout"
    :class="'height100 biReport-contanier '+(isEditable?'isEditable-con':'')+
    (!isShowBigScreen&&(item.showBorder||(item.type=='panel'||item.type=='filter'||(item.type=='biElement'&&(item.state==1 ||item.state==5||item.state==6))&&typeof item.showBorder == 'undefined')||
    (item.type=='table'&&(!item.border||item.border.indexOf('none')==-1)))?'boxShadow':'')"
    :type="item.type"
    :id="item.id"
    v-if="(isEditable||showMData)?true:(item.type=='screen'&&item.state=='9'?true:!item.isHide)"
    v-show="(isEditable||showMData)?true:(item.type=='screen'&&item.state=='9'?!item.isHide:true)"
    :style="{width:'100%',background:(item.groundColor||(item.type=='screen'?'transparent':'#fff')),overflow:'hidden',
  overflowY: (item.type!='table'&&item.type!='chart'&&item.type!='screen'&&item.type!='filter'&&item.type!='biElement') ?'auto':'hidden',border:(item.showBorder||(item.type=='panel'||(item.type=='biElement'&&item.state==1))&&typeof item.showBorder == 'undefined')?'1px solid var(--border_color)':'none',boxSizing:'border-box'}"
    @scroll="scroll($event,item)"
  >
    <!-- 操作小工具-->
    <span
      v-if="isEditable"
      class="icon-static iconfont icon-fixed font12"
      :style="'color:'+(item.static?'#f59a23':'#333333c2')"
      @click="onStatic($event,item)"
    ></span>
    <div class="biUserDefined-item__operate" v-if="isEditable">
      <span @click="onRefreshBusiness($event,item)" v-if="item.type == 'business'" title="刷新">
        <i class="iconfont icon-shuaxin1 font12"></i>
      </span>
      <span @click="onDesign($event,item)" v-if="item.type == 'business'" title="设计">
        <i class="iconfont icon-guihuasheji font12"></i>
      </span>
      <span @click="onCopy($event,item)" title="复制">
        <i class="iconfont icon-jianmo font12"></i>
      </span>
      <span @click="onDelete($event,item)" title="删除">
        <i class="iconfont icon-Group-17 font12"></i>
      </span>
    </div>
    <div class="biUserDefined-item__handle" ref="itemHandle" v-if="isEditable"></div>
    <tsLoading
      v-if="!isEditable&&!showMData"
      :loading="itemLoading"
      :type="item.type=='table'?'spinner':''"
    ></tsLoading>
    <!-- formId+isFromPreview+isEditable+showMData+ -->
    <component
      :is="item.borderType&&(isShowBigScreen||isEditable)?item.borderType:'template'"
      class="flexYbox height100 template-contanier"
      ref="borderTypeTemp"
      :key="item.borderType?(formId+isFromPreview+isEditable+showMData+(item.dataVKey||'')+dataVKey_):''"
      style="width:100%"
      :color="['#0071FC ','#02D9FD']"
    >
      <div v-if="item.type=='table'" class="biUserDefined__table">
        <bi-table
          :showSearch="item.showSearch || false"
          :id="item.id"
          v-if="isEditable||showMData"
          :isNoHint="true"
          ref="tsTable"
          :key="item.id"
          :source="sourceFn(item)"
          :colModels="JSON.stringify(sourceFn(item).colModel)"
          :offPages="item.offPage || false"
          :rownumbers="item.rownumbers || false"
          width="100%"
          height="100%"
          :headerOverflow="item.headerOverflow"
          :border="item.border"
          :showHeader="item.showHeader"
          :styleData="item"
          @HeaderClick="headerClickEvent(arguments,item)"
          @columnDrop="columnDrop(arguments,item)"
          :keyId="item.id"
        ></bi-table>

        <ts-table
          :showSearch="item.showSearch || false"
          :isNoHint="true"
          :showHeader="item.showHeader"
          :border="item.border"
          :headerOverflow="item.headerOverflow"
          :isHideFunc="item.isHideFunc"
          v-else
          ref="tsTable"
          :styleData="item"
          :source="sourceRealFn(this.item)"
          width="100%"
          height="100%"
          @HeaderClick="headerClickEvent(arguments,item)"
          @cellClick="cellClickEvent(arguments,item)"
        ></ts-table>
      </div>
      <!-- 图表控件-->
      <div v-if="item.type=='chart'" class="flexYbox height100" @click="chartClick($event,item)">
        <ts-g2-plot
          v-if="item.cate == 'plot'"
          :themeCode="item.themeCode"
          :showBorder="false"
          :title="item.title"
          :targetUnit="item.targetUnit"
          :isPercent="item.isPercent"
          :maintitle="item.controlTitle"
          :subtitle="item.subTitle"
          :isShowValue="item.isShowValue"
          :chartType="item.state"
          :legendPos="item.legendPos"
          :emptyText="item.emptyText"
          :position="item.position"
          :showPercent="item.showPercent||false"
          :maxNumber="item.maxNumber"
          :isSlider="item.isSlider||false"
          :sliderRange="item.sliderRange||[0,100]"
          :point="item.point||false"
          :smooth="item.smooth||false"
          :detail="item.detail"
          :source="chartSourceFn(item)"
          :data="(isEditable||showMData)?topBarItemJSON._csdata:biData"
          :id="item.id"
          ref="tsChart"
          height="100%"
          width="100%"
          :timeout="item.isContanier?200:0"
          :theme="isShowBigScreen?'dark':''"
        />
        <dash-board
          v-else-if="item.cate == 'custom'"
          :title="item.title"
          :showBorder="false"
          :isShowBigScreen="isShowBigScreen"
          :emptyText="item.emptyText"
          :unit="item.unit"
          :config="item"
          :isEditable="isEditable"
          :chartType="item.state"
          :data="(isEditable||showMData)?topBarItemJSON._csdata:biData"
        ></dash-board>
        <ts-g2-chart
          v-else
          :title="item.title"
          :showBorder="false"
          :maintitle="item.controlTitle"
          :subtitle="item.subTitle"
          :chartType="item.state"
          :legendPos="item.legendPos"
          :emptyText="item.emptyText"
          :showPercent="item.showPercent||false"
          :maxNumber="item.maxNumber"
          :isSlider="item.isSlider||false"
          :point="item.point||false"
          :smooth="item.smooth||false"
          :detail="item.detail"
          :source="chartSourceFn(item)"
          :data="(isEditable||showMData)?topBarItemJSON._csdata:biData"
          :id="item.id"
          ref="tsChart"
          height="100%"
          width="100%"
          :timeout="item.isContanier?200:0"
          :theme="isShowBigScreen?'dark':''"
        />
      </div>
      <!-- 面板控件-->
      <div v-if="item.type=='panel'" class="flexYbox height100">
        <ts-title-panel
          :data="item"
          :title="item.controlTitle"
          ref="tsPanel"
          :titleStructure="item.titleStructure"
          :backgroundColor="item.panelBackgroundColor||'transparent'"
          :titleBackgroundColor="item.titleBackgroundColor||'transparent'"
          :groundColor="item.groundColor||'transparent'"
          :isBorder="false"
          :showTitleSlot="item.rightTitle?true:false"
        >
          <div
            slot="titleSlot"
            v-if="item.rightTitle"
            :style="{marginLeft: 'auto',fontSize:(item.rightFontSize||12)+'px',color:item.rightColor,textDecoration:item.rightDeco?'underline':'none',cursor:item.rightTitleUrl?'pointer':'none'}"
            @click="clickRightTitle(item)"
          >{{item.rightTitle}}</div>
          <grid-main-layout
            ref="tabMainLayout"
            v-if="item.natureArr&&item.natureArr.length>0"
            :layoutList="[...item.natureArr]"
            :isDraggable="isEditable"
            :isEditable="isEditable"
            :showMData="showMData"
            :isResizeable="isEditable"
            @refreshData="refreshData"
            @interData="interData"
            :formId="formId"
            :isHeightFit="isHeightFit"
            @changeYH="changeYH"
            :isShowBigScreen="isShowBigScreen"
          ></grid-main-layout>
        </ts-title-panel>
      </div>
      <!-- 业务控件-->
      <div v-if="item.type=='business'" class="flexYbox height100">
        <!-- 业务组件遮罩，取消内部的选择区域-->
        <div class="business__handle handle" v-if="isEditable" @click="itemClick($event,item)"></div>
        <grid-main-layout
          v-if="item.natureArr&&item.natureArr.length>0"
          ref="businessMainLayout"
          :layoutList="item.natureArr"
          :isDraggable="false"
          :isEditable="false"
          :isResizeable="false"
          :showMData="isEditable"
          @refreshData="refreshData"
          @interData="interData"
          :formId="formId"
          :isHeightFit="isHeightFit"
          @changeYH="changeYH"
          :layoutType="item.type"
          :isShowBigScreen="isShowBigScreen"
        ></grid-main-layout>
      </div>
      <div
        v-if="item.type=='tab'"
        :class="'biUserDefined__tab flexYbox height100 '+(item.tabType=='1'?'tab_right_con':'')"
      >
        <div class="tab_btn_opt">
          <span class="tab_big-title" v-if="item.tabType=='1'&&item.mainTitle">{{item.mainTitle}}</span>
          <span
            v-if="isEditable"
            class="iconfont icon-jianmo el-tabs__new-tab tab_btn_opt_copy"
            title="复制"
            @click="onTabCopy($event,item)"
          ></span>
          <span
            v-if="isEditable"
            class="iconfont icon-jia el-tabs__new-tab tab_btn_opt_add"
            title="新增"
            @click="handleTabsEdit(['','add'],item)"
          ></span>
        </div>
        <el-tabs
          class="height100"
          ref="tsTabs"
          v-model="item.activeIndex"
          :closable="isEditable"
          @edit="handleTabsEdit(arguments,item)"
          @tab-click="tabClick(arguments,item)"
          style="width:100%"
        >
          <el-tab-pane
            :key="tab?tab.index+item.id:index"
            v-for="(tab,index) in item.tabs"
            :label="tab.title"
            :name="tab?tab.index+'':''"
            style="width:100%;height:calc(100% - 40px);"
            :lazy="true"
          >
            <grid-main-layout
              ref="tabMainLayout"
              v-if="tab.natureArr&&tab.natureArr.length>0"
              :layoutList="[...tab.natureArr]||[]"
              :isDraggable="isEditable"
              :isEditable="isEditable"
              :isResizeable="isEditable"
              :showMData="showMData"
              @refreshData="refreshData"
              @interData="interData"
              :formId="formId"
              :isHeightFit="isHeightFit"
              @changeYH="changeYH"
              :isShowBigScreen="isShowBigScreen"
            ></grid-main-layout>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 筛选控件-->
      <div
        v-if="item.type=='screen'&&item.state != '10'"
        class="biUserDefined__screen flexYbox height100"
      >
        <!-- 可编辑控件-->
        <div v-if="isEditable||showMData" class="biedit_screen_contanier height100">
          <ts-radio
            v-if="item.state==4"
            :data="item.dataTypeList&&item.dataTypeList.length>0?item.dataTypeList:[{ value: 1, text: '单选框' }]"
            :disabled="true"
            :title="item.controlName"
            width="100%"
            :isDefaultFirst="true"
            :type="item.groupType||''"
          ></ts-radio>
          <bi-text v-else-if="item.state==5" :isShowBigScreen="isShowBigScreen" :item="item"></bi-text>
          <bi-button v-else-if="item.state==7" width="100%" id="selfBtn">{{item.controlName||'按钮'}}</bi-button>
          <div v-else class="flexbox form__box" style="width: 100%">
            <div class="title form__title" v-if="item.controlName ">{{ item.controlName }}</div>
            <div class="flex">
              <vxe-input size="mini" :placeholder="item.placeholder" :disabled="true"></vxe-input>
            </div>
          </div>
          <!-- <ts-input
             @click="itemClick($event,item)"
              :placeholder="item.placeholder"
              :disabled="true"
              :title="item.controlName"
          ></ts-input>-->
        </div>
        <!-- 预览控件-->
        <div v-else class="bipreview_screen_container">
          <div v-if="item.state==1" class="flexbox form__box">
            <ts-screen-date v-if="item.isSelect==1" @refreshData="refreshData"></ts-screen-date>
            <div v-else-if="item.dimensionLevelId">
              <ts-date-picker
                :titleClue="item.titleClue"
                :value="item.value"
                @done="selectDate(item,$event)"
                :format="item.dateType"
                :type="item.dimensionLevel"
                :placeholder="item.placeholder"
              ></ts-date-picker>
            </div>
            <ts-date
              v-else
              v-model="item.value"
              :titleClue="item.titleClue"
              :type="item.dateType || 'range'"
              :placeholder="item.placeholder"
              width="100%"
              :title="item.controlName"
              @done="selectDate(item,$event)"
            ></ts-date>
            <!-- </div> -->
          </div>
          <ts-radio
            v-show="!item.isShow"
            v-if="item.state==4"
            ref="tsRadio"
            v-model="item.dimensionLevelId"
            :data="item.dataType == 2?[...item.dataTypeList]:biData"
            :isDefaultFirst="true"
            :title="item.controlName"
            @change="refreshRadioScreen($event,item)"
            :type="item.groupType||'text'"
          ></ts-radio>
          <ts-select
            :key="'select'+item.id"
            v-if="item.state==2||item.state==3"
            v-model="item.dimensionLevelId"
            :placeholder="item.placeholder"
            :source="initDimensionSelect(item)"
            :title="item.controlName"
            @selected="refreshSelectScreen($event,item)"
          ></ts-select>
          <bi-button
            v-if="item.state==7"
            ref="bibutton"
            @exportExcel="exportExcel"
            @click.native="onRealClick(item)"
          >{{item.controlName}}</bi-button>
          <!-- <span
            v-if="item.state==5"
            :style="(item.isLine?'word-break:normal;word-wrap:break-word;':'')+'line-height:'+item.lineHeight+'px;'+'font-size:'+(item.fontSize||'12')+'px;'+'color:'+(item.fontColor||'#999')"
          >{{item.controlName}}</span>-->
          <bi-text v-if="item.state==5" :isShowBigScreen="isShowBigScreen" :item="item"></bi-text>
          <div v-if="item.state==6">
            <ts-date
              v-if="item.inputType=='date'"
              :titleClue="item.titleClue"
              :type="item.dataType||'date'"
              v-model="item.value"
              :title="item.controlName"
              :placeholder="item.placeholder"
              width="100%"
              @done="selectDate(item,$event)"
            ></ts-date>
            <ts-input
              v-else
              v-model="item.value"
              :titleClue="item.titleClue"
              :title="item.controlName"
              :type="item.inputType"
              :min="item.min"
              :max="item.max"
              :placeholder="item.placeholder"
              width="100%"
              @keyEnter="inputRefresh(arguments,item)"
            ></ts-input>
          </div>
          <!-- 定时器 -->
          <ts-screen-date
            v-if="item.state=='9'"
            @refreshData="refreshDataTimer"
            :isNeedDate="false"
            timerWidth="100%"
            :timerName="item.isHide?item.timerName:0"
          ></ts-screen-date>
        </div>
      </div>
      <template v-if="item.type=='screen'&&item.state=='10'">
        <div class="business__handle handle" v-if="isEditable" @click="itemClick($event,item)"></div>
        <bi-screen-tree v-model="item.value" @change="refreshScreen()" :config="item"></bi-screen-tree>
      </template>
      <bi-filter
        v-if="item.type=='filter'"
        width="100%"
        :isShowBigScreen="isShowBigScreen"
        v-model="item.value"
        :noDate="item.noDate"
        :defaultTime="item.defaultTime"
        :noArea="item.noArea"
        :areaSingle="item.areaSingle"
        :single="item.single"
        :simple="item.simple"
        :backgroundColor="item.groundColor"
        @change="refreshFilter(item,$event)"
      ></bi-filter>
      <!-- 元素控件 -->
      <div v-if="item.type=='element'" class="flexYbox height100">
        <bi-fastlink
          v-if="item.state=='1'"
          :data="item"
          :isEditable="isEditable||showMData"
          :showMData="showMData"
          :biData="biData"
        ></bi-fastlink>
        <bi-square-sign
          v-if="item.state=='2'"
          :data="item"
          :isEditable="isEditable||showMData"
          :hiddenLine="!item.showLine"
          :backgroundColor="item.groundColor"
          :biData="biData"
        ></bi-square-sign>
        <bi-line v-if="item.state=='3'" :data="item" :isEditable="isEditable"></bi-line>
        <bi-multimedia
          v-if="item.state=='4'"
          :data="item"
          :isEditable="isEditable||showMData"
          :biData="biData"
        ></bi-multimedia>
        <bi-calendar
          v-if="item.state=='5'"
          :data="item"
          :isEditable="isEditable||showMData"
          @changeNowDay="changeNowDay(arguments,item)"
          @refreshData="refreshData"
        ></bi-calendar>
        <bi-person-block
          v-if="item.state=='6'"
          :data="item"
          :biData="biData"
          :isEditable="isEditable||showMData"
          :dataVKey="item.dataVKey+dataVKey_"
          :isShowBigScreen="isShowBigScreen"
        ></bi-person-block>
      </div>
      <div v-if="item.type=='biElement'" class="flexYbox height100">
        <biTagsTree
          ref="biTargetTree"
          v-if="item.state=='6'"
          :config="item"
          :isEditable="isEditable||showMData"
          itemHeight="calc(100% - 5px)"
        ></biTagsTree>
           <biTargetHosp
          ref="biTargetHosp"
          v-if="item.state=='7'"
          :config="item"
          :isEditable="isEditable||showMData"
          itemHeight="calc(100% - 5px)"
        ></biTargetHosp>
        <biTarget
          ref="biTarget"
          v-if="item.state=='1'"
          :config="item"
          :isEditable="isEditable||showMData"
          itemHeight="calc(100% - 5px)"
        ></biTarget>
        <bi-ancher ref="biancher" v-if="item.state=='3'" :data="item"></bi-ancher>
        <!-- 轮播表-->
        <biRotationList
          v-if="item.state=='2'"
          :config="item"
          :isEditable="isEditable||showMData"
          :biData="biData"
        />
        <biNowTimer v-if="item.state=='4'" :config="item" />
        <biTags
          ref="biTarget"
          v-if="item.state=='5'"
          :config="item"
          :isEditable="isEditable||showMData"
          itemHeight="calc(100% - 5px)"
        ></biTags>
        <!-- 指标贴 -->
      </div>
      <!-- <div v-if="biModel=='mobile'">
        <grid v-model="item.natureArr" v-if="item.type == 'grid'"></grid>
        <back v-if="item.type == 'back'"></back>
        <line-interval v-model="item.nature" v-if="item.type == 'line'"></line-interval>
        <date v-model="item.nature" v-if="item.type == 'date'"></date>
        <list v-model="item.nature" v-if="item.type == 'list'"></list>
        <tab v-model="item.nature" v-if="item.type == 'tab'"></tab>
        <images v-model="item.nature" v-if="item.type == 'img'"></images>
        <links-btn v-model="item.nature" v-if="item.type == 'links'"></links-btn>
        <attribute v-model="item.nature.data" :type="2" v-if="item.type == 'page'"></attribute>
        <text-info v-model="item.nature" v-if="item.type == 'text'"></text-info>
        <lumplist v-model="item.nature" v-if="item.type == 'lumplist'"></lumplist>
        <treelist v-model="item.nature" v-if="item.type == 'treelist'"></treelist>
        <rather-tab v-model="item.nature" v-if="item.type == 'ratherTab'"></rather-tab>
        <infos v-model="item.nature" v-if="item.type == 'infos'"></infos>
      </div>-->
    </component>
  </div>
</template>

<script>
// import tsTable from '../uiElement/tsTable.vue'
// import g2plot from '../uiElement/g2plot.vue'
import dashBoard from '../uiElement/dashBoard'
import biCalendar from '../uiElement/biCalendar'
import biPersonBlock from '../uiElement/biPersonBlock'
import biMultimedia from '../uiElement/biMultimedia'
import biTable from '../uiElement/biTable'
import biLine from '../uiElement/biLine'
import biFastlink from '../uiElement/biFastlink'
import biSquareSign from '../uiElement/biSquareSign'
import itemClickMixins from '../mixins/itemClickMixins'
import topBarItemJSON from '../topBarItem.json'
import biTarget from '../uiElement/biTarget'
import biFilter from '../uiElement/biFilter.vue'
import biScreenTree from '../uiElement/biScreenTree.vue'
import biRotationList from '../uiElement/biRotationList.vue'
import biNowTimer from '../uiElement/biNowTimer.vue'
import biTags from '../uiElement/biTags.vue'
import biText from '../uiElement/biText.vue'
import biTagsTree from '../uiElement/biTagsTree.vue'
/** 移动组件 **/
// import Attribute from '../../mobileTemplate/module/attribute.vue'
// import Back from '../../mobileTemplate/module/back.vue'
// import Date from '../../mobileTemplate/module/date.vue'
// import List from '../../mobileTemplate/module/list.vue'
// import Tab from '../../mobileTemplate/module/tab.vue'
// import grid from '../../mobileTemplate/module/grid.vue'
// import images from '../../mobileTemplate/module/images.vue'
// import linksBtn from '../../mobileTemplate/module/linksBtn.vue'
// import lineInterval from '../../mobileTemplate/module/lineInterval.vue'
// import textInfo from '../../mobileTemplate/module/textInfo.vue'
// import lumplist from '../../mobileTemplate/module/lumplist.vue'
// import treelist from '../../mobileTemplate/module/treelist.vue'
// import ratherTab from '../../mobileTemplate/module/ratherTab.vue'
// import infos from '../../mobileTemplate/module/infos.vue'
// import gridMainLayout from './gridMainLayout'
import biButton from '../uiElement/biButton'
import _ from 'lodash'
import BiAncher from '../uiElement/biAncher.vue'
import biTargetHosp from '../uiElement/biTargetHosp.vue'
export default {
  name: 'biReportLayout',
  props: {
    isShowBigScreen: {
      // 是否是大屏模式下
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    biModel: {
      type: String,
      default: ''
    },
    isEditable: {
      type: Boolean,
      default: false
    },
    showMData: {
      // 是否显示模拟数据
      type: Boolean,
      default: false
    },
    formId: {
      type: String,
      default: ''
    },
    isFromList: {
      // 是否来自于列表
      type: Boolean,
      default: false
    },
    isFromPreview: {
      type: Boolean,
      default: false
    },
    dataVKey: {
      type: String,
      default: ''
    },
    isHeightFit: {
      // 是否高度适配
      type: Boolean,
      default: true
    }
  },
  mixins: [itemClickMixins],
  components: {
    biText,
    // tsTable,
    // g2plot,
    biTable,
    biSquareSign,
    biFastlink,
    biLine,
    biMultimedia,
    biPersonBlock,
    biButton,
    biCalendar,
    biFilter,
    biRotationList,
    biNowTimer,
    dashBoard,
    biTags,
    biTagsTree,
    biTargetHosp,
    // Back,
    // Attribute,
    // Tab,
    // Date,
    // List,
    // grid,
    // images,
    // linksBtn,
    // lineInterval,
    // textInfo,
    // lumplist,
    // treelist,
    // ratherTab,
    // infos,
    biTarget,
    BiAncher,
    biScreenTree,
    biTargetHosp
  },
  computed: {
    itemLoading() {
      return this.biPreviewMapItem
        ? this.biPreviewMapItem.loading || false
        : false
    },
    biData() {
      return this.biPreviewMapItem ? this.biPreviewMapItem.data || [] : []
    }
  },
  watch: {},
  mounted() {},
  data() {
    return {
      dataVKey_: this.dataVKey,
      sourceDate: {
        dataType: 'local',
        data: [
          {
            LEVEL_NAME: 'L_YEAR',
            DESCRIPTION: '年'
          },
          {
            LEVEL_NAME: 'L_QUARTER',
            DESCRIPTION: '季度'
          },
          {
            LEVEL_NAME: 'L_MONTH',
            DESCRIPTION: '月'
          },
          {
            LEVEL_NAME: 'L_DAY',
            DESCRIPTION: '天'
          }
        ],
        code: 'LEVEL_NAME',
        text: 'DESCRIPTION',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      biPreviewMapItem: this.getBiPreviewMap() || {},
      openDialog: false,
      topBarItemJSON: topBarItemJSON
    }
  },
  beforeCreate() {
    if (!this.$options.components.gridMainLayout) {
      this.$options.components.gridMainLayout = () => import('./gridMainLayout')
    }
  },
  methods: {
    chartSourceFn(item) {
      return {
        textConfig: item.textConfig
      }
    },
    changeYH(layout) {
      // console.log(layout)
      this.item.natureArr = layout
    },
    // 得到预览对象
    getBiPreviewMap() {
      let biMap = this.$store.state.bi.biPreviewMap
      if (this.formId) {
        // 从外部预览
        biMap = biMap[this.formId] || {}
      } else {
        biMap = biMap['d' + (this.$store.state.bi.dialogEditors.length - 1)]
      }
      let key = 'bi' + this.item.id
      if (this.item.pId) {
        key = key + this.item.pId
      }
      let biPreviewMapItem = biMap ? biMap[key] || {} : {}
      return biPreviewMapItem
    }
  },
  watch: {
    '$store.state.bi.biPreviewMap': {
      handler(n) {
        this.biPreviewMapItem = this.getBiPreviewMap()
      },
      deep: true
    },
    dataVKey: {
      handler(n, o) {
        this.dataVKey_ = n
      },
      deep: true
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
/deep/.vxe-radio-button.size--mini .vxe-radio--label {
  line-height: 23px !important;
}
// .boxShadow {
//   box-shadow: 0px 2px 6px 0px #dde1e6;
//   border-radius: 8px;
//   width: calc(100% - 1px) !important;
//   height: calc(100% - 3px) !important;
// }

// /deep/.vxe-table--empty-placeholder {
//   top: 30px !important;
// }
/deep/.vxe-table--render-default .vxe-body--column:first-child {
  .vxe-cell {
    white-space: pre-wrap !important;
  }
}
/deep/.vxe-header--column .vxe-resizable.is--line:before {
  width: 0;
}
.isEditable-con {
  /deep/.el-tabs__nav-wrap.is-scrollable {
    padding-right: 60px;
  }
}
.biReport-contanier {
  &:hover {
    > .icon-static {
      display: block;
    }
    > .biUserDefined-item__operate {
      display: block;
    }
  }
  /deep/.vxe-pulldown--panel {
    position: fixed;
  }
  .icon-static {
    position: absolute;
    display: none;
    top: -10px;
    left: -9px;
    z-index: 4;
    cursor: pointer;
  }

  .biUserDefined-item__operate {
    position: absolute;
    top: -10px;
    right: 0px;
    display: none;
    z-index: 4;
    span {
      padding: 1px 4px;
      margin-right: 3px;
      border-radius: 15px;
      background: #333333c2;
      cursor: pointer;
      i {
        color: white;
      }
    }
    span:hover {
      background: var(--button_color);
    }
  }

  // /deep/
  //   .table__box
  //   > div
  //   > .vxe-table
  //   > .vxe-table--main-wrapper
  //   > .vxe-table--body-wrapper {
  // height: calc(100% - 30px) !important;
  // }
  /deep/.pageDataGrid {
    position: absolute;
    width: 100%;

    /deep/.font12 {
      margin-right: 6px;
    }
  }
  .handle {
    height: 100%;
    width: calc(100% + 2px);
    position: absolute;
    left: -2px;
    right: 0;
    top: -2px;
    z-index: 2;
    background-color: transparent;
  }

  .biUserDefined-item__handle {
    height: 0;
    width: calc(100% + 2px);
    position: absolute;
    left: -2px;
    right: 0;
    top: -2px;
    z-index: 0;
    background-color: var(--base-acv) 14;
    // background-color: var(--base-acv)14;
    border: 0;
    border-color: var(--base-acv);
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .biUserDefined__table {
    width: 100%;
    height: 100%;

    /deep/.biUserDefined-table__active {
      border: 2px var(--base-acv) solid;
    }
  }

  .chart__border {
    border: 1px solid var(--border_color);
  }

  .link_cell {
    color: var(--base-acv);
  }

  .biUserDefined__tab {
    // padding: 3px;
    width: 100%;
    height: 100%;

    /deep/.el-tabs__header {
      margin: 0 0 2px;

      .el-tabs__new-tab {
        margin: 10px;
        z-index: 9;
      }
    }
    /deep/.el-tabs--border-card > .el-tabs__content {
      padding: 10px;
    }
    /deep/.el-tabs__content {
      height: calc(100% - 42px);
    }
    /deep/.el-tab-pane {
      height: 100% !important;
      overflow: auto;
    }
    .tab_btn_opt {
      position: absolute;
      z-index: 3;
      right: 15px;
      top: 0px;
      background: #fff;
      height: 35px;
    }
    .tab_big-title {
      padding: 9px;
      border-bottom: 2px solid var(--base-acv);
      margin: 10px;
      line-height: 40px;
      height: 18px;
      font-weight: bold;
    }
    /deep/.el-tabs__nav-wrap::after {
      height: 1px;
      background: var(--border_color);
    }
    /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 10px;
    }
    /deep/.el-tabs__item.is-active {
      color: var(--button_color);
    }
    /deep/.el-tabs__active-bar {
      background: var(--button_color);
    }
  }
  .tab_right_con {
    .tab_btn_opt {
      left: 0px;
    }
    .el-tabs__new-tab {
      float: none;
      padding: 3px;
      line-height: 40px;
      height: 18px;
      z-index: 10;
    }
    /deep/.el-tabs__nav {
      float: right;
    }
    /deep/.el-tabs__active-bar {
      display: none;
    }
    /deep/.el-tabs__item {
      font-weight: normal;
      color: var(--light-font-grey);
    }
    /deep/.el-tabs--top .el-tabs__item.is-top:last-child {
      padding-right: 20px;
    }
  }
  .biUserDefined__screen {
    /deep/.form__title {
      width: auto;
      height: 100%;
      display: flex;
      align-items: center;
      line-height: 1;
    }

    .bipreview_screen_container {
      height: 100%;
      width: 100%;

      > div {
        height: 100%;
      }

      /deep/.bi_button-contanier {
        padding: 0px;
        height: 100%;
      }

      /deep/.select__opacityBox {
        top: 0px !important;
        left: 0px !important;
        position: absolute;
        // position: static !important;
      }

      /deep/.vxe-input.size--mini,/deep/.el-input__inner,
      .vxe-input {
        height: 100% !important;
      }
      /deep/.zDateRang__WZbox {
        // position: static !important;
        top: 0px !important;
        left: 0px !important;
      }

      > .form__box > div {
        width: 100%;
      }

      /deep/.form__box {
        height: 100%;
      }
      /deep/.select__box {
        height: 100%;
      }
      /deep/.zDateRangCon {
        background: #fff;
      }
    }

    .biedit_screen_contanier {
      width: 100%;

      /deep/.vxe-radio.is--disabled
        > input
        + .vxe-radio--icon
        + .vxe-radio--label {
        color: #999999;
      }

      /deep/.vxe-radio-group {
        // margin-top: 5px;
        height: 100%;
        display: flex;
        align-items: center;
      }

      /deep/.vxe-input.size--mini,
      /deep/.vxe-input {
        height: 100% !important;
      }

      /deep/.form__box {
        height: 100%;
        margin-bottom: 0px !important;
      }

      /deep/.vxe-input--inner[disabled] {
        background-color: #fff !important;
        cursor: pointer !important;
      }

      /deep/.vxe-radio.is--disabled {
        cursor: pointer;
      }

      .definedScreen__item_text {
        line-height: 26px;
        cursor: pointer;
        color: #999999;
      }

      .biUserDefinedIconDrag-screen_hover:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10000;
        border: 1px var(--base-acv) solid;
        border-radius: 5px;
      }
    }
  }
}
</style>
