<template>
  <div class="app-container">
    <div class="flex">
      <span>荣誉殿堂链接：</span>
      <el-link v-if="!edit" :href="link" type="primary">{{ link }}</el-link>
      <el-input v-if="edit" v-model="vr_link" placeholder="请输入内容" style="width:400px" clearable />
      <div style="margin-left:20px">
        <el-button v-if="!edit" type="primary" @click="edit = true">修改</el-button>
      </div>
      <div style="margin-left:20px">
        <el-button v-if="edit" type="success" @click="SetVRLinkM">保存</el-button>
        <el-button v-if="edit" type="info" @click="edit = false; vr_link = ''">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetVRLink,
  SetVRLink
} from '@/api/system/reward'

export default {
  data() {
    return {
      link: '',
      vr_link: '',
      edit: false
    }
  },
  mounted() {
    this.GetVRLinkM()
  },
  methods: {
    // 获取链接
    GetVRLinkM() {
      GetVRLink().then(res => {
        if (res.code === 200) {
          this.link = res.data.vr_link
        } else {
          this.$message.error(res.message || '获取失败')
        }
      })
    },
    // 修改链接
    SetVRLinkM() {
      if (this.vr_link === '') {
        this.$message.error('未输入链接地址')
        return
      }
      SetVRLink({
        vr_link: this.vr_link
      }).then(res => {
        if (res.code === 200) {
          this.edit = false
          this.link = this.vr_link
          this.$message.success('修改成功')
        } else {
          this.$message.error(res.message || '修改失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
    align-items: center;
  }
</style>
