<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="KPI名称" prop="name"  :rules="[{ required: true, message: 'KPI名称不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
        <el-input class="normal-width" :disabled="readonly"  v-model="formInfo.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="KPI 类型" prop="type" :rules="[{ required: true, message: 'KPI类型不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width"  @change="typeChange(formInfo)" :disabled="readonly" v-model="formInfo.type" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input  class="normal-width" :disabled="readonly"  v-model="formInfo.unit" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属主题" prop="topicCodes" :rules="[{ required: true, message: '所属主题不能为空', trigger: 'change'  }]">
        <multiple-select-tree :disabled="readonly" :className="'normal-width'" :treeData='treeData'  :selectedId.sync="formInfo.topicCodes" :defaultExpandAll="true" ></multiple-select-tree>
      </el-form-item>
      <el-form-item label="启用状态"  prop="enableStatus" :rules="[{ required: true, message: '启用状态不能为空', trigger: 'change'  }]">
        <el-select class="normal-width" :disabled="readonly" v-model="formInfo.enableStatus" placeholder="请选择">
          <el-option
            v-for="item in formatterOptions.enableStatusShow"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="编辑状态"  prop="editStatus" :rules="[{ required: true, message: '编辑状态不能为空', trigger: 'change'  }]">
        <el-select class="normal-width" :disabled="readonly" v-model="formInfo.editStatus" placeholder="请选择">
          <el-option
            v-for="item in formatterOptions.editStatusShow"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :disabled="(formInfo.type === 2 && item.id === 1) || (formInfo.type === 3 && item.id === 0)">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="口径描述"  prop="description" :rules="[{ max: 50, message: '字数不能超过50', trigger: 'change' }]" >
        <el-input class="normal-width" :disabled="readonly" type="textarea" v-model="formInfo.description" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="数据类型" prop="ruleTypeId" :rules="[{ required: true, message: '数据类型不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width" :disabled="readonly" v-model="formInfo.ruleTypeId" placeholder="请选择">
          <el-option
            v-for="item in ruleTypeOptions"
            :key="item.id"
            :label="item.typeDesc"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--函数类型 特殊部分 start-->
      <el-form-item label="数据库"  prop="databaseId" v-if="formInfo.type==4" :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" v-if="formInfo.type==4" :rules="[{ required: true, message: '数据表不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width" :disabled="readonly" @change="kpiTableChange(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="functionId" v-if="formInfo.type==4" :rules="[{ required: true, message: '函数不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width" :disabled="readonly" @change="kpiFunctionChange(formInfo,$event)" v-model="formInfo.functionId" placeholder="请选择">
          <el-option
            v-for="item in kpiFunctionOptions"
            :key="item.id"
            :label="item.functionName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="函数及参数说明" v-if="formInfo.type==4" >
        <span style="color:red;">{{formInfo.functionDesc}}</span>
      </el-form-item>

      <el-form-item label="参数字段" v-if="formInfo.type==4" prop="chooseColumnIds" :rules="[{ required: true, message: '参数字段不能为空', trigger: 'blur'  }]">
        <el-select :multiple-limit="limitNum" filterable class="normal-width" :disabled="readonly"  v-model="formInfo.chooseColumnIds" multiple placeholder="字段">
          <el-option
            v-for="item in columnOptions"
            :key="item.id"
            :label="item.columnName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--函数类型 end-->

      <!--定义/输入类型 特殊部分 start-->
      <el-form-item label="数据库"  prop="databaseId" v-if="formInfo.type==1 || formInfo.type==3" :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="definedTypeInfo.tableId" v-if="formInfo.type==1 || formInfo.type==3" :rules="[{ required: true, message: '数据表不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width" :disabled="readonly" @change="tableChange(formInfo)" v-model="formInfo.definedTypeInfo.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="definedTypeInfo.columnId" v-if="formInfo.type==1 || formInfo.type==3" :rules="[{ required: true, message: '数据字段不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width" :disabled="readonly" v-model="formInfo.definedTypeInfo.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>
      <!--定义类型 end-->

      <!--计算类型 start-->
      <el-form-item label="数据库"  prop="databaseId" v-if=" formInfo.type== 2 " :rules="[{ required: true, message: '数据库不能为空', trigger: 'change'  }]">
        <el-select filterable class="normal-width" :disabled="readonly" @change="computedDatabaseChange(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 class="normal-width" label="是否跨表" prop="acrossTable"  v-if="formInfo.type==2">
        <el-radio-group @change="acrossTableChange($event)"  v-model="formInfo.computedTypeInfo.acrossTable">
          <el-radio :disabled="readonly" label="yes" >是</el-radio>
          <el-radio :disabled="readonly" label="no" >否</el-radio>
        </el-radio-group>
      </el-form-item>

      <template  v-if="formInfo.type==2" v-for="(content,index) in formInfo.computedTypeInfo.contents" >
        <div class="line-form-items">
          <el-form-item :class="index===0?'':'hide-form-star'" :label="index===0?'表字段设置':' '" :prop="'computedTypeInfo.contents.' + index + '.tableId'"  :rules="[{ required: true, message: '表不能为空', trigger: 'blur'  }]">
            <el-select filterable class="normal-width" @change="settingTableChange(index,$event)" :disabled="readonly" v-model="content.tableId" placeholder="表">
              <el-option
                v-for="item in tableOptions"
                :key="item.id"
                :label="item.tableName"
                :value="item.id"
                :disabled="index===1?(item.id == formInfo.computedTypeInfo.contents[0].tableId): (item.id == mutexTableId)">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label-width="0" :prop="'computedTypeInfo.contents.' + index + '.columnId'" :rules="[{ required: true, message: '字段不能为空', trigger: 'blur'  }]">
            <el-select filterable class="normal-width" @change="settingColumnChange" :disabled="readonly" v-model="content.columnId" multiple placeholder="字段">
              <el-option
                v-for="item in content.options"
                :key="item.id"
                :label="item.columnName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </template>

      <template v-if="formInfo.type==2 && formInfo.computedTypeInfo.acrossTable=='yes'" v-for="(relOption,index) in formInfo.computedTypeInfo.relOptions">
        <div class="line-form-items">
          <el-form-item :class="index===0?'':'hide-form-star'" label="关联字段" :label="index===0?'关联字段':' '" :prop="'computedTypeInfo.relOptions.' + index + '.tableId'"  :rules="[{ required: true, message: '表不能为空', trigger: 'blur'  }]">
            <el-select  filterable class="small-width" :disabled="readonly" @change="leftRelTableChange(index,$event)" v-model="relOption.tableId" placeholder="表">
              <el-option
                v-for="item in relTableOptions"
                :key="item.id"
                :label="item.tableName"
                :value="item.id"
                :disabled="(item.id == relOption.mutexTableId)">
              </el-option>
           </el-select>
          </el-form-item>

          <el-form-item label-width="0" :prop="'computedTypeInfo.relOptions.' + index + '.columnId'" :rules="[{ required: true, message: '字段不能为空', trigger: 'blur'  }]">
            <el-select  filterable class="small-width" :disabled="readonly" v-model="relOption.columnId" placeholder="字段">
              <el-option
                v-for="item in relOption.leftOptions"
                :key="item.id"
                :label="item.columnName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="text"> = &nbsp;&nbsp;</el-button>
          </el-form-item>

          <el-form-item label-width="0" :prop="'computedTypeInfo.relOptions.' + index + '.relTableId'" :rules="[{ required: true, message: '表不能为空', trigger: 'blur'  }]">
            <el-select  filterable class="small-width" :disabled="readonly" @change="rightRelTableChange(index,$event)" v-model="relOption.relTableId" placeholder="表">
              <el-option
                v-for="item in relTableOptions"
                :key="item.id"
                :label="item.tableName"
                :value="item.id"
                :disabled="(item.id == relOption.mutexRelTableId)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0" :prop="'computedTypeInfo.relOptions.' + index + '.relColumnId'" :rules="[{ required: true, message: '字段不能为空', trigger: 'blur'  }]">
            <el-select  filterable class="small-width" :disabled="readonly" v-model="relOption.relColumnId" placeholder="字段">
              <el-option
                v-for="item in relOption.rightOptions"
                :key="item.id"
                :label="item.columnName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <i v-if="!readonly" class="el-icon-minus"  @click="relMinus(index,$event)" ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
            <i v-if="!readonly" class="el-icon-plus"   @click="relPlus(index,$event)" ></i>
          </el-tooltip>
        </div>
      </template>

      <template v-if="formInfo.type==2" v-for="(ruleOption,index) in formInfo.computedTypeInfo.ruleOptions">
        <div class="line-form-items">
          <el-form-item :class="index===0?'':'hide-form-star'" :label="index===0?'规则设置':' '" :rules="[{ required: true}]">
            <el-select  clearable class="tiny-width" :disabled="readonly" v-model="ruleOption.leftSign" placeholder="符号">
              <el-option
                v-for="item in signOptions"
                :key="item.sign"
                :label="item.sign"
                :value="item.sign"
                :disabled=" index === 0 && item.sign != '(' ">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if=" ruleOption.isConstant==='false' || ruleOption.isConstant===null " label-width="0" :prop="'computedTypeInfo.ruleOptions.' + index + '.columnId'" :rules="[{ required: true, message: '字段不能为空', trigger: 'blur'  }]">
            <el-select  class="small-width" :disabled="readonly" v-model="ruleOption.columnId" placeholder="请选择字段">
              <el-option
                v-for="item in colOptions"
                :key="item.id"
                :label="item.columnName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if=" ruleOption.isConstant==='true' " label-width="0" :prop="'computedTypeInfo.ruleOptions.' + index + '.constant'" :rules="[{ required: true, message: '常量不能为空', trigger: 'blur'  },{ max: 10, message: '字数不能超过10', trigger: 'change' }]">
            <el-input  class="small-width" :disabled="readonly"  v-model="ruleOption.constant" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label-width="0">
            <el-select  clearable class="tiny-width" :disabled="readonly" v-model="ruleOption.rightSign" placeholder="符号">
              <el-option
                v-for="item in signOptions"
                :key="item.sign"
                :label="item.sign"
                :value="item.sign"
                :disabled=" index === formInfo.computedTypeInfo.ruleOptions.length-1 && item.sign != ')' ">
              </el-option>
            </el-select>
          </el-form-item>

          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <i v-if="!readonly" v-show="index > 0" class="el-icon-minus"  @click="ruleMinus(index,$event)" ></i>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
            <i v-if="!readonly" class="el-icon-plus"   @click="rulePlus" ></i>
          </el-tooltip>
          <!--<el-form-item>
            <el-button v-if="!readonly" type="primary" @click="ruleConstant" round plain>常量</el-button>
          </el-form-item>-->
          <el-tooltip class="item" effect="dark" content="常量" placement="top-start">
            <i v-if="!readonly" class="el-icon-datau-zengjiachangliang" @click="ruleConstant" style="padding:10px 10px;" ></i>
          </el-tooltip>
          </div>
      </template>

      <!--计算类型 end-->

      <el-form-item label=" ">
         <!-- <el-popover
            v-if="formInfo.type==2"
            class="button-outline"
            placement="top-start"
            title="预览规则"
            width="420"
            trigger="hover">
            <span>{{previewData}}</span>
            <el-button type="primary" slot="reference" @click="preview">预览</el-button>
          </el-popover>-->
          <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>
