<template>
  <el-dialog title="表情预览" :visible.sync="isShow" class="face-view-dialog">
    <div style="width:100%; padding-top:20px;">
      <ul class="histogram">
        <face-demo v-for="item in faces" :key="item.ID" :number="item.voteResult" :text="item.faceName" :path="item.facePath" />
      </ul>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="isShow = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import faceDemo from './components/FaceDemo.vue'
export default {
  components: {
    'face-demo': faceDemo
  },
  props: {
    faces: [Array],
    show: [Boolean]
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
  }
}
</script>
<style>
.face-view-dialog .el-dialog {
  width: 600px;
}
@media (max-width: 480px) {
  .face-view-dialog .el-dialog {
    width: 96%;
  }
}
</style>
