<template>
  <div class="app-container-10 container-f0f2f5 app-main feature-list-container">
    <div class="feature-list-content container-fff app-container-15 app-ele-border-radius-0">
      <div class="default-btn primary-btn" @click="goCreatePage">{{$t('shopFeature.list.newMicroPage')}}</div>
      <!--微页面列表-->
      <div class="content-box table-con">
        <el-table
          :data="miniPageList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%">
          <el-table-column
            prop="name"
            :label="$i18n.t('shopFeature.list.pageName')"
            >
            <template slot-scope="scope">
            <div>
              {{scope.row.name}}
              <el-tag v-if="scope.row.homeStatus===1" effect="dark" size="mini" style="margin-left: 10px;">{{$t('shopFeature.list.shopHomePage')}}</el-tag>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            :label="$i18n.t('shopFeature.list.createTime')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="updateTime"
            :label="$i18n.t('shopFeature.list.updateTime')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :label="$i18n.t('shopFeature.list.oper')">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small">查看</el-button> -->
              <div class="text-btn-con">
                <div class="default-btn text-btn" @click="handleEdit(scope.row)">{{$t('shopFeature.list.edit')}}</div>
                <div class="default-btn text-btn" @click="handleDelete(scope.row)">{{$t('shopFeature.list.delete')}}</div>
                <div class="default-btn text-btn" @click="handleSetHomePage(scope.row.renovationId)">{{ scope.row.homeStatus!=1 ? $t('shopFeature.list.setHomePage'): $t('shopFeature.list.cancelHomePage')}}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import List from './list'

  export default List
</script>
