<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;
  }
}
.inner-dialogwrap {
  display: flex;
  margin-top: -20px;
  border-top: 1px solid #dcdfe6;
  .lt-content {
    padding: 35px 45px 0 30px;
    flex: 0 0 440px;
    width: 440px;
    border-right: 1px solid #dcdfe6;
    p {
      font-size: 14px;
      color: #303133;
      line-height: 20px;
    }
    .btn {
      text-align: center;
      margin: 165px 0 36px;
      padding: 0;
    }
  }
  .rt-content {
    flex: 1;
    overflow-y: auto;
    height: 340px;
    li {
      padding: 13px 0 13px 20px;
      border-bottom: 1px solid #dcdfe6;
      font-size: 14px;
      color: #606266;
      line-height: 20px;
      &:last-child {
        margin-top: 4px;
      }
      .checker-name {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
.no-data-wrap {
  text-align: center;
  padding: 40px 0 0 0;
  line-height: 1;
  .no_checker_icon {
    width: 80px;
    height: 56px;
    margin: 0 auto;
    margin-bottom: 22px;
    img {
      width: 100%;
    }
  }
  p {
    color: #909399;
  }
}
.fl {
  float: left;
}
.clearfix:before,
.clearfix:after {
  display: block;
  visibility: hidden;
  height: 0;
  content: '';
  clear: both;
}
</style>
