<el-main>
  <!--面包屑-->
  <breadcrumb-component ></breadcrumb-component>

  <el-container class="detail-container ">

    <!--共同项选择-->
    <el-form label-position="right" class="simple-search-form-outline" inline :model="searchForm" ref="searchForm">

      <el-col :span="8">
        <el-form-item label="所属主题" prop="topicCodes" :rules="[{ required: true, message: '所属主题不能为空', trigger: 'change'  }]">
          <multiple-select-tree :className="'normal-width'" :treeData='treeData'  :selectedId.sync="searchForm.topicCodes" :defaultExpandAll="true" ></multiple-select-tree>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="数据库" prop="databaseId" :rules="[{ required: true, message: '数据库不能为空', trigger: 'change'  }]">
          <el-select v-model="searchForm.databaseId" @change="databaseChange(searchForm)" placeholder="请选择" clearable filterable>
            <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="8">
        <el-form-item label="数据表" prop="tableId" :rules="[{ required: true, message: '数据表不能为空', trigger: 'change'  }]">
          <el-select v-model="searchForm.tableId" @change="tableChange(searchForm)" placeholder="请选择" clearable filterable>
            <el-option
              v-for="item in tableOptions"
              :key="item.id"
              :label="item.tableName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

    </el-form>

    <!--动态列表展示-->
    <el-form :model="formInfo" ref="formInfo" class="create-form-outline-full-screen" style="margin-top:0px">
      <div v-if="formInfo.contents != null && formInfo.contents.length > 0" class="main-content">
        <div  class="text-item">
          <el-button type="text" size="mini"  @click="checkAll" circle>全选</el-button>
          <el-button type="text" size="mini"  @click="unCheckAll" style="margin-left:0px;" circle>全不选</el-button>
        </div>

        <template v-for="(content,index) in formInfo.contents">
          <div class="form-line-item-batch">
            <div class="form-inner-checkbox">
              <el-checkbox v-model="checkModel"
                 :key="index" :value="index"
                 :label = "index" @change="checkChange">&nbsp;</el-checkbox>
            </div>
            <div class="form-inner">
              <div class="line-form-items">
                <el-form-item label-width="80px" label="KPI 名称" :prop="'contents.' + index + '.name'"  :rules="[{ required: true, message: 'KPI名称不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
                  <el-input class="small-normal-width" v-model="content.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label-width="80px" label="KPI 类型" :prop="'contents.' + index + '.type'" :rules="[{ required: true, message: 'KPI类型不能为空', trigger: 'change'  }]">
                  <el-select  class="small-normal-width" @change="typeChange(content,index)" v-model="content.type" placeholder="请选择">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      :disabled="item.name === '计算' || item.name === '函数' ">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label-width="80px" label="单位" prop="unit">
                  <el-input class="small-normal-width" v-model="content.unit" placeholder="请输入"></el-input>
                </el-form-item>
              </div>

              <div class="line-form-items">
                <el-form-item label-width="80px" label="启用状态"  :prop="'contents.' + index + '.enableStatus'" :rules="[{ required: true, message: '启用状态不能为空', trigger: 'change'  }]">
                  <el-select class="small-normal-width" v-model="content.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-width="80px" label="编辑状态"  :prop="'contents.' + index + '.editStatus'" :rules="[{ required: true, message: '编辑状态不能为空', trigger: 'change'  }]">
                  <el-select  class="small-normal-width" v-model="content.editStatus" placeholder="请选择">
                    <el-option
                      v-for="item in formatterOptions.editStatusShow"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label-width="80px" label="数据类型" :prop="'contents.' + index + '.ruleTypeId'" :rules="[{ required: true, message: '数据类型不能为空', trigger: 'change'  }]">
                  <el-select  class="small-normal-width" v-model="content.ruleTypeId" placeholder="请选择">
                    <el-option
                      v-for="item in content.ruleTypeOptions"
                      :key="item.id"
                      :label="item.typeDesc"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="line-form-items">
                <el-form-item label-width="80px" label="  口径描述"  prop="description" :rules="[{ max: 50, message: '字数不能超过50', trigger: 'change' }]" >
                  <el-input class="small-normal-width" type="textarea" v-model="content.description" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item label-width="80px" label="数据字段">
                  <el-select class="small-normal-width" v-model="content.definedTypeInfo.columnId" placeholder="请选择" disabled>
                    <el-option
                      v-for="item in columnOptions"
                      :key="item.id"
                      :label="item.columnName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </template>

      </div>

      <el-form-item label=" " style="margin-top:20px;">
        <el-button type="primary" @click="add">确定</el-button>
        <el-button @click="goBack">取消并返回</el-button>
      </el-form-item>

    </el-form>

  </el-container>
</el-main>
