<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column label="Ad" prop="LOCATION_NAME"> <!-- 广告位名称 -->
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{scope.row.LOCATION_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Description" prop="REMARK"></el-table-column> <!-- 描述 -->
        <el-table-column label="Type"> <!-- 类型 -->
          <template slot-scope="scope">
            <template v-if="scope.row.TYPE === '1'">
              <el-tag type="success">幻灯</el-tag> <!-- 幻灯 -->
            </template>
            <template v-else-if="scope.row.TYPE === '2'">
              <el-tag>Image</el-tag> <!-- 图片 -->
            </template>
          </template>
        </el-table-column>
        <el-table-column label="Creator"> <!-- 创建人 -->
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="Create time"> <!-- 创建时间 -->
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="Action" width="180"> <!-- 操作 -->
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click" v-if="permission.hasPermission(`ad/list`)">
              <el-button type="primary" size="small" @click.stop="">
                Operate on this data<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit" @click.native="handleShow(scope.row)">查看</el-dropdown-item> <!--  -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import network from '@/utils/network'
import tool from '@/utils/tool'
import store from '@/utils/vuexStore'
import permission from '@/utils/permission'
import Pagination from '@/components/Pagination'

export default {
  name: 'ad_location',
  components: {Pagination},
  mounted () {
    this.getData()
  },
  data () {
    return {
      tableData: null,
      loading: true,
      multipleSelection: [],
      currentPage: 1,
      totalPages: 1,
      totalCount: 1,
      pageSize: 20,
      tool: tool,
      permission: permission,
    }
  },
  methods: {
    handleCurrentChange (page) {
      this.getData(page, this.pageSize)
    },
    handleSizeChange (pageSize) {
      this.getData(this.currentPage, pageSize)
    },
    handleShow (row) {
      this.$router.push({path: `/ad/list/${row.ID}`})
    },
    getData (page, pageSize) {
      network.getPageData(this, 'ad/location', page, pageSize)
    },

  }
}

</script>

<style scoped>

</style>
