<template>
  <div class="app-container">
    <el-card class="app-search">
      <search @searchParams="setSearchQuery" @search="getList"></search>
    </el-card>
    <el-card class="app-content">
      <pagination :pagesize.sync="pageSize" :hasNextPage.sync="hasNextPage" @pagination="getList"/>
      <el-table class="app-table" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="ID" width="80" prop="id"></el-table-column>
        <el-table-column align="center" min-width="150" label="名称" prop="name"></el-table-column>
        <el-table-column align="center" width="180" label="广告图">
          <template slot-scope="{row}">
            <xd-item-image :width="160" :height="120" :preview="row['img_url']" :preview-list="[row['img_url']]"></xd-item-image>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="排序" prop="sort"></el-table-column>
        <el-table-column align="center" width="100" label="状态">
          <template slot-scope="{row}">
            <el-tag :type="row.status === 'Y'?'success' : 'danger'">
              {{ row.status === 'Y'? '正常': '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="200" label="创建时间" prop="created_time"></el-table-column>
        <el-table-column width="200" label="操作时间" prop="updated_time"></el-table-column>
        <el-table-column align="center" v-if="isEdit" label="操作" width="65" fixed="right">
          <template slot-scope="{row}">
            <div class="user-operation">
              <el-tooltip v-if="isEdit" effect="dark" content="编辑" placement="top">
                <router-link target="_blank" :to="'/market/poster/edit/'+ row['id']">
                  <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                </router-link>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :pagesize.sync="pageSize" :hasNextPage.sync="hasNextPage" @pagination="getList"/>
    </el-card>
  </div>
</template>

<script>
	import {mapActions} from 'vuex';
	import search from './components/search';
	import Pagination from '@/components/Pagination/index_custom'
  import {Loading} from 'element-ui';


	export default {
		name: 'MarketPosterList',
		components: {Pagination, search},
  
		data() {
			
			return {
				list: null,
				listLoading: true,
        searchQuery:{},
		    pageSize : 1,
		    hasNextPage: true,
			}
		},
    computed: {
      isEdit(){
				return this.$checkFnPermission(this.$roles['posterRangeEdit'])
      },
    },
		created() {
			this.getList()
		},
		methods: {
			...mapActions('market_poster', [
				'getPosterList',
			]),
    
		  setSearchQuery(query){
				this.searchQuery = this.$helper.deleteParamEmptyKey(query);
      },
      
			getList(lastKey) {
				let {order_by} = this.$route.query;
		  	if(lastKey) this.pageSize = lastKey;
				let listQuery = Object.assign({}, {
          	last_key: this.pageSize,
            order_by,
          }, this.searchQuery);
				
				let loading = Loading.service({});
				this.getPosterList(listQuery)
          .then(res => {
            this.list = res.data;
            if(res['last_key'] === null) {
              this.hasNextPage = false;
            }else {
              this.hasNextPage = true;
            }
            
						loading.close()
          })
          .catch(()=> {
						loading.close()
          });
			},
		}
	}
</script>

<style scoped>
  
  .app-search {
    margin-bottom: 20px;
  }

  /deep/ .app-search  .el-card__body {
    padding-bottom: 0 !important;
  }
  
  .app-table {
    margin: 20px 0;
  }
  
  /deep/ .app-table .el-table__header th {
    background: #f4f4f4;
  }
  
  .user-operation /deep/ > * {
    margin: 0 5px;
  }
  
  .user-operation /deep/ > *:first-child {
    margin-left: 0 !important;
  }
  
  .user-operation /deep/ > *:last-child {
    margin-right: 0 !important;
  }
  
  .user-operation /deep/ button {
    padding: 5px 10px;
    font-size: 16px;
  }
  
  .user-operation /deep/ i {
    font-size: 16px;
    font-weight: bold;
  }

</style>
