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

  <!--下面是搜索条件-->
  <el-form label-position="right" class="simple-search-form-outline" inline >

    <el-form-item label="图表类型">
      <el-select v-model="searchForm.chartType" placeholder="请选择" clearable filterable >
        <el-option
          v-for="item in chartTypeOptions"
          :key="item.id"
          :label="item.value"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="图表名称">
      <el-input placeholder="请输入内容" v-model="searchForm.chartName" @keyup.native.enter="getList">
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="getList">查询</el-button>
    </el-form-item>

  </el-form>

  <!--主列表数据-->
  <div class="table-container">
    <div class="button-container">
      <div>
        <el-button type="primary" @click="go('ChartAdd')">新建图表</el-button>
        <!-- <el-button type="primary" @click="go('ReportAccess')">权限设置</el-button> -->
      </div>
    </div>
    <table-component @search="search" :tableOption="tableOption" :tableData="tableData" :pageParam="pageParam" @action="action" @selectChange="selectChange"></table-component>
  </div>

  <!--弹框-->
  <el-dialog :visible.sync="showDialog" @opened = "openedDlg" title="预览" width="50%" :before-close="closeDialog">
    <div class="el-echart-box" id="previewCharts" v-if="chartsType == 3 || chartsType == 2 || chartsType == 8"></div>
    <div v-if="chartsType == 1" class="el-rich-text">
      <table-component @search="search" :tableOption="viewTableOption"  :tableData="viewTableData" :pageParam="pageParam" @action="action" @selectChange="selectChange"></table-component>
    </div>
    <div v-if="chartsType == 5" class="el-rich-text">
      <img :src = "imgSrc"/>
    </div>
    <video class="el-video" controls v-if="chartsType == 6" autoplay="autoplay" id="previewVedio">
      <source :src="videoUrl" type="video/mp4" >
    </video>
    <div class="el-rich-text" v-if="chartsType == 4" id="richTextBox" v-html="richText"></div>
    <div class="el-baidu-map" v-if="chartsType == 7" id="baiduMapDiv"></div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="closeDialog">取消</el-button> -->
      <el-button type="primary" @click="closeDialog">确定</el-button>
    </div>
  </el-dialog>

</el-main>








