<template class="dialog-single-tree">
  <el-dialog :title="title" :visible.sync="is_show" @close="closeDialog" append-to-body>
    <template>
      <div>
        <TreeSingle
          :is_draggable="is_draggable"
          ref="ref_tree"
          :is_check="is_check"
          :table_name="table_name"
          @check_Change="checkChange"
          @current_change="current_change"
        ></TreeSingle>
      </div>
    </template>
    <div slot="footer" class="dialog-footer">
      <div class="footer-item">
        <div class="footer-item-left" size="small">
          当前选择了:{{ select_lable }}
          <span v-if="is_check">个</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
    },
    ref_level: {
      type: Number,
      default: 0
    },
    // 是否可以扡动
    is_draggable: {
      type: Boolean,
      default: false
    },
    is_check: {
      type: Boolean,
      default: false
    },
    filter_data: {
      type: Array
    },
    table_name: {
      type: String,
      required: true
    }
  },
  components: {},
  data() {
    return {
      is_show: this.show_dialog,
      title: '',
      select_lable: '',
      select_value: '',
      current_row: null,
      display_lable_field_name: 'flame_id',
      display_value_field_name: 'flame_id',
      select_items: []
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName']),
    commbox_where_values: function() {
      let that = this;
      let array = [];
      return array;
    },
    is_config_ok: function() {
      let that = this;
      if (that.is_check === false) {
        return that.select_value === '';
      } else {
        if (that.select_lable === '') {
          return true;
        } else {
          return that.select_lable === 0;
        }
      }
    }
  },
  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) {
      if (that.is_check === false) {
        that.title = '数据单项选择【' + table_info.table_description + '】信息';
      } else {
        that.title = '数据多项选择【' + table_info.table_description + '】信息';
      }
      that.display_lable_field_name = table_info.display_label_field_name;
      that.display_value_field_name = table_info.display_value_field_name;
    } 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;
      let select_value = {
        value: '',
        lable: ''
      };

      that.$emit('dialogClose', select_value);
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      that.is_show = false;
      if (that.is_check === false) {
        let select_value = {
          value: that.select_value,
          lable: that.select_lable
        };
        that.$emit('dialogConfig', select_value);
      } else {
        that.$emit('dialogConfig', that.select_items);
      }
    },
    checkChange(nodes) {
      let that = this;
      if (that.is_check === true) {
        that.select_lable = nodes.length;
        console.log('display:', that.display_lable_field_name, that.display_value_field_name);
        if (nodes.length > 0) {
          that.select_items = [];
          // let select_items.push();
          nodes.forEach(e => {
            let lable = e[that.display_lable_field_name];
            let value = e[that.display_value_field_name];
            that.select_items.push({ lable: lable, value: value });
          });
        }
      }
    },
    current_change(data, node) {
      let that = this;
      console.log('val-current', data);
      if (that.is_check === false) {
        if (data != null) {
          that.select_lable = data[that.display_lable_field_name];
          that.select_value = data[that.display_value_field_name];
        }
      } else {
        // let left_tree_select_Nodes = that.$refs.ref_tree.getCheckedNodes(false, false);
      }
      console.log(data, node);
    },
    getTreeData() {
      let that = this;
      return that.$refs.ref_tree.getTreeData();
    }
  }
};
</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>
