<template>
  <div class="commdialogtablepage">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="modalVisible"
      width="960px"
      append-to-body
      :close-on-click-modal="false"
      @close="handleCloseClick"
      class="commdialogtablepage-dialog"
    >
      <slot name="dialogbodyHeadercontainer"></slot>
      <div class="commdialogtablepage-container">
        <el-row :gutter="10" class="commdialogtablepage-container-outrow">
          <template v-for="(item, index) in fieldList">
            <el-col
              :span="12"
              class="outrow-col"
              :key="index"
              :class="{'outcol-right-border': ((index%2) == 0), 'outcol-top-border': (index > 1)}"
            >
              <div class="outcol-content">
                <div class="fl content-lable">
                  <span>{{ fieldLableObj[item] }}</span>
                </div>
                <div class="content-value">
                  <span>{{ fieldValueObj[item] }}</span>
                </div>
              </div>
            </el-col>
          </template>
          <template v-if="!(fieldList.length%2 == 0)">
            <el-col
              :span="12"
              class="outrow-col"
              :class="{'outcol-top-border': (fieldList.length > 1)}"
            >
              <div class="outcol-content">
                <div class="fl content-lable">
                  <span>&nbsp;</span>
                </div>
                <div class="content-value">
                  <span>&nbsp;</span>
                </div>
              </div>
            </el-col>
          </template>
          <template>
            <slot name="dialogbodyMiddlecontainer"></slot>
          </template>
        </el-row>
      </div>
      <slot name="dialogbodyFootercontainer"></slot>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseClick">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "commdialogtablepage",
  props: {
    dialogTitle: {
      required: true,
      type: String
    },
    isVisibleDialog: {
      required: true,
      type: Boolean
    },
    fieldList: {
      required: true,
      type: Array,
      default() {
        return [
          'field1',
          'field2',
          'field3',
          'field4',
          'field5',
          'field6',
          'field7',
          'field8',
          'field9',
          'field10'
        ]
      }
    },
    fieldLableObj: {
      required: true,
      type: Object,
      default() {
        return {
          'field1': 'lable1',
          'field2': 'lable2',
          'field3': 'lable3',
          'field4': 'lable4',
          'field5': 'lable5',
          'field6': 'lable6',
          'field7': 'lable7',
          'field8': 'lable8',
          'field9': 'lable9',
          'field10': 'lable10'
        }
      }
    },
    fieldValueObj: {
      required: true,
      type: Object,
      default() {
        return {
          'field1': 'value1',
          'field2': 'value2',
          'field3': 'value3',
          'field4': 'value4',
          'field5': 'value5',
          'field6': 'value6',
          'field7': 'value7',
          'field8': 'value8',
          'field9': 'value9',
          'field10': 'value10'
        }
      }
    }
  },
  data() {
    return {
      modalVisible: false
    };
  },
  watch: {
    isVisibleDialog() {
      this.modalVisible = this.isVisibleDialog;
    }
  },
  methods: {
    /** 关闭按钮事件 */
    handleCloseClick() {
      this.$emit('custCommDialogTablePageClose', false);
    }
  }
};
</script>

