<template>
  <!-- 导入协议弹窗 -->
  <el-dialog
    ref="exportagree"
    title="隐私协议"
    :visible.sync="openExport"
    append-to-body
    :close-on-click-modal="false"
    target="el-dialog__body"
    class="publicagree"
    width="630px"
    @closed="exportClose"
  >
    <div class="agreetxt">
      <p>根据《中华人民共和国计算机信息系统安全保护条例》及其他有关的国家法律 、法规和规定。 </p>
      <p> “用户的私人信息资料，不得向外界散发、告知。未经许可，任何单位、团体、个人不得查阅、持贝、抄录私人信息资料内容”</p>
      <p> 用户通过本平台产生的信息、行为或任何用户不愿被其它第三方获知的信息，都不应该进行公开发表，以保障用户的权益。</p>
      <p> 对导出信息后产生的任何行为或后果，用户需承担相应的法律风险及责任。</p>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="agreecheck"><el-checkbox v-model.trim="agreeFlag">我已确认并同意以上协议</el-checkbox></div>
      <el-button @click="exportClose">取消</el-button>
      <el-button type="primary" :disabled="!agreeFlag" @click="handleExport">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: 'ExportAgree',
  props: {
    openExport: { // 是否打开导出协议弹窗，默认false不打开
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      agreeFlag: false// 是否同意协议
    }
  },
  methods: {
    exportClose() { // 关闭弹窗
      this.agreeFlag = false
      this.$emit('update:openExport', false)
    },
    handleExport() { // 点击确定，调用导出接口
      this.exportClose()
      this.$emit('changeAgree')
    }
  }
}
</script>

<style scoped lang="scss">
  .publicagree{
    .agreetxt{
      margin-bottom: 30px;
      padding: 0 10px;
    }
    .agreecheck{
      text-align: left;
      padding: 0 0 15px 30px;
    }
  }
</style>
