<template>
  <div class="count-container">
    <el-dialog title="附件统计"
               :visible.sync="statisticVisible"
               :modal="false"
               :close-on-click-modal="false"
               width="63vw"
               class="chart-container">
      <el-button type="primary"
                 icon="el-icon-refresh-right"
                 class="refresh"></el-button>
      <el-row>
        <el-col :span="12">
          <div class="chart">
            <Pie id="local"
                 height="100%"
                 width="100%" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart">
            <Pie id="qiniu"
                 height="100%"
                 width="100%" />
          </div>
        </el-col>
      </el-row>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="statisticVisible = false">保存</el-button>
        <el-button @click="statisticVisible = false">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pie from './Pie'

/**
* @author: 邱林胜
* @createData: 2020年09月19日 10:45:06
* @version：v1.0
*
* @desc: 附件统计弹窗
*/
export default {
  name: 'AttachmentCount',

  components: {
    Pie
  },

  mixins: [],

  props: {

  },

  data() {
    return {
      statisticVisible: false
    }
  },

  computed: {},

  watch: {},

  created() { },

  mounted() {
  },

  methods: {
    show() {
      this.statisticVisible = true
    }
  }
}
</script>

<style lang="scss" scoped >
.count-container {
  &::v-deep .el-dialog {
    box-shadow: #4d4d4d 0 0 20px 0;
    border-radius: 15px;
  }
  &::v-deep .el-dialog__header {
    font-family: PingFangSC-Regular, sans-serif;
    height: 60px;
    background-color: #f8f8f8;
    border-radius: 15px 15px 0 0;
  }
  &::v-deep .el-dialog__title {
    font-size: 14px;
  }
  .dialog-footer {
    text-align: center;
  }
  .refresh {
    width: 46px;
    height: 32px;
    padding: 10px 10px 10px 10px;
  }
}

.chart-container {
  .chart {
    width: 100%;
    height: 300px;
    // border: 1px solid black;
  }
}
</style>
