<template class="dialog-multiple">
  <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 class="context">
        <div class="context-left">
          <TableGrid
            ref="grid"
            :is_dialog="true"
            :is_check="true"
            :table_name="table_name"
            :is_delete="false"
            :is_edit="false"
            :is_watch="false"
            :page_size="8"
            :ref_level="ref_level"
            :filter_data="filter_data"
            @handleSelectionChange ="handleSelectionChange"
          ></TableGrid>
        </div>
        <div class="context-right">
          <div class="clearall" >
            <div size="mini"><span>选择列表</span></div>
            <div @click="clearAll">
              <span size="mini">清除所有</span>
              <el-button type="text" icon="el-icon-close"></el-button>
            </div>
          </div>
          <div class="right-list">
            <div class="right-context"
              v-for="item in select_items"
              :key="item.value"
            >
              <div class="item">
                <div class="name">{{ item.lable }}</div>
                <el-button
                  class="delete"
                  type="text"
                  @click="deleteOne(item)"
                  icon="el-icon-close"
                ></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <div slot="footer" class="dialog-footer">
      <div class="footer-item">
        <div class="footer-item-left" size="small">您选择总数据为:{{ select_count }}条</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_value:'',
      // is_config_ok: true,
      current_row:null,
      display_lable_field_name:'flame_id',
      display_value_field_name:'flame_id',
      select_items:[],
      select_item_rows:[]
      // 变化的字段列表
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName']),
    commbox_where_values: function() {
      let that = this;
      let array = [];
      return array;
    },
    select_count: function(){
      let that = this;
      return that.select_items.length;
    },
    is_config_ok: function()
    {
      let that = this;
      return that.select_count==0;
    }
  },
  mounted() {
    
  },

  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    show_dialog(NewV, oldV) {
      let that = this;
      that.is_show = NewV;
      
    },
    table_name(NewV,oldV){
      let that = this;
      console.log('table_name(NewV,oldV)',NewV,oldV);
      if(NewV!=''){
        that.initData();
      }
    },
    flameTableInfoItems(val) {
      // this.getField();
    }
  },
  methods: {
    initData(){
      let that = this;
      that.select_items = [];
      console.log('table_name=====',that.table_name);
      let table_info = that.getOneTableInfoByTableName(that.table_name);
      console.log('table_info:',table_info);
      if (table_info !== null) {
        that.title = '数据多项选择【' + table_info.table_description + '】信息';
        console.log('table_info.display_label_field_name',table_info.display_label_field_name);
        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 = '数据多项选择';
      }
    },
    
    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;
      that.$emit('dialogConfig', that.select_items);
    },
    // handleCurrentChangeRow(row) {
    //   let that = this;
    //   // console.log('handleCurrentChangeRow', row);
    //   that.current_row=row;
    //   if (row != null) {
    //     // that.is_config_ok = false;
    //     that.select_lable = row[that.display_lable_field_name];
    //     that.select_value = row[that.display_value_field_name];
        
    //   }
    // },
    handleSelectionChange(rows) {
      let that = this;
      rows.forEach(e => {
        let value = e[that.display_value_field_name];
        let lable = e[that.display_lable_field_name];
        let find = false;
        for(let i =0;i<that.select_items.length;i++){
          if(that.select_items[i].value === value){
            find = true;
            break;
          }
        }
        if (find === false){
           that.select_items.push({lable:lable,value:value});
        }
      });
      that.select_item_rows = rows;
    },
    deleteOne(item){
      let that = this;
      
      var index = -1;
      for(let i=0;i<that.select_items.length;i++){
        if(item.value === that.select_items[i].value){
          index = i;
          break;
        }
      }
      if (index > -1) {
       let value= that.select_items[index].value;
       for(let i=0;i<that.select_item_rows.length;i++){
         if (that.select_item_rows[i][that.display_value_field_name] === value){
           that.$refs.grid.toggleRowSelection(that.select_item_rows[i],false);
           break;
         }
       }
        that.select_items.splice(index, 1);
      }
    },
    clearAll(){
      let that = this;
      for(let k=0;k<that.select_items.length;k++){
        let value= that.select_items[k].value;
        for(let i=0;i<that.select_item_rows.length;i++){
          if (that.select_item_rows[i][that.display_value_field_name] === value){
            that.$refs.grid.toggleRowSelection(that.select_item_rows[i],false);
          }
        }
      }
      this.select_items=[];
    },
    searchClick(filter_data) {
      let that = this;
      console.log('filter_data', filter_data);
      that.$refs.grid.setDataByFilter(filter_data);
      that.is_config_ok = true;
      that.select_value='';
    }
  }
};
</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;
    }
  }
}

.context {
  height: 60vh;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex;
  .context-left {
    overflow-y: scroll;
    width: 75%;
    height: 60vh;
  }
  .context-right {
    width: 25%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .clearall {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      text-align: center;
      align-items: center;
       border-bottom: 1px solid #EBEEF5;
      // margin-right: 5px;
      padding: 5px;
      .item {
        margin: 4px;
      }
     
    }
    .right-list {
      overflow-y: scroll;
      max-height: calc(490px - 51px);
      .right-context {
        width: 100%;
        padding: 0px 0px 0px 0px;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          display: flex;
          border-bottom: 1px solid #EBEEF5;
          .name {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 5px;
          }
          .delete {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
