<template class="dialog-single">
  <el-dialog :title="title" :visible.sync="is_show" @close="closeDialog" append-to-body>
    <template>
      <div><FilterBar ref="filterbar" :table_name="table_name" @search="searchClick"></FilterBar></div>
      <div>
        <TableGrid
          ref="grid"
          :max_height="490"
          :is_dialog="true"
          :is_check="false"
          :table_name="table_name"
          :is_delete="false"
          :is_edit="false"
          :is_watch="false"
          :page_size="8"
          :ref_level="ref_level"
          :filter_data="filter_data"
          @handleCurrentChangeRow="handleCurrentChangeRow"
        ></TableGrid>
      </div>
    </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',
  props: {
    show_dialog: {
      type: Boolean,
      default: false,
      required: true
    },
    ref_level: {
      type: Number,
      default: 0
    },
    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'
      // 变化的字段列表
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName']),
    commbox_where_values: function() {
      let that = this;
      let array = [];
      return array;
    },
    is_config_ok: function() {
      let that = this;
      return that.select_value == '';
    }
  },
  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 + '】信息';
      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;
    },
    flameTableInfoItems(val) {
      // this.getField();
    }
  },
  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;
      let select_value = {
        value: that.select_value,
        lable: that.select_lable
      };
      that.$emit('dialogConfig', select_value);
    },
    handleCurrentChangeRow(row) {
      let that = this;
      // console.log('handleCurrentChangeRow', row);
      that.current_row = row;
      if (row != null) {
        that.select_lable = row[that.display_lable_field_name];
        that.select_value = row[that.display_value_field_name];
      }
    },
    searchClick(filter_data) {
      let that = this;
      console.log('filter_data', filter_data);
      if (that.is_tree === false) {
        that.$refs.grid.setDataByFilter(filter_data);
        that.select_value = '';
        that.select_lable = '';
      }
    }
  }
};
</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>
