<template>
  <div>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :before-close="dialogClose">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :title="title" name="1">
          <div class="dialog-content">
            <div class="dialog-item" v-for="(item, index) in currDate" :key="index">
              {{item.name}}: {{item.value}}
            </div>
          </div>
          <hr/>
          <h4>{{secondTitle}}</h4>
          <div class="dialog-content">
            <div class="dialog-item" v-for="(item, index) in secondCurrDate" :key="index">
              {{item.name}}: {{item.value}}
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: '1'
    }
  },
  props: {
    dialogTableVisible: Boolean,
    title: String,
    secondTitle: String,
    currDate: {
      type: Array,
      default: () => ([])
    },
    secondCurrDate: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    dialogClose () {
      this.$emit('dialogClose')
    }
  }
}
</script>

<style scoped>
.dialog-content{
  display: flex;
  flex-wrap: wrap;
}
.dialog-item {
  width: 25%;
  height: 30px;
  margin:10px 0;
}
.el-dialog {
  width: 70% !important;
}
</style>
