<el-main>
  <!--面包屑-->
  <breadcrumb-component ></breadcrumb-component>
  <el-container class="detail-container">

    <el-container>
    <el-aside width="300px" class="inner-left"  v-if="!id">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>

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

    <el-main class="inner-main"><div class="access-select-result">
      <div>
        已选报表：
        <el-tag v-if="id">{{id?name:''}}</el-tag>
        <el-tag
          v-for="(tag, index) in selectedReport"
          :key="tag.id"
          @close="removeItem(reportIds,index)"
          closable>
          {{tag.name}}
        </el-tag>
      </div>
      <div>
        已选用户：
        <el-tag
          v-for="(tag, index) in selectedUser"
          :key="tag.id"
          @close="removeItem(userIds,index)"
          closable>
          {{tag.name}}
        </el-tag>
      </div>
    </div>
      <!--下面是新建-->
      <div class="multiple-select-container" :class="id?'signal-select-container':''">
        <div v-if="!id">
          <div class="multiple-select-title">
            <span>报表名称</span>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterReportText">
            </el-input></div>
          <div class="multiple-select-button"><span @click="selectReportAll(true)" class="multiple-select-all">全选</span><span @click="selectReportAll(false)" class="multiple-select-all">全不选</span></div>
          <div class="multiple-select-item">
            <el-checkbox-group v-model="reportIds">
              <el-checkbox :key="index" v-for="(report, index) in reportOptionsFiltered" :label="report.id">{{report.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div>
          <div class="multiple-select-title">
            <span>用户名称</span>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterUserText">
            </el-input></div>
          <div class="multiple-select-button"><span @click="selectUserAll(true)" class="multiple-select-all">全选</span><span @click="selectUserAll(false)" class="multiple-select-all">全不选</span></div>
          <div class="multiple-select-item">
            <el-checkbox-group v-model="userIds">
              <el-checkbox :key="index" v-for="(report, index) in userOptionsFiltered" :label="report.id">{{report.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>

      <div class="button-container-left">
        <el-button type="primary" @click="reportRelUsers" v-if="id">保存</el-button>
        <el-button type="primary" @click="reportsRelUsers" v-else>保存</el-button>
        <el-button   @click="goBack">取消并返回</el-button>
      </div>
      <!--弹框-->
    </el-main>
    </el-container>
  </el-container>
</el-main>








