<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>表单</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="text/javascript" src="/sitefiles/assets/lib/iframe-resizer-4.3.6/iframeResizer.contentWindow.min.js"></script>
  <link href="/sitefiles/assets/lib/elementui/default/index.css" rel="stylesheet" type="text/css" />
  <link href="/sitefiles/assets/css/element-ui.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="main">
    <template v-if="pageType == 'loading'">
      <el-row style="margin-top: 100px; text-align: center">
        <img src="/sitefiles/assets/images/loading.gif" />
        <p>载入中，请稍后...</p>
      </el-row>
    </template>
    <template v-else>

      <el-table :data="items" stripe style="width: 100%">
        <el-table-column
          v-for="attributeName in allAttributeNames" 
          :key="attributeName" 
          v-if="listAttributeNames.indexOf(attributeName) !== -1"
          :label="getAttributeText(attributeName)">
          <template slot-scope="scope">
      
            <el-image
              v-if="getAttributeType(attributeName) === 'Image'"
              :src="getAttributeValue(scope.row, attributeName)"
              style="max-height: 100px; max-width: 100px; cursor: pointer;"
              v-on:click="largeImage(scope.row, attributeName)">
            </el-image>
            <div v-else>
                {{ getAttributeValue(scope.row, attributeName) }}
            </div>
      
          </template>
        </el-table-column>
        <el-table-column v-if="isReply" prop="replyDate" label="回复时间" width="160"></el-table-column>
        <el-table-column v-if="isReply" prop="replyContent" label="回复内容" width="160"></el-table-column>
      </el-table>
      
      <el-row style="margin-top: 15px;">
        <el-col :span="24" align="center">
          <el-pagination
            size="mini"
            background
            v-on:current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>

      <!-- <div class="card-box">
        <div class="table-responsive mt-3">
          <table class="table tablesaw table-hover m-0">
            <thead>
              <tr>
                <th v-for="attributeName in allAttributeNames" v-if="listAttributeNames.indexOf(attributeName) !== -1">
                  {{ getAttributeText(attributeName) }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in items">
                <td v-for="attributeName in allAttributeNames" :key="attributeName" v-if="listAttributeNames.indexOf(attributeName) !== -1">
                  
                    <img v-if="getAttributeType(attributeName) === 'Image'" :src="getAttributeValue(item, attributeName)" style="max-height: 100px; max-width: 100px; cursor: pointer;" v-on:click="largeImage(item, attributeName)">
                    <div v-else>
                        {{ getAttributeValue(item, attributeName) }}
                    </div>

                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <hr />
        <div class="row" v-if="pages > 1">
          <div class="col-10">
            <ul class="pagination pagination-sm float-left">
              <li class="page-item" :class="{disabled : page === 1}">
                <a class="page-link" @click="loadFirstPage" :class="{'bg-light' : page === 1}" href="javascript:;">首 页</a>
              </li>
              <li class="page-item" :class="{disabled : page === 1}">
                <a class="page-link" @click="loadPrevPage" :class="{'bg-light' : page === 1}" href="javascript:;">上一页</a>
              </li>
              <li class="page-item" :class="{disabled : page === pages}">
                <a class="page-link" @click="loadNextPage" :class="{'bg-light' : page === pages}" href="javascript:;">下一页</a>
              </li>
              <li class="page-item" :class="{disabled : page === pages}">
                <a class="page-link" @click="loadLastPage" :class="{'bg-light' : page === pages}" href="javascript:;">末
                  页</a>
              </li>
            </ul>
          </div>
          <div class="col-2">
            <multiselect @select="onPageSelect" v-model="page" placeholder="Select one" :options="pageOptions"
              :searchable="false" :show-labels="false"></multiselect>
          </div>
        </div>
      </div> -->
    </template>
  </div>
</body>

</html>

<script src="/sitefiles/assets/lib/es6-promise.auto.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/axios-1.6.1.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/core-js-3.6.5.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/elementui/index.js"></script>
<script src="/sitefiles/assets/js/plugin.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/utils.js" type="text/javascript"></script>

<script src="list.js" type="text/javascript"></script>