<template>
  <el-dialog title="配置功能菜单的操作功能" :visible.sync="is_show" size="70%" @close="closeDialog" append-to-body>
    <div class="demo-drawer__content">
      <div class="content">
        <div class="content-left">
          <!--  @check_Change="checkChange"
          @current_change="current_change" -->
          <TreeSingle ref="ref_tree" :is_check="false" @current_change="currentChange" table_name="sys_flame_menu"></TreeSingle>
        </div>
        <div class="content-right">
          <div class="header">
            <div>{{ select_menu_name }}-{{ select_menu_id }}</div>
            <el-button type="primary" 
            v-if="is_show_operation" 
            style="width: 80px;" @click="clickSave" size="mini">保存</el-button>
          </div>
          <OperationEdit v-if="is_show_operation" :menu_id="select_menu_id" ref="ref_operation"></OperationEdit>
        </div>
      </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';
export default {
  name: 'Drawer-operation',
  props: {
    show_dialog: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  components: {},
  data() {
    return {
      is_show: false,
      select_menu_name: '请点击左边的功能菜单',
      select_menu_id: 0,
      is_show_operation:false,
    };
  },
  computed: {
    // 表对于的后台的模型名称
    // ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  mounted() {},
  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    immediate: true,
    show_dialog(NewV, oldV) {
      let that = this;
      that.is_show = NewV;
      
    }
  },
  methods: {
    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;
    },
    clickSave() {
      let that = this;
      let opeationData = that.$refs.ref_operation.getOperationData();
      let commit_data ={
        'menu_id':that.select_menu_id,
        'operation_list':opeationData
      }
      
      console.log('commit_data',commit_data);
      system.call_method('sys_flame_menu_ship_operation','addoperation',commit_data,res =>{
        // console.log('rest====',res);
        if (res.result === true) {
          that.$message({
            type: 'success',
            message: '操作成功'
          });
        } else {
          that.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      });
    },
    // 关闭对话框
    closeDialog(value) {
      let that = this;
      // that.is_show = false;
      that.$emit('dialogClose', false);
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      // this.is_show = false;
      that.$emit('dialogClose', true);
    }
  }
};
</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>
