<template class="dialog-single-tree">
  <el-dialog :title="title" :visible.sync="is_show" @close="closeDialog" append-to-body>
    <template>
      <div>
        <TreeSingle :is_draggable="true" ref="ref_tree" 
          :is_check="false" 
          :table_name="table_name" 
          @dropChange="dropChange"
        >
        </TreeSingle>
      </div>
    </template>
    <div slot="footer" class="dialog-footer">
      <div class="footer-item">
        <div class="footer-item-left" size="small">
       <span>请拖动要调整的节点到指定节点后松开</span> 
        </div>
        <div class="footer-item-right"><el-button type="primary" size="small" 
        :disabled="is_config_ok" @click="confirmDialog">确 定</el-button></div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../api/system.js';

export default {
  name: 'dialog-single-tree',
  props: {
    show_dialog: {
      type: Boolean,
      default: false,
      required: true
    },
    filter_data: {
      type: Array
    },
    table_name: {
      type: String,
      required: true
    }
  },
  components: {},
  data() {
    return {
      is_show: this.show_dialog,
      title: '',
      is_change :false,
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName']),
    commbox_where_values: function() {
      let that = this;
      let array = [];
      return array;
    },
    is_config_ok: function() {
      let that = this;
      return that.is_change === false;
    }
  },
  mounted() {
    let that = this;
    let table_info = that.getOneTableInfoByTableName(that.table_name);
    console.log('table_info====', table_info);

    if (table_info !== null && table_info !== undefined) {
      that.title = '调整【' + table_info.table_description + '】信息';
    } else {
      that.title = '没有获取到相应的数据信息';
    }
  },

  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    show_dialog(NewV, oldV) {
      let that = this;
      that.is_show = NewV;
    }
  },
  methods: {
    closeDialog(value) {
      let that = this;
      that.is_show = false;
      that.$emit('dialogClose');
    },
    dropChange(){
      let that = this;
      that.is_change =true;
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      that.is_show = false;
      let tree_data =that.$refs.ref_tree.getTreeData();
      that.$emit('dialogConfig',tree_data);
    },
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .footer-item-left {
      text-align: left;
      vertical-align: center;
      color: $theme-color-1;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
