<template>
  <div class="all">
    <pageHeader :pagename="'编辑权限'" />
    <el-button type="primary" class="save" @click="save()">保存</el-button>

    <el-table
      :data="tableData"
      border
      :show-header="showHeader"
      size="small"
      class="commonTable"
      :row-style="{ height: '5px' }"
      :cell-style="{ padding: '5px' }"
      style="font-size: 15px"
    >
      <el-table-column prop="id" label="ID" width="180">
        <template slot-scope="scope">
          <div class="table-item">
            <h4 class="left-table-item">{{ scope.row.tokenName }}</h4>
            <el-switch
              style="display: block"
              v-model="scope.row.tokenValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="toggleSwitch"
              class="right-table-item"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <div class="">
            <span class="left-item">{{ scope.row.describe }}:</span>
            <p-el-checkbox
              v-model="scope.row.tokenInfo"
              resultType="Array"
              label="name"
              prop="id"
              :defaultCheck="scope.row.tokenInfo"
              :checkboxList="checkboxList"
              class="right-item"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Pelcheckbox from "@/components/checkBox.vue";
export default {
  components: {
    "p-el-checkbox": Pelcheckbox,
  },
  props: [],
  data() {
    return {
      showHeader: false,
      tokenValue: false,
      defaultCheck: ["1", "3"],
      checkboxList: [
        { name: "增加", id: "1" },
        { name: "删除", id: "2" },
        { name: "更改", id: "3" },
      ],
      result: {},
      //固定基本格式的
      tableData: [
        {
          id: "1",
          tokenName: "数据库",
          describe: "与我相关",
          tokenInfo: ["1", "2"],
        },
        {
          id: "2",
          tokenName: "车库管理",

          describe: "与我相关",
          tokenInfo: ["1", "2", "3"],
        },
      ],
    };
  },
  mounted() {},
  watch: {
    result: function () {
      console.log("变化了：", this.result);
    },
  },
  methods: {
    save() {
      console.log(this.tableData);
    },
    toggleSwitch() {
      console.log(this.tableData);
    },
    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      row, column, rowIndex, columnIndex;
      //columnIndex rowIndex是控制
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }

      // if (rowIndex >= 2) {
      //   return {
      //     rowspan: 2,
      //     colspan: 1,
      //   };
      // }
      


    },
  },
};
</script>

<style lang="scss" scoped>
.all {
  transform-origin: 0px 0px !important; //在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点,用法：transform-origin: 10px 10px;
  transform: scale(
    0.8,
    0.8
  ) !important; //第一个参数:指定水平方向的缩放倍率，第二个参数:指定垂直方向的缩放倍率
}
.box-card {
  margin: 12px;
}
.save {
  float: right;
  margin-top: -65px;
}
.table-item {
  position: absolute !important;
  margin-top: -12px !important;
  margin-left: 20px;
  width: 110px;
}
.commonTable {
}
.right-item {
  float: right;
  margin-right: 650px;
}
.left-item {
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}
.right-table-item {
  //   position: relative;
  margin-top: 1px;
  float: right;
}
.left-table-item {
  //  position: relative;
  margin-top: 3px;
  //   margin-left:45px ;

  float: left;
}
</style>
