<el-main>
  <!--面包屑-->
  <breadcrumb-component ></breadcrumb-component>
  <el-container class="detail-container">
    <el-form label-width="200px" label-position="right" class="create-form-outline-full-screen"  :class="readonly?'readonly':''"    :model="formInfo"    ref="formInfo" >

      <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="formInfo.chartName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="图表分类"  prop="chartClassCode" :rules="[{ required: true, message: '图表分类不能为空', trigger: 'change'  }]">
        <simple-select-tree :disabled="readonly"
          v-model="formInfo.chartClassCode"
          :defaultExpandAll="true"
          :className="'normal-width'"
          :treeData="treeList">
        </simple-select-tree>
      </el-form-item>
      <el-form-item label="配置类型"  prop="configType" :rules="[{ required: true, message: '配置类型不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width"  @change="" :disabled="readonly" v-model="formInfo.configType" placeholder="请选择">
          <el-option
            v-for="item in configTypeOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图表类型" prop="chartType" :rules="[{ required: true, message: '图表类型不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width"  @change="typeChange(formInfo)" :disabled="readonly" v-model="formInfo.chartType" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="formInfo.chartTypeName"  prop="axis">
         <ul class="el-axis-content">
            <li>
              <el-form-item label="X轴" label-width="60px" prop="axis.x"  :rules="[{ required: true, message: 'X轴KPI不能为空', trigger: 'change'  }]">
                <el-select filterable  class="normal-width" :disabled="readonly" v-model="formInfo.axis.x" placeholder="请选择">
                  <el-option
                    v-for="item in databaseOptions"
                    :key="item.id"
                    :label="item.resourceName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </li>
            <li  v-for="(item, index) in formInfo.axis.y">
              <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="Y轴" label-width="60px">
                      <el-select filterable  class="el-small-width" :disabled="readonly" v-model="formInfo.axis.y[index]" placeholder="请选择">
                        <el-option
                          v-for="item in databaseOptions"
                          :key="item.id"
                          :label="item.resourceName"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-select filterable  class="el-small-width" :disabled="readonly" v-model="formInfo.axis.y[index]" placeholder="请选择">
                      <el-option
                        v-for="item in databaseOptions"
                        :key="item.id"
                        :label="item.resourceName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select filterable  class="small-width" :disabled="readonly" v-model="formInfo.axis.y[index]" placeholder="请选择">
                      <el-option
                        v-for="item in databaseOptions"
                        :key="item.id"
                        :label="item.resourceName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="2" v-if="index !== formInfo.axis.y.length-1">
                      <span class="el-icon-delete" @click="delYaxis(index)"></span>
                    </el-col>
                  <el-col :span="2" v-if="index === formInfo.axis.y.length-1">
                    <span class="el-icon-plus" @click="addYaxis"></span>
                  </el-col>
                </el-row>
            </li>
         </ul>
      </el-form-item>
      <el-form-item label="地图颜色">
        <el-radio-group v-model="formInfo.mapColor">
          <el-radio label="0" >白色</el-radio>
          <el-radio label="1">黑色</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接口分类" prop="interfaceType" :rules="[{ required: true, message: '接口分类不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width"  @change="" :disabled="readonly" v-model="formInfo.interfaceType" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接口名称" prop="interfaceId" :rules="[{ required: true, message: '接口名称不能为空', trigger: 'change' }]">
        <el-select filterable class="normal-width" :disabled="readonly" v-model="formInfo.interfaceId" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出参节点" prop="paramNode" :rules="[{ required: true, message: '出参节点不能为空', trigger: 'change' }]">
        <el-select filterable class="normal-width" :disabled="readonly" v-model="formInfo.paramNode" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地图样式" >
        <el-checkbox-group v-model="formInfo.mapStyle">
          <el-checkbox label="A" name="mapStyle">热力图</el-checkbox>
          <el-checkbox label="B" name="mapStyle">坐标点</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!--定义/输入类型 特殊部分 start-->
      <el-container class="full-screen" v-if="formInfo.chartType == 1 || formInfo.chartType == 2|| formInfo.chartType == 3 || formInfo.chartType == 8 || formInfo.chartType == 7">
        <el-form-item label="数据库"  prop="databaseId"  :rules="[{ required: true, message: '数据库不能为空', trigger: 'change'  }]">
          <el-select filterable  class="normal-width" :disabled="readonly" @change="databaseChange(formInfo)" v-model="formInfo.databaseId" placeholder="请选择">
            <el-option
              v-for="item in databaseOptions"
              :key="item.id"
              :label="item.resourceName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据表" prop="tableId" :rules="[{ required: true, message: '数据表不能为空', trigger: 'change'  }]">
          <el-select filterable class="normal-width" :disabled="readonly" @change="tableChange(formInfo)" v-model="formInfo.tableId" placeholder="请选择">
            <el-option
              v-for="item in tableOptions"
              :key="item.id"
              :label="item.tableName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据字段"  prop="columnId" ><!--:rules="[{ required: true, message: '数据字段不能为空', trigger: 'change'  }]"-->
          <el-select filterable class="normal-width el-multiple-select"  @change="columnChange(formInfo)" multiple :disabled="readonly" v-model="formInfo.columnId" placeholder="请选择">
            <el-option
              v-for="item in columnOptions"
              :key="item.id"
              :label="item.columnName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="DML语句" prop="dml" :rules="[{ required: true, message: 'DML不能为空', trigger: 'change'  }]">
          <el-input type="textarea" :disabled="readonly" class="normal-width" v-model="formInfo.dml"></el-input>
        </el-form-item>
      </el-container>
      <el-form-item label="富文本"  prop="richText" v-if="formInfo.chartType == 4" :rules="[{ required: true, message: '输入内容不能为空', trigger: 'change'  }]">
        <editor id="editor_id"  :items="items" filePostName = "imgFile" :disabled="readonly" height="300px" width="600px" :content="formInfo.richText" urlType="relative" pluginsPath="/static/kindeditor/plugins/" @afterUpload = "afterUpload" :loadStyleMode="false" :uploadJson = "uploadJson"  @on-content-change="onContentChange"></editor>
      </el-form-item>
      <el-form-item label="文件上传" v-if="formInfo.chartType == 5 || formInfo.chartType == 6">
        <el-upload class="normal-width" :disabled="readonly" drag  action="" :auto-upload=true :on-remove="fileRemove" :before-upload ="beforeAvatarUpload" :on-change="uploadFile" :file-list="fileList" list-type="small">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件（png,gif,jpg,jpeg,mp4）拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传图片或者视频文件，且不超过500Mb</div>
      </el-upload>
      </el-form-item>
      <el-form-item label="">
          <el-button type="primary" @click="preview" v-if="formInfo.type==2">预览</el-button>
          <el-button type="primary" @click="add"  v-if="dialogState==0"  >确定</el-button>
          <el-button type="primary" @click="update"  v-if="dialogState==2"  >确定</el-button>
          <el-button @click="goBack">取消并返回</el-button>
      </el-form-item>

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




</el-main>
