<template>
  <el-dialog
    v-model="show"
    :title="language==0?'赛事购买协议':'Event Insurance Procurement Agreement'" append-to-body center
    class="pcloginpop"
    close-icon="CircleClose" destroy-on-close
    width="80%"
  >
    <div v-html="data" />
    <div class="checkbox">
      <el-checkbox
        v-model="checked"
        :label="language==0?'我同意授权赛事方帮忙购买保险':'I agree to authorize the event organizer to purchase insurance on my behalf'"
        false-value="0"
        size="large" true-value="1"
        @change="checkedChange"
      />
    </div>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button class="btn-lineG w200px" round type="primary" @click="submitForm">{{
          language == 0 ? '确定' : 'Save'
        }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref } from '@vue/runtime-core'
import { useStorage } from '@vueuse/core/index'

const language = useStorage('language', 0)
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm', 'checkedChange'])
const checked = ref('0')
const show = ref(false)
const data = ref()

const open = (row, num) => {
  show.value = true
  checked.value = num || '0'
  data.value = row
}

function submitForm() {
  show.value = false
  emit('submitForm')
}

function checkedChange() {
  emit('checkedChange', checked.value)
}


defineExpose({ open })

</script>

<style lang="scss">
.checkbox {
  
  span {
    color: #453DEA;
    position: relative;
    top: -1px;
    cursor: pointer
  }
}
</style>