<template>
    <div class="main">
        <el-card>
      <HeaderView title1="英雄榜" title2="投票规则"/>
    
        <!-- <div   >
            <vue-ueditor-wrap v-model="content" editor-id="editor" :config="request.editorConfig"
                :editorDependencies="['ueditor.config.js', 'ueditor.all.js','lang/zh-cn/zh-cn.js']"  />
        </div> -->
        <div class="myeditor"  style="margin-top: 20px;" >
          <ueditor :modelValue="content"  @changeData="changeData"></ueditor>
      
           

        </div>
        <div style="display: flex;justify-content: center;margin-top:32px;width: 1500px;"  >
            <el-button type="primary" text size="large" @click="drawer = true" >预览</el-button>
            <el-button size="large"  @click="open('温馨提示','确定要取消输入吗')" >取消</el-button>
            <el-button type="primary" size="large" @click="open('温馨提示','确定要保存输入吗')" >保存</el-button>
         </div>
        
         <el-drawer v-model="drawer" title="" >
    <phoneVew :htmlContent="content"></phoneVew>
  </el-drawer>
         </el-card>
        
    </div>
</template>
<script setup>
import request from "../api/request.js";
import { ElMessageBox ,ElMessage} from 'element-plus'

const drawer = ref(false)
const content = ref('');
const orgincontent = ref('');
const changeData=(data)=>{
  content.value = data;

}
onMounted(() => {
    getindexs()


})
const param = reactive({
  page_size: "10",
  page: "1",

});
const updateparam = reactive({
  agreement_title: "",
  agreement_content:"",

});
const getindexs = () => {
    request.agreement(2).then(res => {
        
        content.value= res.data.data.agreement_content
        orgincontent.value= res.data.data.agreement_content

    })
}
let rescode,message;
const open = (titles,spans) => {
  ElMessageBox({
    title: titles,
    message: h('p', null, [
      h('span', null, spans),
     
    ]),
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '提交中...'
        if('确定要取消输入吗'==spans){
    
            content.value=orgincontent.value
            done()
            instance.confirmButtonLoading = false
        }
        else{
            updateparam.agreement_content=content.value
            request.updateagreement(2,updateparam).then(res => {
            done()
            instance.confirmButtonLoading = false
            rescode = res.data.code
            message = res.data.message
    })
        }
        
       
      
      } else {
        
        done()
      }
    },
  }).then((action) => {
    if('确定要取消输入吗'==spans)
  {
    ElMessage({
      type: 'info',
      message: '已取消输入',
    })
  }
  else
  {

    if(rescode!=200)
  {
    ElMessage.error(message);
  
  }
  else
  {
   
    ElMessage({
      type: 'info',
      message: '提交成功',
    })
  }
  }
  })
}

</script>

<style scoped>
.main {
   
    background: white;
    height: 100%vh;
    /* background-image: url("../assets/img/index.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: bottom; */
}
</style>