<template>
  <!-- 导出数据 -->
  <el-dialog title="导出数据" :visible.sync="dialogVisible" width="500px" @close="closeDialog" append-to-body>
    <div class="outer-dialogwrap">
      <ul class="clearfix">
        <li class="item fl">
          <div class="img">
            <img src="@/assets/data1.svg" alt="脱敏" />
          </div>
          <p class="title">脱敏数据</p>
          <p class="info">将敏感信息实现隐私保护</p>
          <el-button type="primary" plain @click="senReport(0)">生成报告</el-button>
        </li>
        <li class="item fl item2">
          <div class="img">
            <img src="@/assets/data2.svg" alt="完整" />
          </div>
          <p class="title">完整数据</p>
          <p class="info">未进行敏感数据隐私保护</p>
          <el-button type="warning" plain @click="senReport(1)">生成报告</el-button>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'export-dialog',
  data() {
    return {
      myDialogVisible: false
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    closeDialog() {
      // 关闭  导出数据的弹框
      this.$emit('update:dialogVisible', false);
    },
    senReport(type) {
      this.$emit('export', type);
    }
  }
};
</script>
<style lang="scss" scoped>
.outer-dialogwrap {
  padding: 10px 40px 30px;
  height: 250px;
  .item {
    width: 160px;
    text-align: center;
    margin: 0 auto;
    .img {
      width: 110px;
      height: 87px;
      margin: 0 auto;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .title {
      color: #303133;
      font-size: 16px;
      line-height: 22px;
      margin: 18px 0 10px 0;
    }
    .info {
      font-size: 13px;
      line-height: 18px;
      margin-bottom: 24px;
    }
  }
  .item2 {
    margin-left: 50px;
  }
}
.fl {
  float: left;
}
.clearfix:before,
.clearfix:after {
  display: block;
  visibility: hidden;
  height: 0;
  content: '';
  clear: both;
}
</style>
