<template>
  <div class="layer-container">
      <div class="data-container">
        <div class="data-operate">
          <span>图层管理</span>
          <el-button type="primary" style="float:right;" size="mini" @click="$router.push({path:'/data/addlayer'})">添加</el-button>
          <!-- <el-button type="warning" style="float:right;" size="mini" >删除</el-button> -->
        </div>
        <div class="table-head">
          <el-row>
            <el-col :span="1">编号</el-col>
            <el-col :span="5">图层名称</el-col>
            <el-col :span="2">图层类型</el-col>
            <el-col :span="5">数据表名</el-col>
            <el-col :span="5">所属分类</el-col>
            <el-col :span="4">状态</el-col>
            <el-col :span="2">操作</el-col>
          </el-row>
        </div>
        <div class="table-body">
          <div class="table-row" v-for="(item,index) in tableData" :key="index">
            <el-row>
              <el-col :span="1">{{index}}</el-col>
              <el-col :span="5">{{item.name}}</el-col>
              <el-col :span="2">{{item.layertype}}</el-col>
              <el-col :span="5">{{item.tablename?item.tablename:"暂无"}}</el-col>
              <el-col :span="5">{{item.createtime}}</el-col>
              <el-col :span="4">{{item.isshow ? '展示' : '隐藏'}}</el-col>
              <el-col :span="2">
                <el-button type="primary" size="mini" @click="editLayer(item)">编辑</el-button>
                &nbsp;
                <el-button type="warning" size="mini" @click="delLayer(item.id)">删除</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="table-pagenation">
          <el-pagination
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
  </div>
</template>
<script>
import { getMethodCommon, postMethodCommon } from '../../api/common'
export default {
  name:"LayerManagement",
  data(){
    return {
      tableData:[],
    }
  },
  created(){
    this.getLayerList();
  },
  methods:{
    getLayerList(){
      getMethodCommon("/LayerManager/Load").then(res=>{
        if(res.code == 200){
          this.tableData = res.result;
        }
      })
    },
    delLayer(id){
      postMethodCommon("/LayerManager/Delete",[id]).then(res=>{
        if(res.code == 200){
          this.$message.success("删除成功");
          this.getLayerList();
        }
      })
    },
    editLayer(item){
      this.$router.push({path:'/data/addlayer',query:item})
    }
  }
}
</script>
<style scoped>

.layer-container{
  width:100%;
  height:100%;
  background:#1d253d;
}
.data-container{
  width: calc( 100% - 80px);
  height: calc( 100% - 40px);
  padding:20px;
  float:left;
  margin-left:20px;
  background:#1d253d;
}
.data-container .data-operate{
  width:100%;
  height:30px;
  color:#8a91aa;
  line-height:30px;
}

.data-container .table-head{
  width:100%;
  height:30px;
  background:#2b324f;
  margin-top:20px;
  text-align: center;
  line-height: 30px;
  color:#8a91aa;
}

.table-body{
  width:100%;
  height: calc( 100% - 140px);
  overflow: auto;
  margin-top:20px;
}

.table-body::-webkit-scrollbar{
  width:10px;
  border-radius:5px;
}
.table-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.2);
  border-radius: 5px;
}
.table-row{
  width:100%;
  height:40px;
  line-height: 40px;
  color:#8a91aa;
  text-align: center;
}

.table-pagenation{
  width:100%;
  height:50px;
  margin-top:20px;
}

::v-deep .el-pager li{
  background:rgba(0, 0, 0, 0);
  color:#efefef;
}
::v-deep .btn-prev{
  background:rgba(0, 0, 0, 0);
  color:#efefef;
}
::v-deep .el-pagination button:disabled{
    background:rgba(0, 0, 0, 0);
  color:#efefef;
}
::v-deep .btn-next{
  background:rgba(0, 0, 0, 0);
  color:#efefef;
}

::v-deep .el-button{
  margin:0px;
  border-radius:3px;
  padding:4px 7px;
  font-size:12px!important;
}


</style>