<template>
  <el-dialog :title="title" size="mini" :visible.sync="is_show" @close="closeDialog" append-to-body>
    <el-form :model="form">
      <div class="content">
        <el-form-item
          :style="{ width: cell_width }"
          class="item"
          size="mini"
          v-for="(field, index) in form.field_list"
          :key="index + '偶数'"
          :label="field.field_description"
          :label-width="formLabelWidth"
        >
          <el-input v-model="field.field_value" class="content-value" :disabled="true" size="mini" autocomplete="off"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="closeDialog">取 消</el-button> -->
      <el-button type="primary" @click="confirmDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../api/system.js';
export default {
  name: 'dialog-watch',
  props: {
    flame_id: {
      required: true,
      default: 0
    },
    show_dialog: {
      type: Boolean,
      default: false,
      required: true
    },
    table_name: {
      type: String,
      required: true
    },
    col_num: {
      type: Number,
      default: 2
    }
  },
  components: {},
  data() {
    return {
      cell_width: '50%',
      formLabelWidth: '120px',
      is_show: this.show_dialog,
      title: '',
      form: {
        field_list: []
      }
    };
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  mounted() {
    this.getField();
    this.calcWidth();
  },
  // 监控ID 是否变化，如果变化之后重新取新的数据
  watch: {
    immediate: true,
    flame_id: {
      handler(newV, oldV) {
        let that = this;
        console.log('is_show===', that.show_dialog, that.is_show);
        if (that.show_dialog === true) {
          console.log('flame_id', newV, oldV);
          that.getFieldValue(newV);
        }
      },
      immediate: true,
      keep: true
    },
    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;
      that.$emit('dialogClose', false);
    },
    // 确定对话框
    confirmDialog() {
      let that = this;
      // this.is_show = false;
      that.$emit('dialogClose', true);
    },
    calcWidth() {
      let that = this;
      let cell_width = 100 / that.col_num;
      that.cell_width = cell_width + '%';
    },
    // 获取记录的值
    getFieldValue(flame_id) {
      let that = this;
      console.log('==========', flame_id);
      system.singleSearch(that.table_name, { key: flame_id }, res => {
        // console.log('getFieldValue', res);
        that.form.field_list.forEach(element => {
          // 得到字段对应的值
          if (res.result === true) {
            let item = res.item;
            let temp_value = item[element.field_name];
            if (temp_value === true) {
              element.field_value = 'true';
            } else if (temp_value === false) {
              element.field_value = 'false';
            } else {
              element.field_value = temp_value;
            }
            if (element.is_fk === true && element.fk_table_name !== '' && element.fk_table_display_field_name !== '') {
              system.singleSearch(element.fk_table_name, { key: temp_value }, ref_res => {
                if (ref_res !== null && ref_res.result === true) {
                  let ref_item = ref_res.item;
                  element.field_value = ref_item[element.fk_table_display_field_name];
                }
                // 强制更新
                that.$forceUpdate();
              });
            }
            // 强制更新
            that.$forceUpdate();
          }
        });
      });
    },
    getField() {
      let that = this;
      let temp = that.getOneTableInfoItemByTableName(that.table_name);

      let table_info = that.getOneTableInfoByTableName(that.table_name);
      console.log('table_info', table_info);
      console.log('table_info_item', temp);
      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) {
          that.form.field_list.push(e);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form {
  padding: $spacing-mini $spacing-mini;
  font-size: 12px;
}
.content {
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  .item {
    margin-bottom: $spacing-normal;
  }
}
</style>
