<template>
  <div class="RoleCustom">
    <el-table
      :data="tableData.slice((currpage - 1)*pagesize,currpage * pagesize)"
      style="width: 100% text-align:center;"
      border
      :header-cell-style="{'background-color': '#fafafa',
    'font-weight':'800'}"
      v-loading="loading"
    >
      <el-table-column prop="Name" label="系统角色" min-width="100" align="center"></el-table-column>
      <el-table-column label="自定义角色" min-width="100" align="center">
        <template slot-scope="{row,$index}">
          <input class="edit-cell" v-if="showEdit[$index]" v-model="row.SystemName" />
          <span v-if="!showEdit[$index]">{{row.SystemName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="{row,$index}">
          <div>
            <el-button
              plain
              type="primary"
              size="small"
              v-if="!showBtn[$index]"
              @click.native="CustomEdit($index,row)"
            >编辑</el-button>
            <el-button plain type="primary" size="small" v-if="showBtn[$index]" @click.native="CustomPost($index,row)">保存</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagenation">
      <span>
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="tableData.length"
          @current-change="click"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
        ></el-pagination>
      </span>
    </div>
  </div>
</template>
<script>
import { setTimeout } from "timers";
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      showEdit: [],
      showBtn: [],
      pagesize: 10,
      currpage: 1
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    //   分页条数
    handleSizeChange(val) {
      this.pagesize = val;
    },
    click(val) {
      this.currpage = val;
      var currpage = this.currpage;
      var tableData = this.tableData;
      var pagesize = this.pagesize;
      this.showBtn.splice(
        0,
        tableData.slice((currpage - 1) * pagesize, currpage * pagesize).length
      );
      this.showEdit.splice(
        0,
        tableData.slice((currpage - 1) * pagesize, currpage * pagesize).length
      );
    },
    // 获取数据
    getData() {
      setTimeout(() => {
        this.tableData = [
          {
            Code: 11,
            MTCompanyID: 0,
            Name: "高管层",
            SystemName: "高管层",
            UpdateBy: 0,
            UpdateTime: null
          },
          {
            Code: 12,
            MTCompanyID: 0,
            Name: "区域主管",
            SystemName: "区域主管",
            UpdateBy: 0,
            UpdateTime: null
          },
          {
            Code: 13,
            MTCompanyID: 0,
            Name: "维保工",
            SystemName: "维保工",
            UpdateBy: 0,
            UpdateTime: null
          },
          {
            Code: 16,
            MTCompanyID: 0,
            Name: "文员",
            SystemName: "文员",
            UpdateBy: 0,
            UpdateTime: null
          }
        ];
        this.loading = false;
      }, 1000);
    },
    // 编辑
    CustomEdit(index, row) {
      this.showEdit[index] = true;
      this.showBtn[index] = true;
      this.$set(this.showEdit, index, true);
      this.$set(this.showBtn,index, true);
    },
    // 保存
    CustomPost(index,row){
      console.log(1);
      this.$set(this.showEdit, index, false);
      this.$set(this.showBtn, index, false);
    }
  }
};
</script>
<style lang="stylus">

</style>