<template>
  <el-dialog
    v-model="show" :close-on-click-modal="false" :title="language==0?'赛事购买协会':'Event Insurance Procurement Agreement'" append-to-body center
    class="pcloginpop"
    close-icon="CircleClose" destroy-on-close
    width="1100px"
  >
    <div v-html="data" />
    <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'])
const show = ref(false)
const data = ref()

const open = (row) => {
  show.value = true
  data.value = row
}

function submitForm() {
  show.value = false
}


defineExpose({ open })

</script>

<style lang="scss">
.threeFour {
  width: 100%;
  
  .el-upload--picture-card {
    width: 120px;
    height: 160px;
  }
  
  .el-upload-list--picture-card .el-upload-list__item {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;
  
  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.shenfen {
  .el-upload--picture-card {
    width: 320px;
    height: 200px;
  }
  
  .el-upload-list--picture-card .el-upload-list__item {
    width: 320px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload--picture-card ) {
    width: 140px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload-list__item ) {
    width: 140px;
    height: 200px;
  }
  
}

.el-form--inline .el-form-item {
  width: 100%
}


.boxDialog {
  .el-dialog__header {
    background: linear-gradient(#ed2c22, #fe6d45);
    margin-right: 0;
    height: 52px;
    
    span {
      color: #fff;
    }
  }
}

</style>