<template>
  <div class="operation-list">
    <div class="group" v-for="(group, idx) in operation_data" :key="idx">
      <div class="group-title">
        <div class="title-header"></div>
        <div class="title-text">{{ group.title }}</div>
      </div>
      <!-- <el-checkbox-group class="group-check" v-model="checkboxGroup" size="mini"> -->
      <div class="group-check">
        <el-checkbox-button v-for="btn in group.buttons" size="mini" 
        @change="change"
        v-model="btn.check" :label="btn.text" :key="btn.flame_id">{{ btn.text }}</el-checkbox-button>
      </div>
      <!-- </el-checkbox-group> -->
    </div>
  </div>
</template>

<script>
import system from '../../api/system.js';
export default {
  data() {
    return {
      checkboxGroup: ['吕'],
      operation_data: [
        {
          title: '基本操作',
          buttons: [
            {
              text: '新建',
              icon: '0',
              check: false,
              disabled: true,
              customer_text: '新建'
            },
            {
              text: '批量删除',
              icon: '0',
              check: false,
              customer_text: '删除'
            },
            {
              text: '删除',
              icon: '0',
              check: false,
              customer_text: '删除'
            },
            {
              text: '删除',
              icon: '0',
              check: false,
              customer_text: '删除'
            }
          ]
        },
        {
          title: '工作流操作',
          buttons: [
            {
              text: '提交',
              icon: '0',
              check: false,
              customer_text: '提交'
            },
            {
              text: '撤回',
              icon: '0',
              check: false,
              customer_text: '撤回'
            }
          ]
        },
        {
          title: '导入导出',
          buttons: [
            {
              text: '提交',
              icon: '0',
              check: false,
              customer_text: '提交'
            },
            {
              text: '撤回',
              icon: '0',
              check: false,
              customer_text: '撤回'
            }
          ]
        }
      ]
    };
  },
  props: {},
  inheritAttrs: false,
  watch: {
    immediate: true
  },
  methods: {
    // loadData(role_id) {
    //   let that = this;
    //   let commit_data = { role_id: role_id };
    //   system.call_method('sys_flame_page_operation', 'getOperationGroupByRoleid', commit_data, res => {
    //     console.log('res', res);
    //     if (res.result === true) {
    //       that.operation_data = res.items;
    //     } else {
    //       that.$message({
    //         type: 'info',
    //         message: res.message
    //       });
    //     }
    //   });
    // },
    change(){
      let that = this;
      console.log('change---list');
      that.$emit('change',that.operation_data);
    },
    setData(data) {
      let that = this;
      console.log('data', data), (that.operation_data = data);
    }
  }
};
</script>

<style lang="scss" scoped>
.operation-list {
  .group {
    .group-title {
      display: flex;
      padding: 5px;
      margin: 5px;
      .title-header{
        border-left: solid 5px red;
        margin-right: 5px;
      }
      .title-text
      {
         font-weight: bold;
         color: brown;
         font-size: 16px;
         background: #FAFAFA;
      }
    }
    .group-check {
      margin-left: 20px;
    }
  }
}
</style>
