<el-main>
  <!--面包屑-->
  <breadcrumb-component ></breadcrumb-component>
  <div class="step-outline">
    <el-steps :active="reportStep" align-center>
      <el-step title="基本信息"  @click.native="switchStep(1)" :icon="currentStep===1?'el-icon-edit':''"></el-step>
      <el-step title="选择KPI"  @click.native="switchStep(2)" :icon="currentStep===2?'el-icon-edit':''"></el-step>
      <el-step title="查询条件"  @click.native="switchStep(3)" :icon="currentStep===3?'el-icon-edit':''"></el-step>
      <el-step title="报表关系"  @click.native="switchStep(4)" :icon="currentStep===4?'el-icon-edit':''"></el-step>
      <el-step title="展示效果"  @click.native="switchStep(5)" :icon="currentStep===5?'el-icon-edit':''"></el-step>
      <el-step title="效果预览"  @click.native="switchStep(6)" :icon="currentStep===6?'el-icon-edit':''"></el-step>
    </el-steps>
  </div>
    <el-container class="detail-container full-screen" v-if="currentStep===1" :key="1">
      <div class="full-screen">
        <el-form label-width="200px" label-position="right"  :class="readonly?'create-form-outline-full-screen readonly':' create-form-outline-full-screen'"     :model="formInfoStep1"    ref="formInfoStep1" >

          <el-form-item label="报表名称" prop="reportName"  :rules="[{ required: true, message: '报表名称不能为空', trigger: 'blur'  }, { max: 30, message: '字数不能超过30', trigger: 'change' }]">
            <el-input class="normal-width" :disabled="readonly"  v-model="formInfoStep1.reportName" placeholder="请输入" ></el-input>
          </el-form-item>

          <!--<el-form-item label="所属项目" prop="displaySystem"  :rules="[{ required: true, message: '所属项目不能为空', trigger: 'change'  }]">-->
            <!--<el-select  class="normal-width"  :disabled="readonly"  v-model="formInfo.displaySystem" placeholder="请选择">-->
              <!--<el-option-->
                <!--v-for="item in displaySystemOptions"-->
                <!--:key="item.id"-->
                <!--:label="item.name"-->
                <!--:value="item.id">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->

          <el-form-item label="展示方式" prop="showType"  :rules="[{ required: true, message: '展示方式不能为空', trigger: 'change'  }]">
            <el-select  class="normal-width"  :disabled="readonly"  v-model="formInfoStep1.showType" placeholder="请选择">
              <el-option
                v-for="item in displayModeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报表层级" prop="reportLevel"  :rules="[{ required: true, message: '展示方式不能为空', trigger: 'change'  }]">
            <el-select  class="normal-width"  :disabled="readonly"  v-model="formInfoStep1.reportLevel" placeholder="请选择">
              <el-option
                v-for="item in reportLevelOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="报表分类"  prop="menuCode" v-if="formInfoStep1.reportLevel===1" :rules="[{ required: true, message: '报表分类不能为空', trigger: 'change'  }]">
            <simple-select-tree
              v-model="formInfoStep1.menuCode"
              :defaultExpandAll="true"
              :className="'normal-width'"
              :treeData="menuOptions">
            </simple-select-tree>
          </el-form-item>

          <el-form-item>
              <!--<el-button type="primary" @click="seeNextStep" v-show="currentStep<=reportStep">下一步</el-button>-->
            <el-button type="primary" @click="add(true)" >下一步</el-button>
            <el-button type="primary" @click="add(false)" >保存</el-button>
              <el-button   @click="goBack">取消并返回</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-container>

    <el-container class="detail-container full-screen" v-if="currentStep===2" :key="2">
      <div class="full-screen">
        <div class="detail-tags-title">
          已选KPI
        </div>
        <div class="detail-tags detail-tags-selected">

          <draggable v-model="formInfoStep2.kpis" :move="getdata" @update="datadragEnd">
          <template  v-for="(tag,index) in formInfoStep2.kpis">
            <div class="tag-outline">
              <el-tooltip class="item" effect="dark" :content="tag.rname" placement="top" :disabled="tag.rname.length<6">
                <el-tag
                  :key="tag.kpiId"
                  disable-transitions
                  @close="removeTag(tag,index)"
                  closable>
                  <a @click="tagClick(index)" class="tag-text" v-show="index!==tempId">{{tag.rname}}</a>
                  <el-input
                    :ref="'tag-input'+index"
                    class="tag-input"
                    v-model="temp"
                    :placeholder="tag.rname"
                    v-show="index===tempId"
                    @blur="updateTagText(tag,$event)"
                  ></el-input>
                </el-tag>
              </el-tooltip>
            </div>
          </template>
          </draggable>
        </div>
        <div>
          <el-container>
            <el-aside width="300px" class="inner-left">
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
              </el-input>

              <el-tree
                class="filter-tree"
                :data="topicOptions"
                :props="defaultProps"
                default-expand-all
                highlight-current
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :render-content="renderContent"
                @node-click="searchKPI"
                ref="topicTree">
              </el-tree>
            </el-aside>

            <el-main class="inner-main">
              <div class="kpi-search">
                <el-form label-position="right" class="simple-search-form-outline" inline >
                  <el-form-item label="">
                <el-button type="primary" @click="selectAllTag">全选</el-button>
                  </el-form-item>
                </el-form>
                <el-form label-position="right" class="simple-search-form-outline" inline >
                  <el-form-item label="KPI名称">
                    <el-input
                      placeholder="输入关键字进行过滤" v-model="filterKPIText" class="input-with-select" >
                    </el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div class="detail-tags">
                <div class="detail-tags-list">
                  <div class="no-found-content" v-show="searchTags.length<1">
                    暂无数据
                  </div>
                  <template  v-for="tag in searchTags">
                    <el-tooltip class="item" effect="dark" :content="tag.name" placement="top" :disabled="tag.name.length<6">
                      <el-tag
                        :class="selectedKPIs.indexOf(tag.id)>=0?'disabled-kpi':'active-kpi'"
                        :key="tag.id"
                        @click="addTag(tag)"
                      >
                        <a class="tag-text">{{tag.name}}</a>
                        <i class="el-icon-check" v-if="selectedKPIs.indexOf(tag.id)>=0"></i>
                        <i class="el-icon-plus" v-else="selectedKPIs.indexOf(tag.id)<0"></i>
                      </el-tag>
                    </el-tooltip>
                  </template>
                </div>
              </div>
              <!--下面是新建-->
              <div class="button-container-left">
                <el-button type="primary" @click="seeLastStep" >上一步</el-button>
                <!--<el-button type="primary" @click="seeNextStep" v-show="currentStep<=reportStep">下一步</el-button>-->
                <el-button type="primary" @click="add(true)" >下一步</el-button>
                <el-button type="primary" @click="add(false)" >保存</el-button>
                <el-button   @click="goBack">取消并返回</el-button>
              </div>

              <!--弹框-->
            </el-main>
          </el-container>
        </div>
      </div>
    </el-container>

    <el-container class="detail-container full-screen"  v-if="currentStep===3" :key="3">
      <div class="full-screen">

        <el-form label-width="200px" label-position="right" :class="readonly?'create-form-outline-full-screen readonly':'create-form-outline-full-screen'"    :model="formInfoStep3"    ref="formInfoStep3" >

          <el-form-item v-for="(kpi, index) in formInfoStep3.queryKpis" :key="index" :label="index===0?'KPI选择':''"   :prop="'queryKpis.' + index + ''"  :rules="[{ validator: testQueryKpis, trigger: 'change'  }]" >
            <el-select  class="normal-width"  :disabled="readonly"  v-model="kpi.kpiId" placeholder="请选择" @change="updateQueryKpi(kpi, $event)">
              <el-option
                v-for="item in formInfoStep2.kpis"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
            <template v-if="kpi.hasOwnProperty('ifTime')  && kpi.ifTime===1">
              <el-radio v-model="kpi.ifQueryTime" :label="1">时间</el-radio>
              <el-select  class="small-width"  :disabled="readonly"  v-model="kpi.timeTypeId" placeholder="请选择">
                <el-option
                  v-for="item in dateRangeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <template v-if="kpi.timeTypeId == 3">
                默认时间以本周为基准，前推
                <el-input
                  placeholder="" v-model="kpi.timeDefaultOffset" type="number" class="tiny-width" >
                </el-input>
                周
              </template>
              <template v-else>
                默认时间以今日为基准，前推
                <el-input
                  placeholder="" v-model="kpi.timeDefaultOffset" type="number" class="tiny-width" >
                </el-input>
                天
              </template>
            </template>
            <template  v-else-if="kpi.hasOwnProperty('ifTime') && kpi.ifTime===0">
              <el-radio v-model="kpi.ifQuerySearch" :label="1">搜索</el-radio>
              <el-select  class="small-width"  :disabled="readonly"  v-model="kpi.searchTypeId" placeholder="请选择">
                <el-option
                  v-for="item in searchTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </template>

            <template   v-if="formInfoStep3.queryKpis.length===1">
              <el-tooltip class="item" effect="dark" content="重置" placement="top-start">
                <i class="el-icon-refresh" @click="refreshKpiSearch(index)"></i>
              </el-tooltip>
            </template>

            <template  v-if="formInfoStep3.queryKpis.length>1" >
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <i class="el-icon-minus" @click="delKpiSearch(index)" ></i>
              </el-tooltip>
            </template>

            <template v-if="index===formInfoStep3.queryKpis.length-1" >
              <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                <i class="el-icon-plus" @click="addKpiSearch"></i>
              </el-tooltip>
            </template>

          </el-form-item>



          <el-form-item label="页面可选聚合" prop="useOperableGroup" >
            <el-radio v-model="formInfoStep3.useOperableGroup" :label="1" :key="1">是</el-radio>
            <el-radio v-model="formInfoStep3.useOperableGroup" :label="0" :key="0">否</el-radio>
          </el-form-item>

          <el-form-item label="可选聚合KPI" prop="operableGroupKpis">
            <el-select multiple  collapse-tags  class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.operableGroupKpis" placeholder="请选择" @change="onOperableGroupKpisChange">
              <el-option
                v-for="item in formInfoStep2.kpis"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="默认聚合KPI" prop="groupKpis" >
            <el-select multiple  collapse-tags  class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.groupKpis" placeholder="请选择">
              <el-option
                v-for="item in operableGroupKpis"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认聚合KPI排序" >
            <div class="form-item-tags">

              <draggable v-model="formInfoStep3.groupKpis" :move="getdata" @update="datadragEnd">
              <el-tag
                v-for="(tag, index) in groupKpis"
                :key="tag.kpiId"
                @close="removeGroupKpi(tag,index)"
                closable
              >{{tag.rname}}
              </el-tag>
              </draggable>
            </div>
          </el-form-item>

          <el-form-item label="排序" prop="orderKpis"  :rules="[{ required: true, message: '排序不能为空', trigger: 'change'  }]">
            <el-select multiple collapse-tags  class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.orderKpis" placeholder="请选择" @change="()=>{formInfoStep3.queryDefaultSortKpi = ''}">
              <el-option
                v-for="item in formInfoStep2.kpis"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="默认排序" prop="queryDefaultSortKpi" >
            <el-select class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.queryDefaultSortKpi" placeholder="请选择">
              <el-option
                v-for="item in step3DefaultSortKpiOptions"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
            <el-radio v-model="formInfoStep3.queryDefaultOrder" :label="'asc'" :key="1">升序</el-radio>
            <el-radio v-model="formInfoStep3.queryDefaultOrder" :label="'desc'" :key="0">降序</el-radio>
          </el-form-item>

          <template v-for="(kpi, index) in formInfoStep3.colorKpis" >
            <div class="line-form-items" :key="kpi.kpiId" >
              <el-form-item  :label="index===0?'标记颜色':' '" >
                <el-select  class="normal-width"  :disabled="readonly"  v-model="kpi.kpiId" placeholder="请选择">
                  <el-option
                    v-for="item in numberKpis"
                    :key="item.kpiId"
                    :label="item.rname"
                    :disabled="colorKpisIds.indexOf(item.kpiId)>=0"
                    :value="item.kpiId">
                  </el-option>
                </el-select>

              </el-form-item>

              <el-form-item label="下限：" label-width="auto"  :prop="'colorKpis.' + index + ''"  :rules="[{ validator: testQueryColorLower, message: '下限不能大于上限', trigger: 'change'  }]" >
                <el-input class="tiny-width" v-model="kpi.queryColorLower" placeholder=""></el-input>
              </el-form-item>

              <el-form-item label="上限：" label-width="auto"  :prop="'colorKpis.' + index + ''"  :rules="[{ validator: testQueryColorUpper, message: '上限不能小于下限', trigger: 'change'  }]" >
                <el-input class="tiny-width" v-model="kpi.queryColorUpper" placeholder=""></el-input>
              </el-form-item>

              <el-form-item>
                <el-popover
                  popper-class="color-selecter"
                  placement="top"
                  width="24"
                  v-model="kpi.kpiPop" >
                  <div class="color-select">
                    <span v-for="(color,index) in kpiColorOptions" :key="index" :class="kpiColors[''+color.id].data+' color-selector'" @click="kpiColorSelect(color.id,kpi)"></span>
                  </div>
                  <div class="el-color-picker" slot="reference">
                    <div class="el-color-picker__trigger">
                <span class="el-color-picker__color color-select">
                  <span :class="kpiColors[''+kpi.queryColorId].data+ ' el-color-picker__color-inner'" ></span>
                </span>
                      <!--<span class="el-color-picker__icon el-icon-arrow-down"></span>-->
                    </div>
                  </div>
                </el-popover>
              </el-form-item>

              <template   v-if="formInfoStep3.colorKpis.length===1">
                <el-tooltip class="item" effect="dark" content="重置" placement="top-start">
                  <i class="el-icon-refresh" @click="refreshKpiColor(index)"></i>
                </el-tooltip>
              </template>

              <template  v-if="formInfoStep3.colorKpis.length>1" >
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <i class="el-icon-minus" @click="delKpiColor(index)"></i>
                </el-tooltip>
              </template>

              <template  v-if="index===formInfoStep3.colorKpis.length-1 && formInfoStep3.colorKpis.length<numberKpis.length">
                <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                  <i class="el-icon-plus" @click="addKpiColor"></i>
                </el-tooltip>
              </template>


              </el-form-item>
            </div>
          </template>


          <el-form-item label="分页" prop="ifPage" >
            <el-radio v-model="formInfoStep3.ifPage" :label="1" :key="1">是</el-radio>
            <el-radio v-model="formInfoStep3.ifPage" :label="0" :key="0">否</el-radio>
          </el-form-item>

          <el-form-item label="合计" prop="ifTotal" >
            <el-radio v-model="formInfoStep3.ifTotal" :label="1" :key="1">是</el-radio>
            <el-radio v-model="formInfoStep3.ifTotal" :label="0" :key="0">否</el-radio>
          </el-form-item>

          <el-form-item label="合计展示方式" prop="totalShowType" v-if="formInfoStep3.ifTotal===1">
            <el-radio v-model="formInfoStep3.totalShowType" :label="item.id" :key="item.id" v-for="(item,index) in totalShowTypeOptions" >{{item.name}}</el-radio>
          </el-form-item>

          <template v-if="formInfoStep3.ifTotal === 1 && formInfoStep3.totalShowType == 2">
            <el-form-item label="合计字段" prop="totalKpis"  :rules="[{ required: true, message: '合计字段不能为空', trigger: 'change'  }]">
              <el-select multiple  collapse-tags  class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.totalKpis" placeholder="请选择">
                <el-option
                  v-for="item in formInfoStep2.kpis"
                  v-if="item.ifNumber == 1"
                  :key="item.kpiId"
                  :label="item.rname"
                  :value="item.kpiId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合计排序" >
              <div class="form-item-tags">
                <draggable v-model="formInfoStep3.totalKpis" :move="getdata" @update="datadragEnd">
                  <el-tag
                    v-for="(tag, index) in totalKpis"
                    :key="tag.kpiId"
                    @close="removeTotalKpi(tag,index)"
                    closable
                  >{{tag.rname}}
                  </el-tag>
                </draggable>
              </div>
            </el-form-item>

          </template>

          <el-form-item label="外部传参" prop="ifOutsideParam" >
            <el-radio v-model="formInfoStep3.ifOutsideParam" :label="1" :key="1">是</el-radio>
            <el-radio v-model="formInfoStep3.ifOutsideParam" :label="0" :key="0">否</el-radio>
          </el-form-item>


          <template v-if="formInfoStep3.ifOutsideParam === 1" v-for="(param, index) in formInfoStep3.reportOutsideParams" >
            <div class="line-form-items" :key="index+100" >
              <el-form-item  :label="index===0?'字段':' '" :prop="'reportOutsideParams.' + index + '.paramKey'" :rules="[{ required: true, message: '字段不能为空', trigger: 'change'  }]" >
                <el-input class="normal-width" :disabled="readonly"  v-model="param.paramKey" placeholder="请输入" ></el-input>
              </el-form-item>

              <el-form-item label="类型"  label-width="auto">
                <el-select  class="tiny-width"  :disabled="readonly"  v-model="param.paramType" placeholder="请选择">
                  <el-option
                    key="0"
                    label="文本"
                    :value="1">
                  </el-option>
                  <el-option
                    key="1"
                    label="数字"
                    :value="2">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="描述：" label-width="auto" >
                <el-input class="normal-width"  v-model="param.paramDesc" placeholder=""></el-input>
              </el-form-item>

              <template   v-if="formInfoStep3.reportOutsideParams.length===1">
                <el-tooltip class="item" effect="dark" content="重置" placement="top-start">
                  <i class="el-icon-refresh" @click="refreshReportOutsideParams(index)"></i>
                </el-tooltip>
              </template>

              <template  v-if="formInfoStep3.reportOutsideParams.length>1" >
                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <i class="el-icon-minus" @click="delReportOutsideParams(index)"></i>
                </el-tooltip>
              </template>

              <template  v-if="index===formInfoStep3.reportOutsideParams.length-1">
                <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                  <i class="el-icon-plus" @click="addReportOutsideParams"></i>
                </el-tooltip>
              </template>

            </div>
          </template>

          <el-form-item>
              <el-button type="primary" @click="seeLastStep" >上一步</el-button>
              <!--<el-button type="primary" @click="seeNextStep" v-show="currentStep<=reportStep">下一步</el-button>-->
            <el-button type="primary" @click="add(true)" >下一步</el-button>
            <el-button type="primary" @click="add(false)" >保存</el-button>
              <el-button   @click="goBack">取消并返回</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-container>

    <el-container class="detail-container full-screen" v-if="currentStep===4" :key="4">
      <div class="full-screen">

        <el-form label-width="200px" label-position="right"  :class="readonly?'create-form-outline-full-screen readonly':' create-form-outline-full-screen'"    :model="formInfoStep4"    ref="formInfoStep4" >

          <el-form-item label="是否下钻">
              <el-radio v-model="formInfoStep4.ifDrillDown" :label="1" :key="1" :disabled="formInfoStep1.reportLevel===2">是</el-radio>
              <el-radio v-model="formInfoStep4.ifDrillDown" :label="0" :key="0" :disabled="formInfoStep1.reportLevel===2">否</el-radio>
          </el-form-item>

          <template v-if="formInfoStep4.ifDrillDown===1">
            <template v-for="(kpi, index) in formInfoStep4.drillDowns">
              <div class="form-items-cell">
                <div class="line-form-items">
                  <el-form-item :label="index===0?'下钻字段':'下钻字段'" :prop="'drillDowns.' + index+'.kpiId'"  :rules="[{ required: true, message: '下钻字段不能为空', trigger: 'change'  }]"  >
                    <el-select  class="normal-width"  :disabled="readonly"  v-model="kpi.kpiId" placeholder="请选择KPI">
                      <el-option
                        v-for="item in formInfoStep2.kpis"
                        :key="item.kpiId"
                        :disabled="drillDownsIds.indexOf(item.kpiId)>=0"
                        :label="item.rname"
                        :value="item.kpiId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item  label-width="0" :prop="'drillDowns.' + index+'.subreportId'"  :rules="[{ required: true, message: '子报表不能为空', trigger: 'change'  }]"  >
                    <el-select  class="normal-width"  :disabled="readonly"  v-model="kpi.subreportId" placeholder="请选择子报表" @change="loadSubKpis(kpi)">
                      <el-option
                        v-for="item in sonReportOptions"
                        :key="item.id"
                        :label="item.reportName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>

                </div>

                <div class="line-form-items">
                  <el-form-item label="下钻是否传值" >
                    <el-radio v-model="kpi.ifRelated" :label="1" :key="1">是</el-radio>
                    <el-radio v-model="kpi.ifRelated" :label="0" :key="0">否</el-radio>
                  </el-form-item>
                </div>
                <div v-for="(kpiDrill, idx) in kpi.kpiDrills" v-if="kpi.ifRelated">
                  <div class="line-form-items"  >
                    <el-form-item label="KPI关联设置"  :prop="'drillDowns.' + index+'.kpiDrills.'+idx+'.relatedKpiId'"  :rules="[{ required: true, message: '主表KPI不能为空', trigger: 'change'  }]"  >
                      <el-select  class="normal-width"  :disabled="readonly"  v-model="kpiDrill.relatedKpiId" placeholder="主表KPI" @change="onRelatedKpiChange(kpi)">
                        <el-option
                          v-for="item in formInfoStep2.kpis"
                          :key="item.kpiId"
                          :label="item.rname"
                          :value="item.kpiId">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item  label-width="0"   :prop="'drillDowns.' + index+'.kpiDrills.'+idx+'.relatedSubKpiId'" :rules="[{ required: true, message: '子表KPI不能为空', trigger: 'change'  }]" >
                      <el-select  class="normal-width"  :disabled="readonly"  v-model="kpiDrill.relatedSubKpiId" placeholder="子表KPI" @change="onSubRelatedKpiChange(kpiDrill,kpi.sonReportKpiOptions)">
                        <el-option
                          v-for="item in kpi.sonReportKpiOptions"
                          :key="item.kpiId"
                          :label="item.rname"
                          :value="item.kpiId">
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <template  v-if="kpi.kpiDrills.length>1" >
                      <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <i class="el-icon-minus" @click="delKpiDrillParam(kpi.kpiDrills,index)"></i>
                      </el-tooltip>
                    </template>

                    <template  v-if="idx===kpi.kpiDrills.length-1">
                      <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                        <i class="el-icon-plus" @click="addKpiDrillParam(kpi.kpiDrills)"></i>
                      </el-tooltip>
                    </template>
                  </div>

                  <div class="line-form-items"  v-if="kpiDrill.relatedKpiIsTime">
                    <el-form-item label="基准时间点"   :prop="'drillDowns.' + index+'.kpiDrills.'+idx+'.timeRangeOffset'"  :rules="[{ required: true, message: '时间偏移量不能为空', trigger: 'change'  }, { validator: testNumber, message: '时间偏移量必须为大于等于0的整数', trigger: 'change'  }]" >
                      <el-radio v-model="kpiDrill.timeRelatedSelected" :label="1" :key="1">选中日期</el-radio>
                      <el-radio v-model="kpiDrill.timeRelatedSelected" :label="0" :key="0">今天</el-radio>
                      默认前推
                      <el-input
                        placeholder="" v-model="kpiDrill.timeRangeOffset" type="number" class="tiny-width" >
                      </el-input>
                      天
                    </el-form-item>
                  </div>


                </div>


                <div class="form-items-cell-close"   v-if="formInfoStep4.drillDowns.length>1" >
                  <i class="el-icon-close" @click="delKpiDrillDown(index)"></i>
                </div>
              </div>

            </template>

            <el-form-item >
              <el-button  @click="addKpiDrillDown">
                添加下钻字段
              </el-button>
            </el-form-item>

          </template>

          <el-form-item>
              <el-button type="primary" @click="seeLastStep" >上一步</el-button>
              <!--<el-button type="primary" @click="seeNextStep" v-show="currentStep<=reportStep">下一步</el-button>-->
            <el-button type="primary" @click="add(true)" >下一步</el-button>
            <el-button type="primary" @click="add(false)" >保存</el-button>
              <el-button   @click="goBack">取消并返回</el-button>
          </el-form-item>

        </el-form>
      </div>

    </el-container>

    <el-container class="detail-container full-screen" v-if="currentStep===5" :key="5">
      <div class="full-screen">

        <el-form label-width="200px" label-position="right"  :class="readonly?'create-form-outline-full-screen readonly':' create-form-outline-full-screen'"    :model="formInfoStep5"    ref="formInfoStep5" >

          <el-form-item label="柱折混合图">
            <el-checkbox v-model="formInfoStep5.ifBarAndLine" :true-label="1" :false-label="0"></el-checkbox>
          </el-form-item>

          <template v-for="(kpi ,index) in formInfoStep5.barAndLineCharts" v-if="formInfoStep5.ifBarAndLine===1">
            <div class="line-form-items">
              <el-form-item :label="index===0?'柱折混合图KPI选择':' '" :prop="'barAndLineCharts.' + index + '.axis'"  :rules="[{ required: true, message: '坐标轴不能为空', trigger: 'change'  }]" >
                <el-select  class="small-width" :disabled="readonly"  v-model="kpi.axis" placeholder="请选择" >
                  <el-option
                    v-for="item in eChartsXYOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item  v-if="kpi.axis===2" label-width="0" :prop="'barAndLineCharts.' + index + '.position'"  :rules="[{ required: true, message: '位置不能为空', trigger: 'change'  }]" >
                <el-select class="small-width" :disabled="readonly"  v-model="kpi.position" placeholder="请选择" >
                  <el-option
                    v-for="item in eChartsLROptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="kpi.axis===2" label-width="0" :prop="'barAndLineCharts.' + index + '.graph'"  :rules="[{ required: true, message: '类型不能为空', trigger: 'change'  }]" >
                <el-select class="small-width" :disabled="readonly"  v-model="kpi.graph" placeholder="请选择类型">
                  <el-option
                    v-for="item in eChartsTypeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item  label-width="0" :prop="'barAndLineCharts.' + index + '.kpiId'"  :rules="[{ required: true, message: 'KPI不能为空', trigger: 'change'  }]" >
                <el-select class="small-width" :disabled="readonly"  v-model="kpi.kpiId" placeholder="请选择KPI" v-if="index===0">
                  <el-option
                    v-for="item in formInfoStep2.kpis"
                    :key="item.kpiId"
                    :label="item.rname"
                    :value="item.kpiId">
                  </el-option>
                </el-select>
                <el-select class="small-width" :disabled="readonly"  v-model="kpi.kpiId" placeholder="请选择KPI" v-else>
                  <el-option
                    v-for="item in numberKpis"
                    :key="item.kpiId"
                    :label="item.rname"
                    :disabled="formInfoStep5.barAndLineCharts.map(a=>a.kpiId).indexOf(item.kpiId)>=0"
                    :value="item.kpiId">
                  </el-option>
                </el-select>
              </el-form-item>
                <template v-if="index>0">
                  <template  v-if="formInfoStep5.barAndLineCharts.length>2">
                    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                      <i class="el-icon-minus" @click="delBarAndLineChart(index)"></i>
                    </el-tooltip>
                  </template>

                  <template v-if="index===formInfoStep5.barAndLineCharts.length-1">
                    <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                      <i class="el-icon-plus" @click="addBarAndLineChart"></i>
                    </el-tooltip>
                  </template>
                </template>
            </div>
          </template>


          <el-form-item label="饼图">
            <el-checkbox v-model="formInfoStep5.ifPie" :true-label="1" :false-label="0"></el-checkbox>
          </el-form-item>

          <el-form-item label="饼图KPI选择" prop="pieKpiIds" v-if="formInfoStep5.ifPie===1"  :rules="[{ required: true, message: 'KPI不能为空', trigger: 'change'  }]"  >
            <el-select  class="normal-width" collapse-tags :disabled="readonly" multiple v-model="formInfoStep5.pieKpiIds" placeholder="请选择">
              <el-option
                v-for="item in numberKpis"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="展示布局" prop="layoutId"  :rules="[{ required: true, message: '展示布局不能为空', trigger: 'change'  }]">

            <el-radio v-model="formInfoStep5.layoutId" :label="1"><img class="baioge-icon baioge1"></img></el-radio>
            <el-radio v-model="formInfoStep5.layoutId" :label="2"><img class="baioge-icon baioge2"></img></el-radio>
            <el-radio v-model="formInfoStep5.layoutId" :label="3"><img class="baioge-icon baioge3"></img></el-radio>
            <el-radio v-model="formInfoStep5.layoutId" :label="4"><img class="baioge-icon baioge4"></img></el-radio>

          </el-form-item>
          <el-form-item label="分组字段" prop="groupKpi"  :rules="[{ required: true, message: '分组字段不能为空', trigger: 'change'  }]" v-if="formInfoStep1.showType === 2">
            <el-select  class="normal-width"  :disabled="readonly"  v-model="formInfoStep5.groupKpi" placeholder="请选择">
              <el-option
                v-for="item in formInfoStep2.kpis"
                :key="item.kpiId"
                :label="item.rname"
                :value="item.kpiId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="默认颜色" prop="colorGroupId"  :rules="[{ required: true, message: '默认颜色不能为空', trigger: 'change'  }]">
            <div v-for="(color, index) in eChartsColorOptions" >
                <el-radio :label="color.id"  v-model="formInfoStep5.colorGroupId" :key="color.id">{{color.name}}</el-radio>
              <div class="echarts-color-radio-outline" v-if="echartsThemes[color.id]">
                <span v-for="(c,i) in echartsThemes[color.id].data" class="echarts-color-radio" :style="'background:'+c"></span>
              </div>
            </div>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="seeLastStep" >上一步</el-button>
              <!--<el-button type="primary" @click="seeNextStep" v-show="currentStep<=reportStep">下一步</el-button>-->
            <el-button type="primary" @click="add(true)" >下一步</el-button>
            <el-button type="primary" @click="add(false)" >保存</el-button>
              <el-button  @click="goBack">取消并返回</el-button>
          </el-form-item>

        </el-form>
      </div>

    </el-container>
    <el-container class="detail-container " v-show="currentStep===6" :key="6">
      <div class="full-screen">
        <div :class="layerClass.reportClass + ' report-preview'">
          <div class="table-outline">
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                align="center"
                v-for="col in tableLabel"
                :key="col.prop"
                :prop="col.prop"
                :label="col.title">
                <template slot-scope="scope">
                  模拟数据
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div :class="layerClass.chartClass + ' chart-outline'">
            <div class="line-chart" id="lineChart"></div>
            <div class="pie-chart" id="pieChart"></div>
          </div>
        </div>
      </div>
      <div class="button-container-left">
        <el-button type="primary" @click="seeLastStep" >上一步</el-button>
        <el-button type="primary" @click="add" >完成</el-button>
        <el-button @click="goBack">取消并返回</el-button>
      </div>
    </el-container>
</el-main>


