<template>
  <el-dialog class="dialog-double-tree" width="1000px" :title="title" :visible.sync="is_show" @close="closeDialog" append-to-body>
    <template>
      <!-- <FilterBar ref="filterbar" :table_name="table_name" @search="searchClick"></FilterBar> -->
      <TreeDouble ref="ref_tree" :is_check="true" :table_name="table_name" @change="change" @checkchange="checkChange"></TreeDouble>
    </template>
    <div slot="footer" class="dialog-footer">
      <div class="footer-item">
        <div class="footer-item-left" size="small">{{ select_lable }}</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
    },

    title: {
      type: String,
      default: '请传入标题'
    },
    filter_data: {
      type: Array
    },
    table_name: {
      type: String,
      required: true
    }
  },
  components: {},
  data() {
    return {
      is_show: this.show_dialog,
      is_config_ok: true,
      select_lable: '',
      select_value: []
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName']),
    commbox_where_values: function() {
      let that = this;
      let array = [];
      return array;
    }
  },
  mounted() {},
  // 监控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', false);
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      that.is_show = false;
      that.$emit('dialogConfig', that.select_value);
    },
    change(data) {
      let that = this;
      console.log('xxxxxx', data);
      that.select_value = data;
      that.is_config_ok = false;
    },
    checkChange(left_check_number, right_check_number) {
      let that = this;
      that.select_lable = '您左边勾选' + left_check_number + '个, 右边勾选' + right_check_number + '个';
    },
    setRightData(data) {
      let that = this;
      console.log('dialog- setRightData---data', data,that.$refs.ref_tree);
      that.$refs.ref_tree.setRightData(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-double-tree {
  height: 800px;
  .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>
