<template>
  <el-drawer :title="title" size="50%" :visible.sync="is_show" @close="closeDialog" append-to-body>
    <div class="master">
      <el-form :model="form" label-position="right">
        <div class="content">
          <el-form-item
            class="content-item"
            :style="{ width: cell_width }"
            v-for="(field, index) in form.field_list"
            :key="index"
            :required="!field.is_null_space"
            :label="field.field_description"
            :label-width="formLabelWidth"
          >
            <FormFieldValue
              :key_id="field.key_id"
              :field_value="field.field_value"
              :field_type="field.web_ui_control_type"
              :fk_table_name="field.fk_table_name"
              :fk_table_name_field="field.fk_table_name_field"
              :fk_table_display_field_name="field.fk_table_display_field_name"
              :disabled="field.is_detail_read_only"
              @changeKey="changFieldValue"
            ></FormFieldValue>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="detail">
      <ToolBar ref="toolbar" :is_visbile_new="true" :is_print="false" :is_group2="false" :is_group3="false" :is_group4="false" @clickNew="clickNew"></ToolBar>
      <TableGrid ref="grid_item" 
        :is_check="false"
        :is_watch="false" :is_edit="false" :is_delete="true" 
        :table_name="table_name_item" :ref_level="1"
        :filter_data="filter_data"></TableGrid>
      <DialogNew :table_name="table_name_item" :is_in_add="false" :show_dialog="dialog_new" @dialogClose="newDiaglogClose"></DialogNew>
    </div>
    <div class="operation">
      <div class="operation-button">
        <!-- <el-button type="primary" >取消</el-button> -->
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../api/system.js';
export default {
  name: 'dialog-edit',
  props: {
    show_dialog: {
      type: Boolean,
      default: false,
      required: true
    },
    table_name: {
      type: String,
      required: true
    },

    disabled: {
      type: Boolean,
      default: false
    },
    col_num: {
      type: Number,
      default: 2
    }
  },
  components: {},
  data() {
    return {
      cell_width: '50%',
      formLabelWidth: '120px',
      is_show: this.show_dialog,
      dialog_new: false,
      title: '',
      filter_data:[{ field_name: 'master_id', field_value: 0 }],
      form: {
        field_list: []
      },
      // 变化的字段列表
      change_field_list: [],
      data_item_list:[]
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName']),
    commbox_where_values: function() {
      let that = this;
      let array = [];
      return array;
    },
    table_name_item: function() {
      let that = this;
      return that.table_name + '_item';
    }
  },
  mounted() {
    let that = this;
    this.getField();
    this.calcWidth();
    console.log('grid_item',that.$refs);
    // let filter_data = [{ field_name: 'master_id', field_value: 0 }];
    // that.$refs.grid_item.setDataByFilter(filter_data);
  },

  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    show_dialog(NewV, oldV) {
      let that = this;
      that.is_show = NewV;
      
    },
    flameTableInfoItems(val) {
      // this.getField();
    }
  },
  methods: {
    clickNew() {
      let that = this;
      that.dialog_new = true;
    },
    
    newDiaglogClose(result,data){
      let that = this;
      that.dialog_new = false;
      if(result===true){
        // console.log('newDiaglogClose-data',data);
        that.data_item_list.push(data);
      }
      // console.log('newDiaglogClose-data-list',that.data_item_list);
    },
    
    closeDialog(value) {
      let that = this;
      that.is_show = false;
      that.$emit('dialogClose', false);
    },
    
    // 确定对话框
    confirmDialog() {
      let that = this;
      if (that.change_field_list.length > 0) {
        that.change_field_list = that.form.field_list.filter(t => t.is_change === true);
        let commit_data = {};
        that.change_field_list.forEach(e => {
          let value = e.field_value;
          commit_data[e.field_name] = e.field_value;
        });

        system.singleAdd(that.table_name, commit_data, res => {
          if (res !== null) {
            if (res.result === true) {
              let flame_id = res.item.flame_id;
              let commit_data_item ={data:[]};
              
              that.data_item_list.forEach(e=>{
                e['master_id'] = flame_id;
                commit_data_item.data.push(e);
              });
              console.log('commit_data_item',commit_data_item);
              
             // 增加明细数据
              system.batchAdd(that.table_name_item,commit_data_item,res_item =>{
                if(res_item.result === true){
                  that.clear();
                  that.$emit('dialogClose', true);
                }
              });
            }
          }
        });
      } else {
        that.$emit('dialogClose', false);
      }
    },
    // 清出数据
    clear() {
      let that = this;
      that.form.field_list.forEach(e => {
        e.field_value = null;
        e.is_change = false;
      });
      that.change_field_list = [];
      that.data_item_list =[];
    },
    calcWidth() {
      let that = this;
      let cell_width = 100 / that.col_num;
      that.cell_width = cell_width + '%';
    },
    getField() {
      let that = this;
      let temp = that.getOneTableInfoItemByTableName(that.table_name);
      let table_info = that.getOneTableInfoByTableName(that.table_name);
      if (table_info !== null) {
        that.title = '新建【' + table_info.table_description + '】信息';
      } else {
        that.title = '新建信息';
      }
      that.form.field_list = [];
      temp.forEach(e => {
        if (e.is_display_detail === true && e.is_detail_read_only === false) {
          that.form.field_list.push({
            key_id: e.flame_id,
            field_name: e.field_name,
            field_description: e.field_description,
            web_ui_control_type: e.web_ui_control_type,
            field_color_der: e.field_color_der,
            is_fk: e.is_fk,
            is_detail_read_only: e.is_detail_read_only,
            is_null_space: e.is_null_space,
            fk_table_name: e.fk_table_name,
            fk_table_name_field: e.fk_table_name_field,
            fk_table_display_field_name: e.fk_table_display_field_name,
            fk_table_ref_display_fields: e.fk_table_ref_display_fields,
            fk_sql: e.fk_sql,
            field_value: '',
            is_change: false
          });
        }
      });
    },
    //  数据发生变化时触发
    changFieldValue(key_id, value) {
      let that = this;
      // 如果是bool 类型要处理一下
      if (value === 'true') {
        value = true;
      } else if (value === 'false') {
        value = false;
      }

      that.form.field_list.forEach(e => {
        if (e.key_id === key_id) {
          e.field_value = value;
          e.is_change = true;
        }
      });
      that.change_field_list = that.form.field_list.filter(t => t.is_change === true);
      let change_field = that.form.field_list.find(t => t.key_id === key_id);
      console.log('change_field_list:', that.change_field_list, change_field);

      that.$emit('changeKey', that.change_field);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 2px;
}
.content {
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-wrap: wrap;
  .content-item {
    width: 33%;
  }
}

.operation {
  position: fixed;
  bottom: 10px;
  padding: 4px;
  .operation-button {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
  }
}
</style>
