<template>
  <el-dialog
    :title="config.title"
    :visible.sync="dialogVisible"
    :width="config.width"
    class="infoShow"
    :before-close="handleClose"
  >
    <ul
      class="box"
      :style="{ maxHeight: config.height }"
    >
      <li
        v-for="(item, index) in config.lists"
        :key="index"
        class="item"
      >
        <h4>{{ item.group }}</h4>
        <el-row>
          <el-col
            v-for="(inner, idx) in item.children"
            :key="idx"
            :span="inner.col"
          >
            <span>{{ inner.key }}</span>
            <span>{{ inner.value }}</span>
          </el-col>
        </el-row>
      </li>
    </ul>
  </el-dialog>
</template>

<script>
export default {
  name: 'InfoShow',
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  mounted() {
  },
  methods: {
    init() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
    .infoShow{
        .box{
            margin: 0;
            padding: 0;
            overflow: hidden;
            overflow-y: auto;
            .item{
                margin-bottom: 10px;
                &:last-child{
                    margin-bottom: 0;
                }
                h4{
                    margin: 10px 0;
                }
                .el-col{
                    margin-bottom: 10px;
                    display: flex;
                    span{
                        display: inline-block;
                        &:nth-of-type(1) {
                            width: 90px;
                            margin-right: 10px;
                            color: rgba(0, 0, 0, 0.5);
                        }
                        &:nth-of-type(2) {
                            flex: 1;
                        }
                    }
                }
            }
        }
    }
</style>
