<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户协议" name="loansAgreement">
        <el-button type="primary" size="mini" v-hasPermi="['cai:agreementSetting:edit']" v-if="!userAgreement" @click="showEdit('userAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="userAgreement"  type="primary" size="mini" @click="submitForm2('userAgreement')">保存</el-button>
        <div v-if="!userAgreement" v-html="form.userAgreement" style="width: 98%" />
        <wang-edit v-if="userAgreement" v-model="form.userAgreement" :min-height="800" />
      </el-tab-pane>
      <el-tab-pane label="主播入驻协议" name="anchorJoinAgreement">
        <el-button type="primary" size="mini" v-hasPermi="['cai:agreementSetting:edit']" v-if="!anchorJoinAgreement" @click="showEdit('anchorJoinAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="anchorJoinAgreement" type="primary" size="mini" @click="submitForm2('anchorJoinAgreement')">保存</el-button>
        <div v-if="!anchorJoinAgreement" v-html="form.anchorJoinAgreement" style="width: 98%" />
        <editor v-if="anchorJoinAgreement" v-model="form.anchorJoinAgreement" :min-height="192"></editor>
      </el-tab-pane>
      <el-tab-pane label="隐私协议" name="privacyAgreement">
        <el-button type="primary" size="mini" v-hasPermi="['cai:agreementSetting:edit']" v-if="!privacyAgreement" @click="showEdit('privacyAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="privacyAgreement" type="primary" size="mini" @click="submitForm2('privacyAgreement')">保存</el-button>
        <div v-if="!privacyAgreement" v-html="form.privacyAgreement" style="width: 98%" />
        <editor v-if="privacyAgreement" v-model="form.privacyAgreement" :min-height="192"></editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import WangEdit from '@/components/WangEdit'
import {getAgreementSetting, updateAgreementSetting} from "@/api/cai/agreementSetting";

export default {
  name: "AgreementSetting",
  components: {
    Editor,WangEdit
  },
  data() {
    return {
      //按钮loading
      buttonLoading: false,
      form: {
        id: undefined,
        userAgreement:undefined,
        anchorJoinAgreement:undefined,
        privacyAgreement: undefined,
      },
      activeName:'loansAgreement',
      // 表单校验
      rules: {
      },
      formDisable:true,
      userAgreement:false,
      anchorJoinAgreement:false,
      privacyAgreement: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      getAgreementSetting().then(response => {
        this.form = response.data;
      })
    },
    showEdit(key){
      this[key] = true;
    },
    submitForm2(key){
      const params = {
        id: this.form.id,
        [key]: this.form[key],
      };
      this.buttonLoading = true;
      updateAgreementSetting(params).then(response => {
        this.buttonLoading = false;
        this[key] = false;
        this.msgSuccess("修改成功");
      }).catch(() => {
        this.buttonLoading = false;
      });
    }
  }
};
</script>
