<script setup lang="ts">
import PreviewFiles from './PreviewFiles.vue'
let dialogVisible = ref(false)

const protocol = ref(false)

const prop = defineProps({
  select: Boolean
})

const item = {
  url: '/center_resource/紫荆教育用户入驻及网络教学资源协议.docx'
}
const emit = defineEmits(['change'])

const changeProtocol = (flag?: boolean) => {
  if (flag !== undefined) {
    protocol.value = flag
  }
  emit('change', protocol)
  dialogVisible.value = false
}

onMounted(() => {
  protocol.value = prop.select
})
</script>
<template>
  <div style="display: flex; align-items: center">
    <el-checkbox @change="changeProtocol()" v-model="protocol" size="large"> 我已阅读并同意 </el-checkbox>
    <span class="red-color" @click="dialogVisible = true">《紫荆教育用户入驻及网络教学资源协议》</span>
  </div>
  <el-dialog v-model="dialogVisible" title="提示" width="850px">
    <PreviewFiles :item="item"></PreviewFiles>
    <template #footer>
      <el-button type="primary" @click="changeProtocol(true)">我已阅读并同意</el-button>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.red-color {
  color: #aa1941;
  cursor: pointer;
}
</style>
