<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-if="!loansAgreement" @click="showEdit('loansAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="loansAgreement"  type="primary" size="mini" @click="submitForm2('loansAgreement')">保存</el-button>
        <div v-if="!loansAgreement" v-html="form.loansAgreement" style="width: 98%" />
        <!--        <editor v-if="privacyAgreement" v-model="form.privacyAgreement" :min-height="192"></editor>-->
        <wang-edit v-if="loansAgreement" v-model="form.loansAgreement" :min-height="800" />
      </el-tab-pane>
      <el-tab-pane label="服务协议" name="serviceAgreement">
        <el-button type="primary" size="mini" v-if="!serviceAgreement" @click="showEdit('serviceAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="serviceAgreement" type="primary" size="mini" @click="submitForm2('serviceAgreement')">保存</el-button>
        <div v-if="!serviceAgreement" v-html="form.serviceAgreement" style="width: 98%" />
        <editor v-if="serviceAgreement" v-model="form.serviceAgreement" :min-height="192"></editor>
      </el-tab-pane>
      <el-tab-pane label="授权协议" name="authAgreement">
        <el-button type="primary" size="mini" v-if="!authAgreement" @click="showEdit('authAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="authAgreement" type="primary" size="mini" @click="submitForm2('authAgreement')">保存</el-button>
        <div v-if="!authAgreement" v-html="form.authAgreement" style="width: 98%" />
        <editor v-if="authAgreement" v-model="form.authAgreement" :min-height="192"></editor>
      </el-tab-pane>
      <el-tab-pane label="法律责任" name="lawAgreement">
        <el-button type="primary" size="mini" v-if="!lawAgreement" @click="showEdit('lawAgreement')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="lawAgreement" type="primary" size="mini" @click="submitForm2('lawAgreement')">保存</el-button>
        <div v-if="!lawAgreement" v-html="form.lawAgreement" style="width: 98%" />
        <editor v-if="lawAgreement" v-model="form.lawAgreement" :min-height="192"></editor>
      </el-tab-pane>
      <el-tab-pane label="合同模板" name="contractTemplate">
        <el-button type="primary" size="mini" v-if="!contractTemplate" @click="showEdit('contractTemplate')">编辑</el-button>
        <el-button :loading="buttonLoading" v-if="contractTemplate" type="primary" size="mini" @click="submitForm2('contractTemplate')">保存</el-button>
        <div v-if="!contractTemplate" v-html="form.contractTemplate" style="width: 98%" />
        <editor v-if="contractTemplate" v-model="form.contractTemplate" :min-height="192"></editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getAgreementSetting, updateAgreementSetting } from '@/api/dk/AgreementSetting'
import Editor from '@/components/Editor'
import WangEdit from '@/components/WangEdit'

export default {
  name: "AgreementSetting",
  components: {
    Editor,WangEdit
  },
  data() {
    return {
      //按钮loading
      buttonLoading: false,
      form: {
        id: undefined,
        loansAgreement:undefined,
        serviceAgreement:undefined,
        authAgreement:undefined,
        lawAgreement:undefined,
        contractTemplate: undefined,
      },
      activeName:'loansAgreement',
      // 表单校验
      rules: {
      },
      formDisable:true,
      loansAgreement:false,
      serviceAgreement:false,
      authAgreement:false,
      lawAgreement:false,
      contractTemplate: 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>
