<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
    max-width="1200px"
    width="80%"
  >
    <div v-html="data" />
    <div class="checkbox">
      <el-checkbox
        v-model="checked"
        :disabled="insuranceViewRef==1"
        :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 v-if="insuranceViewRef!=1" class="btn-lineG w200px" round type="primary" @click="submitForm()">{{
          language == 0 ? '自行购买保险' : 'Buy by oneself'
        }}
        </el-button>
        <el-button class="btn-lineG w200px" round type="primary" @click="submitForm(1)">{{
          language == 0 ? '同意委托购买保险' : 'Agree to purchase'
        }}
        </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 insuranceViewRef = ref('0')
const open = (row, num, flag) => {
  show.value = true
  checked.value = num || '0'
  data.value = row
  insuranceViewRef.value = flag
}

function submitForm(v) {
  if (v == 1) {
    checked.value = '1'
  } else {
    checked.value = '0'
  }
  emit('scuess', checked.value)
  show.value = false
}

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


defineExpose({ open })

</script>

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


@media (max-width: 767px) {
  .w200px {
    min-width: 0
  }
}

/* 桌面（≥1024px） */
@media (min-width: 1024px) {
  .w200px {
    min-width: 200px
  }
}
</style>