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

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

          <el-form-item label="配置类型" prop="dataSource"  :rules="[{ required: true, message: '配置类型不能为空', trigger: 'change'  }]">
            <el-select  class="normal-width"  :disabled="readonly||isEdit"  v-model="formInfoStep1.dataSource" placeholder="请选择" @change="onDataSourceChange">
              <el-option
                v-for="item in chartSourceOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="图表类型" prop="chartType"  :rules="[{ required: true, message: '图表类型不能为空', trigger: 'change'  }]">
            <el-select  class="normal-width"  :disabled="readonly||isEdit"   v-model="formInfoStep1.chartType" placeholder="请选择">
              <el-option
                v-for="item in chartTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.id===3 && formInfoStep1.dataSource === 1"
              >
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item>
              <!--<el-button type="primary" @click="seeNextStep" v-show="currentStep<=reportStep">下一步</el-button>-->
            <el-button type="primary" @click="nextStep" >下一步</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>

        <!--kpi来源数据 ↓-->
        <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="lastStep" >上一步</el-button>
                <el-button type="primary" @click="nextStep" >下一步</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" >

          <template v-if="formInfoStep1.chartType === 1">
            <!--<el-form-item label="柱折混合图">-->
              <!--<el-checkbox v-model="formInfoStep3.ifBarAndLine" :true-label="1" :false-label="0"></el-checkbox>-->
            <!--</el-form-item>-->

            <template v-for="(kpi ,index) in formInfoStep3.barAndLineCharts" >
              <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="formInfoStep3.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="formInfoStep3.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===formInfoStep3.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>

          </template>
          <template  v-else-if="formInfoStep1.chartType === 2">

            <el-form-item label="饼图KPI选择" prop="pieKpiIds" :rules="[{ required: true, message: 'KPI不能为空', trigger: 'change'  }]"  >
              <el-select  class="normal-width" collapse-tags :disabled="readonly" multiple v-model="formInfoStep3.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>

          </template>
          <template  v-else-if="formInfoStep1.chartType === 3">

            <el-form-item label="地图颜色">
              <el-radio v-model="formInfoStep3.mapColor" :label="1" :key="1">白色</el-radio>
              <el-radio v-model="formInfoStep3.mapColor" :label="2" :key="2">黑色</el-radio>
            </el-form-item>

            <el-form-item label="热力图">
              <el-checkbox v-model="formInfoStep3.ifThermalMap"></el-checkbox>
            </el-form-item>

            <template v-if="formInfoStep3.ifThermalMap">

              <el-form-item label="出参节点" prop="thermalMapId"  :rules="[{ required: true, message: '出参节点不能为空', trigger: 'change'  }]">
                <el-select  class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.thermalMapId" 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>

            </template>

            <el-form-item label="散点图">
              <el-checkbox v-model="formInfoStep3.ifScatterMap"></el-checkbox>
            </el-form-item>

            <template v-if="formInfoStep3.ifScatterMap">

              <el-form-item label="出参节点" prop="scatterMapId"  :rules="[{ required: true, message: '出参节点不能为空', trigger: 'change'  }]">
                <el-select  class="normal-width"  :disabled="readonly"  v-model="formInfoStep3.scatterMapId" 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>

            </template>
          </template>

          <template  v-if="formInfoStep1.chartType !== 3">
            <el-form-item label="默认颜色" >
              <div v-for="(color, index) in eChartsColorOptions" >
                <el-radio :label="color.id"  v-model="formInfoStep3.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>
          </template>

          <el-form-item>
            <el-button type="primary" @click="lastStep" >上一步</el-button>
            <el-button type="primary" @click="add" v-if="isAdd">保存</el-button>
            <el-button type="primary" @click="update" v-if="isEdit">保存</el-button>
            <el-button  @click="goBack">取消并返回</el-button>
          </el-form-item>

        </el-form>
      </div>

    </el-container>

</el-main>


