<template>
  <el-dialog title="配置功能角色操作权限" v-bind="$attrs" :visible.sync="is_show" size="50%" @close="closeDialog" append-to-body>
    <div class="demo-drawer__content">
      <div class="content"><OperationList ref="ref_operation" @change="change"></OperationList></div>
      <div class="demo-drawer__footer">
        <div class="operation ">
          <div class="operation-button">
            <!-- <el-button type="primary">取消</el-button> -->
            <el-button type="primary" @click="confirmDialog">确 定</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../../../../api/system.js';
import _ from 'lodash';
export default {
  name: 'Dialog-operation-list',
  props: {
    show_dialog: {
      type: Boolean,
      default: false,
      required: true
    },
    role_id: {
      type: String,
      default: '0'
      // required: true
    }
  },
  components: {},
  data() {
    return {
      is_show: false,
      select_menu_name: '请点击左边的功能菜单',
      select_menu_id: 0,
      is_show_operation: false,
      operation_data: []
    };
  },
  inheritAttrs: false,
  computed: {
    // 表对于的后台的模型名称
    // ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  mounted() {},
  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    immediate: true,
    show_dialog(NewV, oldV) {
      let that = this;
      that.is_show = NewV;
    },
    role_id(newV, oldV) {
      let that = this;
      console.log('newV', newV, that.$attrs, that);
      // that.loadData(newV);
    }
  },
  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.$refs.ref_operation.setData(res.items);
        } else {
          that.$message({
            type: 'info',
            message: res.message
          });
        }
      });
    },
    setData(role_id) {
      let that = this;
      that.loadData(role_id);
    },
    change(data) {
      let that = this;
      console.log('change--dialog==', data);
      
      let map= _.map(data,'buttons');
      let arr = _.flattenDepth(map,1);
      console.log('arr=====',arr);
      let operations = _.filter(arr,{'check':true});
      that.operation_data = _.map(operations,'flame_id');
      console.log('operations=====',that.operation_data);
      that.$emit('change', data);
    },
    currentChange(data, node) {
      let that = this;
      that.select_menu_name = data['menu_name'];
      that.select_menu_id = data['flame_id'];
      that.is_show_operation = true;
    },
    // 关闭对话框
    closeDialog(value) {
      let that = this;
      // that.is_show = false;
      that.$emit('dialogClose', false);
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      // this.is_show = false;
      let commit_data = {
        role_id: that.role_id,
        operations: that.operation_data,
      };
      system.call_method('sys_flame_role_ship_operation', 'AddOperation', commit_data, res => {
        if (res.result === true) {
          that.$message({
            type: 'success',
            message: '操作成功'
          });
          that.$emit('dialogConfig', that.operation_data);
        } else {
          that.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-between;
  .content-left {
    border: 1px solid #ebeef5;
    width: 49%;
  }
  .content-right {
    .header {
      display: flex;
      justify-content: space-between;
      padding: $spacing-mini;
      color: $theme-color-1;
      font-size: $font-size-normal;
      font-weight: bold;
      text-align: center;
      line-height: 35px;
    }
    border: 1px solid #ebeef5;
    // display: -webkit-box;
    // display: flex;

    overflow: scroll;
    height: 600px;
    width: 49%;
  }
}
.master {
  border: 1px solid #ebeef5;
  margin: 2px;
  padding: 10px;
  border-radius: 2px;
  overflow-y: auto;
  // max-height: 30vh;
  .content {
    display: flex;
    flex-wrap: wrap;
  }
}
.detail {
  overflow-y: auto;
  // max-height: 55vh;
  width: 100%;
}
.operation {
  padding: 0 $spacing-normal;
  // height: calc(100vh - 85vh - 77px);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.item {
  margin-bottom: $spacing-normal;
}
</style>
